@mihcm/ui 0.14.1

package/src/SectionHeader.tsx

@@ -0,0 +1,250 @@
+'use client';
+
+/**
+ * SectionHeader (web variant — React DOM).
+ *
+ * Small two-line header used inside permission editors and settings
+ * panels. Top line is a 15px semibold title; bottom line is an
+ * optional 12px muted description. Extracted from the MiHCM Security
+ * prototype's `sectionHeader(title, desc)` helper.
+ *
+ * Wiki: docs/components/SectionHeader.md
+ */
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { Text } from './Text.js';
+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<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Primary heading text. */
+  title: ReactNode;
+  /** Optional muted description shown below the title. */
+  description?: ReactNode;
+  /** Optional trailing slot (e.g. count badge, action button). */
+  action?: ReactNode;
+  /** Tokenized padding on all sides. */
+  padding?: SectionHeaderSpace;
+  /** Tokenized horizontal padding. Overrides `padding` for left/right. */
+  paddingX?: SectionHeaderSpace;
+  /** Tokenized vertical padding. Overrides `padding` for top/bottom. */
+  paddingY?: SectionHeaderSpace;
+  paddingTop?: SectionHeaderSpace;
+  paddingRight?: SectionHeaderSpace;
+  paddingBottom?: SectionHeaderSpace;
+  paddingLeft?: SectionHeaderSpace;
+  /** Tokenized margin on all sides. */
+  margin?: SectionHeaderSpace;
+  /** Tokenized horizontal margin. Overrides `margin` for left/right. */
+  marginX?: SectionHeaderSpace;
+  /** Tokenized vertical margin. Overrides `margin` for top/bottom. */
+  marginY?: SectionHeaderSpace;
+  marginTop?: SectionHeaderSpace;
+  marginRight?: SectionHeaderSpace;
+  marginBottom?: SectionHeaderSpace;
+  marginLeft?: SectionHeaderSpace;
+  /** Tokenized background/text surface. Use `className` for custom Tailwind token overrides. */
+  surface?: SectionHeaderSurface;
+  /** Optional border placement for contained section headers. */
+  border?: SectionHeaderBorder;
+  /** Optional radius for non-transparent surfaces. */
+  radius?: SectionHeaderRadius;
+  /** Optional tokenized shadow for raised section headers. */
+  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-secondary-foreground',
+    description: color?.description,
+  };
+}
+
+export const SectionHeader = forwardRef<HTMLDivElement, 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 (
+      <div
+        ref={ref}
+        className={cn(
+          'mt-5 mb-2 flex 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}
+      >
+        <div className={cn('min-w-0', contentClassName)}>
+          <Text size="body" weight="semibold" className={cn('block', tones.title, titleClassName)}>{title}</Text>
+          {description ? (
+            <Text
+              size="xs"
+              tone={surface === 'transparent' || surface === 'card' || surface === 'muted' ? 'muted' : undefined}
+              className={cn('mt-0.5 block', tones.description, descriptionClassName)}
+            >
+              {description}
+            </Text>
+          ) : null}
+        </div>
+        {action ? <div className={cn('flex-shrink-0', actionClassName)}>{action}</div> : null}
+      </div>
+    );
+  },
+);

package/src/Select.native.tsx

@@ -0,0 +1,299 @@
+/**
+ * Select (React Native variant).
+ *
+ * Uses Modal + FlatList for an iOS-idiomatic bottom-sheet picker.
+ * Same prop API as the web variant.
+ *
+ * Wiki: docs/components/Select.md
+ */
+import {
+  forwardRef,
+  createContext,
+  useContext,
+  useCallback,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type ViewProps,
+} from 'react-native';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+/* ── Context ───────────────────────────────────────────────────────── */
+
+interface SelectContextValue {
+  value: string | undefined;
+  onValueChange: (value: string) => void;
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  selectedLabel: string | undefined;
+  setSelectedLabel: (label: string | undefined) => void;
+}
+
+const SelectContext = createContext<SelectContextValue | null>(null);
+
+function useSelectContext() {
+  const ctx = useContext(SelectContext);
+  if (!ctx) throw new Error('Select sub-components must be used within <Select>.');
+  return ctx;
+}
+
+/* ── Root ───────────────────────────────────────────────────────────── */
+
+export interface SelectProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export function Select({
+  value,
+  onValueChange,
+  open: controlledOpen,
+  onOpenChange,
+  disabled,
+  children,
+}: SelectProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = controlledOpen ?? internalOpen;
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (disabled && next) return;
+      onOpenChange?.(next);
+      setInternalOpen(next);
+    },
+    [disabled, onOpenChange],
+  );
+
+  const [selectedLabel, setSelectedLabel] = useState<string | undefined>();
+
+  const handleValueChange = useCallback(
+    (v: string) => {
+      onValueChange?.(v);
+      setOpen(false);
+    },
+    [onValueChange, setOpen],
+  );
+
+  return (
+    <SelectContext.Provider
+      value={{ value, onValueChange: handleValueChange, open, setOpen, selectedLabel, setSelectedLabel }}
+    >
+      {children}
+    </SelectContext.Provider>
+  );
+}
+
+/* ── Trigger ───────────────────────────────────────────────────────── */
+
+export const selectTriggerVariants = cva(
+  'flex-row items-center justify-between rounded-lg border bg-card shadow-mi-input',
+  {
+    variants: {
+      variant: {
+        default: 'border-border',
+        destructive: 'border-destructive',
+      },
+      size: {
+        sm: 'h-9 px-3',
+        md: 'h-10 px-3.5',
+        lg: 'h-12 px-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  },
+);
+
+export interface SelectTriggerProps
+  extends ClassedViewProps,
+    VariantProps<typeof selectTriggerVariants> {
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export const SelectTrigger = forwardRef<View, SelectTriggerProps>(
+  function SelectTrigger({ className, variant, size, placeholder, disabled, ...props }, ref) {
+    const ctx = useSelectContext();
+
+    const displayText = ctx.selectedLabel ?? ctx.value;
+
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="combobox"
+        accessibilityState={{ disabled: !!disabled, expanded: ctx.open }}
+        disabled={disabled}
+        onPress={() => ctx.setOpen(!ctx.open)}
+        className={cn(
+          selectTriggerVariants({ variant, size }),
+          disabled && 'opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        <Text
+          className={cn(
+            'flex-1 text-sm text-foreground',
+            !displayText && 'text-muted-foreground',
+          )}
+          numberOfLines={1}
+        >
+          {displayText ?? placeholder ?? 'Select…'}
+        </Text>
+        <Text className="ml-2 text-xs text-muted-foreground">{'▾'}</Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Content (Modal + FlatList) ────────────────────────────────────── */
+
+export interface SelectContentProps extends ClassedViewProps {}
+
+export const SelectContent = forwardRef<View, SelectContentProps>(
+  function SelectContent({ className, children, ...props }, ref) {
+    const ctx = useSelectContext();
+
+    return (
+      <Modal
+        visible={ctx.open}
+        transparent
+        animationType="slide"
+        onRequestClose={() => ctx.setOpen(false)}
+        statusBarTranslucent
+      >
+        <Pressable
+          onPress={() => ctx.setOpen(false)}
+          className="flex-1 justify-end bg-black/40"
+          accessibilityRole="none"
+        >
+          <Pressable onPress={(e) => e.stopPropagation()}>
+            <View
+              ref={ref}
+              className={cn(
+                'max-h-80 rounded-t-2xl border-t border-border bg-card px-2 pb-8 pt-4',
+                className,
+              )}
+              {...props}
+            >
+              {/* Drag handle */}
+              <View className="mb-3 h-1 w-10 self-center rounded-full bg-border" />
+              {children}
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    );
+  },
+);
+
+/* ── Item ──────────────────────────────────────────────────────────── */
+
+export interface SelectItemProps extends ClassedViewProps {
+  value: string;
+  disabled?: boolean;
+  children: ReactNode;
+}
+
+export const SelectItem = forwardRef<View, SelectItemProps>(
+  function SelectItem({ className, value, disabled, children, ...props }, ref) {
+    const ctx = useSelectContext();
+    const isSelected = ctx.value === value;
+
+    // Register label of selected item
+    if (isSelected && typeof children === 'string' && ctx.selectedLabel !== children) {
+      ctx.setSelectedLabel(children);
+    }
+
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="menuitem"
+        accessibilityState={{ selected: isSelected, disabled: !!disabled }}
+        disabled={disabled}
+        onPress={() => {
+          if (!disabled) {
+            ctx.onValueChange(value);
+          }
+        }}
+        className={cn(
+          'flex-row items-center rounded-lg px-3 py-3',
+          isSelected && 'bg-primary/10',
+          disabled && 'opacity-50',
+          className,
+        )}
+        {...props}
+      >
+        <View className="mr-3 h-5 w-5 items-center justify-center">
+          {isSelected && (
+            <Text className="text-primary text-sm">{'✓'}</Text>
+          )}
+        </View>
+        <Text
+          className={cn(
+            'flex-1 text-sm text-foreground',
+            isSelected && 'font-medium text-primary',
+          )}
+          numberOfLines={1}
+        >
+          {children}
+        </Text>
+      </Pressable>
+    );
+  },
+);
+
+/* ── Group ─────────────────────────────────────────────────────────── */
+
+export interface SelectGroupProps extends ClassedViewProps {}
+
+export const SelectGroup = forwardRef<View, SelectGroupProps>(
+  function SelectGroup({ className, ...props }, ref) {
+    return <View ref={ref} className={cn('py-1', className)} {...props} />;
+  },
+);
+
+/* ── Label ─────────────────────────────────────────────────────────── */
+
+export interface SelectLabelProps extends ClassedViewProps {
+  children: ReactNode;
+}
+
+export const SelectLabel = forwardRef<View, SelectLabelProps>(
+  function SelectLabel({ className, children, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('px-3 py-1.5', className)} {...props}>
+        <Text className="text-xs font-semibold text-muted-foreground">{children}</Text>
+      </View>
+    );
+  },
+);
+
+/* ── Separator ─────────────────────────────────────────────────────── */
+
+export interface SelectSeparatorProps extends ClassedViewProps {}
+
+export const SelectSeparator = forwardRef<View, SelectSeparatorProps>(
+  function SelectSeparator({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        className={cn('my-1 h-px bg-border', className)}
+        {...props}
+      />
+    );
+  },
+);