@mihcm/ui 0.14.1

package/src/Toggle.tsx

@@ -0,0 +1,169 @@
+'use client';
+
+/**
+ * Toggle & ToggleGroup (web variant — React DOM).
+ *
+ * `Toggle` is a single pressable that toggles between on/off.
+ * `ToggleGroup` wraps multiple toggles for single- or multi-select.
+ *
+ *   <Toggle pressed={bold} onPressedChange={setBold}>
+ *     <BoldIcon /> Bold
+ *   </Toggle>
+ *
+ *   <ToggleGroup type="single" value={align} onValueChange={setAlign}>
+ *     <ToggleGroupItem value="left"><AlignLeftIcon /></ToggleGroupItem>
+ *     <ToggleGroupItem value="center"><AlignCenterIcon /></ToggleGroupItem>
+ *     <ToggleGroupItem value="right"><AlignRightIcon /></ToggleGroupItem>
+ *   </ToggleGroup>
+ *
+ * Wiki: docs/components/Toggle.md
+ */
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type HTMLAttributes,
+} from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './internal/cn.js';
+
+/* Toggle */
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium ' +
+    'transition-colors duration-150 ' +
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ' +
+    'disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent hover:bg-muted',
+        outline: 'border border-border bg-transparent hover:bg-muted',
+      },
+      size: {
+        sm: 'h-8 px-2',
+        md: 'h-9 px-3',
+        lg: 'h-10 px-4',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'md' },
+  },
+);
+
+export interface ToggleProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'>,
+    VariantProps<typeof toggleVariants> {
+  pressed: boolean;
+  onPressedChange: (pressed: boolean) => void;
+  disabled?: boolean;
+}
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(
+  { className, variant, size, pressed, onPressedChange, disabled, ...props },
+  ref,
+) {
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-pressed={pressed}
+      disabled={disabled}
+      onClick={() => onPressedChange(!pressed)}
+      className={cn(
+        toggleVariants({ variant, size }),
+        pressed && 'bg-accent/15 text-accent',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+/* ── ToggleGroup ────────────────────────────────────────────────────── */
+
+interface ToggleGroupContextValue {
+  type: 'single' | 'multiple';
+  value: string | string[];
+  onItemToggle: (itemValue: string) => void;
+  variant?: VariantProps<typeof toggleVariants>['variant'];
+  size?: VariantProps<typeof toggleVariants>['size'];
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);
+
+export type ToggleGroupProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof toggleVariants> &
+  (
+    | {
+        type: 'single';
+        value: string;
+        onValueChange: (value: string) => void;
+      }
+    | {
+        type: 'multiple';
+        value: string[];
+        onValueChange: (value: string[]) => void;
+      }
+  );
+
+export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+  function ToggleGroup({ className, type, value, onValueChange, variant, size, ...props }, ref) {
+    const onItemToggle = (itemValue: string) => {
+      if (type === 'single') {
+        (onValueChange as (v: string) => void)(itemValue);
+      } else {
+        const arr = value as string[];
+        const next = arr.includes(itemValue)
+          ? arr.filter((v) => v !== itemValue)
+          : [...arr, itemValue];
+        (onValueChange as (v: string[]) => void)(next);
+      }
+    };
+
+    return (
+      <ToggleGroupContext.Provider value={{ type, value, onItemToggle, variant, size }}>
+        <div
+          ref={ref}
+          role="group"
+          className={cn('inline-flex items-center gap-1', className)}
+          {...props}
+        />
+      </ToggleGroupContext.Provider>
+    );
+  },
+);
+
+/* ── ToggleGroupItem ────────────────────────────────────────────────── */
+
+export interface ToggleGroupItemProps
+  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  value: string;
+  disabled?: boolean;
+}
+
+export const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  function ToggleGroupItem({ className, value, disabled, ...props }, ref) {
+    const ctx = useContext(ToggleGroupContext);
+    if (!ctx) throw new Error('ToggleGroupItem must be used within <ToggleGroup>');
+
+    const pressed = ctx.type === 'single'
+      ? ctx.value === value
+      : (ctx.value as string[]).includes(value);
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-pressed={pressed}
+        disabled={disabled}
+        onClick={() => ctx.onItemToggle(value)}
+        className={cn(
+          toggleVariants({ variant: ctx.variant, size: ctx.size }),
+          pressed && 'bg-accent/15 text-accent',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);

package/src/Tooltip.native.tsx

@@ -0,0 +1,62 @@
+/**
+ * Tooltip (React Native variant).
+ *
+ * On native, tooltips display on long-press since there is no hover.
+ * A small popover appears above/below the trigger.
+ *
+ *   <Tooltip content="Copy to clipboard">
+ *     <Button variant="ghost"><CopyIcon /></Button>
+ *   </Tooltip>
+ *
+ * Wiki: docs/components/Tooltip.md
+ */
+import { forwardRef, useState, type ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { cn } from './internal/cn.js';
+
+type ClassedViewProps = Omit<ViewProps, 'style'> & { className?: string };
+
+const SIDE_CLASSES: Record<string, string> = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+};
+
+export interface TooltipProps extends ClassedViewProps {
+  content: ReactNode;
+  side?: 'top' | 'bottom';
+  children?: ReactNode;
+}
+
+export const Tooltip = forwardRef<View, TooltipProps>(function Tooltip(
+  { className, content, side = 'top', children, ...props },
+  ref,
+) {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View ref={ref} className={cn('relative', className)} {...props}>
+      <Pressable
+        onLongPress={() => setVisible(true)}
+        onPressOut={() => setVisible(false)}
+        accessibilityHint={typeof content === 'string' ? content : undefined}
+      >
+        {children}
+      </Pressable>
+      {visible && (
+        <View
+          className={cn(
+            'absolute z-50 rounded-md bg-foreground px-2.5 py-1.5',
+            SIDE_CLASSES[side],
+          )}
+          pointerEvents="none"
+        >
+          {typeof content === 'string' ? (
+            <Text className="text-xs text-background">{content}</Text>
+          ) : (
+            content
+          )}
+        </View>
+      )}
+    </View>
+  );
+});

package/src/Tooltip.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+/**
+ * Tooltip (web variant — React DOM).
+ *
+ * Hover/focus tooltip using CSS anchor positioning fallback.
+ * Renders a `<span>` trigger wrapping children and an absolutely
+ * positioned tooltip element.
+ *
+ *   <Tooltip content="Copy to clipboard">
+ *     <Button variant="ghost"><CopyIcon /></Button>
+ *   </Tooltip>
+ *
+ *   <Tooltip content="Settings" side="right">
+ *     <IconButton>…</IconButton>
+ *   </Tooltip>
+ *
+ * Wiki: docs/components/Tooltip.md
+ */
+import { forwardRef, useState, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from './internal/cn.js';
+
+const SIDE_CLASSES: Record<string, string> = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+};
+
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
+  /** Text shown in the tooltip. */
+  content: ReactNode;
+  /** Which side of the trigger to place the tooltip. */
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  /** Delay in ms before showing. */
+  delayMs?: number;
+  /** Allow pointer interaction inside the tooltip content. */
+  interactive?: boolean;
+  /** Content class hook for rich styled tooltip bodies. */
+  contentClassName?: string;
+}
+
+export const Tooltip = forwardRef<HTMLSpanElement, TooltipProps>(function Tooltip(
+  { className, content, side = 'top', delayMs = 300, interactive = false, contentClassName, children, ...props },
+  ref,
+) {
+  const [visible, setVisible] = useState(false);
+  const [timeoutId, setTimeoutId] = useState<ReturnType<typeof setTimeout> | null>(null);
+
+  const show = () => {
+    const id = setTimeout(() => setVisible(true), delayMs);
+    setTimeoutId(id);
+  };
+  const hide = () => {
+    if (timeoutId) clearTimeout(timeoutId);
+    setTimeoutId(null);
+    setVisible(false);
+  };
+
+  return (
+    <span
+      ref={ref}
+      className={cn('relative inline-flex', className)}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocus={show}
+      onBlur={hide}
+      {...props}
+    >
+      {children}
+      {visible && (
+        <span
+          role="tooltip"
+          className={cn(
+            'pointer-events-none absolute z-50 w-max max-w-[min(20rem,calc(100vw-2rem))] whitespace-nowrap rounded-md',
+            'bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md',
+            'animate-fade-in',
+            interactive && 'pointer-events-auto',
+            SIDE_CLASSES[side],
+            contentClassName,
+          )}
+        >
+          {content}
+        </span>
+      )}
+    </span>
+  );
+});

package/src/TopBar.native.tsx

@@ -0,0 +1,223 @@
+/**
+ * TopBar (React Native variant) + compound sub-components.
+ *
+ * Mobile-first: horizontal bar with back button, title, and actions.
+ * Parallelograms omitted (web CSS-only). TopBarHomeButton skipped.
+ *
+ * Wiki: docs/components/TopBar.md
+ */
+import { forwardRef, type ReactNode } from 'react';
+import { cn } from './internal/cn.js';
+import { Logo, type LogoProps } from './Logo.js';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+
+export interface TopBarProps extends Omit<ViewProps, 'style' | 'children'> {
+  start?: ReactNode;
+  center?: ReactNode;
+  end?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  appearance?: 'system' | 'light' | 'dark';
+}
+
+export const TopBar = forwardRef<View, TopBarProps>(function TopBar(
+  { className, start, center, end, children, appearance = 'system', ...props },
+  ref,
+) {
+  return (
+    <View
+      ref={ref}
+      accessibilityRole="header"
+      className={cn(
+        'flex-row items-center justify-between px-3 py-2',
+        appearance === 'dark' && 'bg-topbar-dark-surface',
+        appearance === 'light' && 'bg-topbar-light-surface',
+        appearance === 'system' && 'bg-card',
+        className,
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <View className="flex-row items-center">{start}</View>
+          {center ? <View className="flex-1 items-center px-3">{center}</View> : null}
+          <View className="flex-row items-center gap-3">{end}</View>
+        </>
+      )}
+    </View>
+  );
+});
+
+export interface TopBarLogoProps extends Omit<ViewProps, 'style' | 'children'> {
+  variant?: LogoProps['variant'];
+  size?: LogoProps['size'];
+  brand?: LogoProps['brand'];
+  assetVariant?: LogoProps['assetVariant'];
+  assetBasePath?: LogoProps['assetBasePath'];
+  src?: string;
+  alt?: string;
+  logoClassName?: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const TopBarLogo = forwardRef<View, TopBarLogoProps>(
+  function TopBarLogo(
+    {
+      className,
+      src,
+      alt = 'MiHCM',
+      variant = 'primary',
+      size = 'md',
+      brand,
+      assetVariant,
+      assetBasePath,
+      logoClassName,
+      children,
+      ...props
+    },
+    ref,
+  ) {
+    const logoProps = {
+      ...(src ? { src } : {}),
+      ...(brand ? { brand } : {}),
+      ...(assetVariant ? { assetVariant } : {}),
+      ...(assetBasePath ? { assetBasePath } : {}),
+    };
+
+    return (
+      <View ref={ref} className={cn('mr-1', className)} {...props}>
+        {children ?? (
+          <Logo
+            {...logoProps}
+            alt={alt}
+            variant={variant}
+            size={size}
+            className={logoClassName}
+          />
+        )}
+      </View>
+    );
+  },
+);
+
+export interface TopBarBackLinkProps extends Omit<ViewProps, 'style' | 'children'> {
+  href?: string;
+  icon?: ReactNode;
+  onPress?: () => void;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const TopBarBackLink = forwardRef<View, TopBarBackLinkProps>(
+  function TopBarBackLink({ className, icon, onPress, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        accessibilityLabel={typeof children === 'string' ? children : 'Back'}
+        onPress={onPress}
+        className={cn('flex-row items-center gap-1 py-1', className)}
+        {...props}
+      >
+        {icon ?? <Text className="text-lg text-foreground">{'‹'}</Text>}
+        {children ? (
+          <Text className="text-xs font-medium text-foreground">{children}</Text>
+        ) : null}
+      </Pressable>
+    );
+  },
+);
+
+export interface TopBarNotificationProps extends Omit<ViewProps, 'style' | 'children'> {
+  icon: ReactNode;
+  count?: number;
+  onPress?: () => void;
+  className?: string;
+}
+
+export const TopBarNotification = forwardRef<View, TopBarNotificationProps>(
+  function TopBarNotification({ className, icon, count, onPress, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        accessibilityLabel={count ? `Notifications (${count})` : 'Notifications'}
+        onPress={onPress}
+        className={cn('relative', className)}
+        {...props}
+      >
+        <View className="h-6 w-6 items-center justify-center text-muted-foreground">
+          {icon}
+        </View>
+        {count != null && count > 0 && (
+          <View className="absolute -top-1 -right-1 min-w-4 h-4 items-center justify-center rounded-full bg-destructive px-1">
+            <Text className="text-caption font-bold text-destructive-foreground">
+              {count > 99 ? '99+' : count}
+            </Text>
+          </View>
+        )}
+      </Pressable>
+    );
+  },
+);
+
+export interface TopBarProfileProps extends Omit<ViewProps, 'style'> {
+  name?: string;
+  subtitle?: string;
+  avatar: ReactNode;
+  status?: ReactNode;
+  className?: string;
+}
+
+export const TopBarProfile = forwardRef<View, TopBarProfileProps>(
+  function TopBarProfile({ className, name: _name, subtitle: _subtitle, avatar, status, ...props }, ref) {
+    return (
+      <View ref={ref} className={cn('flex-row items-center', className)} {...props}>
+        <View className="relative">
+          {avatar}
+          {status && (
+            <View className="absolute -bottom-0.5 -right-0.5">{status}</View>
+          )}
+        </View>
+      </View>
+    );
+  },
+);
+
+export const TopBarDivider = forwardRef<View, Omit<ViewProps, 'style'> & { className?: string }>(
+  function TopBarDivider({ className, ...props }, ref) {
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="none"
+        className={cn('h-4 w-px bg-border mx-1', className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export interface TopBarActionProps extends Omit<ViewProps, 'style' | 'children'> {
+  icon?: ReactNode;
+  onPress?: () => void;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const TopBarAction = forwardRef<View, TopBarActionProps>(
+  function TopBarAction({ className, icon, onPress, children, ...props }, ref) {
+    return (
+      <Pressable
+        ref={ref as never}
+        accessibilityRole="button"
+        onPress={onPress}
+        className={cn('flex-row items-center gap-1', className)}
+        {...props}
+      >
+        {icon && <View className="h-5 w-5 items-center justify-center">{icon}</View>}
+        {children ? <Text className="text-xs text-muted-foreground">{children}</Text> : null}
+      </Pressable>
+    );
+  },
+);