@himakarinv/nativex 1.0.0

package/src/components/Button/Button.tsx

@@ -0,0 +1,584 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Platform,
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, button as buttonTokens, colors, radius } from '../../theme';
+import { Icon } from '../Icon';
+
+export const ButtonVariant = {
+  Primary: 'primary',
+  Secondary: 'secondary',
+  Success: 'success',
+  Danger: 'danger',
+  Warning: 'warning',
+  Info: 'info',
+  SecondaryGray: 'secondary-gray',
+  Tertiary: 'tertiary',
+  TertiaryGray: 'tertiary-gray',
+  LinkPrimary: 'link-primary',
+  LinkGray: 'link-gray',
+  PrimaryDanger: 'primary-danger',
+  SecondaryDanger: 'secondary-danger',
+  SecondaryDangerGray: 'secondary-danger-gray',
+  TertiaryDanger: 'tertiary-danger',
+  TertiaryDangerGray: 'tertiary-danger-gray',
+  LinkDangerPrimary: 'link-danger-primary',
+  LinkDangerGray: 'link-danger-gray',
+} as const;
+
+export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];
+
+export const ButtonSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+  ExtraLarge: 'xl',
+  ExtraExtraLarge: '2xl',
+} as const;
+
+export type ButtonSize = (typeof ButtonSize)[keyof typeof ButtonSize];
+
+export const IconPosition = {
+  None: 'none',
+  Before: 'before',
+  After: 'after',
+  Only: 'only',
+} as const;
+
+export type IconPosition = (typeof IconPosition)[keyof typeof IconPosition];
+
+export const IconType = {
+  Circle: 'circle',
+  Dot: 'dot',
+} as const;
+
+export type IconType = (typeof IconType)[keyof typeof IconType];
+
+export type ButtonProps = {
+  label?: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  iconPosition?: IconPosition;
+  iconType?: IconType;
+  iconName?: string;
+  iconDecorative?: boolean;
+  accessibilityLabel?: string;
+  onPress?: () => void;
+  fullWidth?: boolean;
+  style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
+};
+
+type VisualSize = 'sm' | 'md' | 'lg' | 'xl';
+
+type VariantClasses = {
+  container: string;
+  pressed: string;
+  disabled: string;
+  label: string;
+  labelPressed: string;
+  labelDisabled: string;
+  focused?: string;
+  labelFocused?: string;
+  circle: string;
+  dot: string;
+  isLink: boolean;
+};
+
+const focusDismissers = new Set<() => void>();
+let retainFocusUntil = 0;
+
+function clearAllButtonFocus() {
+  focusDismissers.forEach((dismiss) => dismiss());
+}
+
+export function dismissButtonFocus() {
+  if (Date.now() < retainFocusUntil) {
+    return;
+  }
+  clearAllButtonFocus();
+}
+
+const LINK_VARIANTS = new Set<ButtonVariant>([
+  ButtonVariant.LinkPrimary,
+  ButtonVariant.LinkGray,
+  ButtonVariant.LinkDangerPrimary,
+  ButtonVariant.LinkDangerGray,
+]);
+
+function cx(...parts: (string | false | null | undefined)[]) {
+  return parts.filter(Boolean).join(' ');
+}
+
+function visualSize(size: ButtonSize): VisualSize {
+  return size === ButtonSize.ExtraExtraLarge ? 'xl' : size;
+}
+
+const SIZE_CLASS: Record<VisualSize, string> = {
+  sm: 'h-btn-sm py-btn-sm-y px-btn-sm-x',
+  md: 'h-btn-md py-btn-md-y px-btn-md-x',
+  lg: 'h-btn-lg py-btn-lg-y px-btn-lg-x',
+  xl: 'h-btn-xl py-btn-xl-y px-btn-xl-x',
+};
+
+const ICON_ONLY_CLASS: Record<VisualSize, string> = {
+  sm: 'h-btn-sm w-btn-sm p-0',
+  md: 'h-btn-md w-btn-md p-0',
+  lg: 'h-btn-lg w-btn-lg p-0',
+  xl: 'h-btn-xl w-btn-xl p-0',
+};
+
+const LABEL_CLASS: Record<VisualSize, string> = {
+  sm: 'text-sm leading-5',
+  md: 'text-md',
+  lg: 'text-base',
+  xl: 'text-lg',
+};
+
+const VARIANT_CLASS: Record<ButtonVariant, VariantClasses> = {
+  primary: {
+    container: 'bg-primary-base border border-thin border-primary-base',
+    pressed: 'bg-primary-dark-hover border-primary-base',
+    disabled: 'bg-primary-lighter border-transparent',
+    label: 'text-white',
+    labelPressed: 'text-white',
+    labelDisabled: 'text-white',
+    circle: 'border-white',
+    dot: 'bg-white',
+    isLink: false,
+  },
+  secondary: {
+    container: 'bg-primary-lightest border border-thin border-primary-base',
+    pressed: 'bg-primary-light-hover border-primary-base',
+    disabled: 'bg-primary-lighter border-primary-base',
+    label: 'text-primary-base',
+    labelPressed: 'text-primary-base',
+    labelDisabled: 'text-primary-dark',
+    circle: 'border-primary-base',
+    dot: 'bg-success-base',
+    isLink: false,
+  },
+  success: {
+    container: 'bg-success-base border border-thin border-success-base',
+    pressed: 'bg-alert-success-border border-alert-success-border',
+    disabled: 'bg-badge-success-bg border-transparent',
+    label: 'text-white',
+    labelPressed: 'text-white',
+    labelDisabled: 'text-white',
+    circle: 'border-white',
+    dot: 'bg-white',
+    isLink: false,
+  },
+  danger: {
+    container: 'bg-danger-dark border border-thin border-danger-dark',
+    pressed: 'bg-danger-darker border-danger-darker',
+    disabled: 'bg-danger-medium border-transparent',
+    label: 'text-white',
+    labelPressed: 'text-white',
+    labelDisabled: 'text-white',
+    circle: 'border-white',
+    dot: 'bg-white',
+    isLink: false,
+  },
+  warning: {
+    container: 'bg-badge-warning-icon border border-thin border-badge-warning-icon',
+    pressed: 'bg-badge-warning-text border-badge-warning-text',
+    disabled: 'bg-badge-warning-bg border-transparent',
+    label: 'text-white',
+    labelPressed: 'text-white',
+    labelDisabled: 'text-white',
+    circle: 'border-white',
+    dot: 'bg-white',
+    isLink: false,
+  },
+  info: {
+    container: 'bg-primary-base border border-thin border-primary-base',
+    pressed: 'bg-primary-darker border-primary-darker',
+    disabled: 'bg-primary-lighter border-transparent',
+    label: 'text-white',
+    labelPressed: 'text-white',
+    labelDisabled: 'text-white',
+    circle: 'border-white',
+    dot: 'bg-white',
+    isLink: false,
+  },
+  'secondary-gray': {
+    container: 'bg-white border border-thin border-gray-base',
+    pressed: 'bg-gray-light-hover border-gray-medium',
+    disabled: 'bg-gray-lighter border-gray-medium',
+    focused: 'bg-white border border-thin border-gray-medium',
+    label: 'text-gray-darker',
+    labelPressed: 'text-gray-darker',
+    labelFocused: 'text-gray-darkest',
+    labelDisabled: 'text-gray-medium',
+    circle: 'border-gray-darker',
+    dot: 'bg-success-base',
+    isLink: false,
+  },
+  tertiary: {
+    container: 'bg-transparent border-0',
+    pressed: 'bg-primary-lightest-hover',
+    disabled: 'bg-transparent',
+    label: 'text-primary-base',
+    labelPressed: 'text-primary-base',
+    labelDisabled: 'text-gray-base',
+    circle: 'border-primary-base',
+    dot: 'bg-success-base',
+    isLink: false,
+  },
+  'tertiary-gray': {
+    container: 'bg-transparent border-0',
+    pressed: 'bg-gray-lightest-hover',
+    disabled: 'bg-transparent',
+    label: 'text-gray-dark',
+    labelPressed: 'text-gray-darker',
+    labelDisabled: 'text-gray-base',
+    circle: 'border-gray-dark',
+    dot: 'bg-success-base',
+    isLink: false,
+  },
+  'link-primary': {
+    container: 'bg-transparent border-0',
+    pressed: 'bg-transparent',
+    disabled: 'bg-transparent',
+    label: 'text-primary-base',
+    labelPressed: 'text-primary-darker',
+    labelDisabled: 'text-gray-base',
+    circle: 'border-primary-base',
+    dot: 'bg-success-base',
+    isLink: true,
+  },
+  'link-gray': {
+    container: 'bg-transparent border-0',
+    pressed: 'bg-transparent',
+    disabled: 'bg-transparent',
+    label: 'text-gray-dark',
+    labelPressed: 'text-gray-darkest',
+    labelDisabled: 'text-gray-base',
+    circle: 'border-gray-dark',
+    dot: 'bg-success-base',
+    isLink: true,
+  },
+  'primary-danger': {
+    container: 'bg-danger-dark border border-thin border-danger-darker',
+    pressed: 'bg-danger-darker border-danger-darker',
+    disabled: 'bg-danger-medium border-transparent',
+    label: 'text-white',
+    labelPressed: 'text-white',
+    labelDisabled: 'text-white',
+    circle: 'border-white',
+    dot: 'bg-white',
+    isLink: false,
+  },
+  'secondary-danger': {
+    container: 'bg-danger-lighter border border-thin border-danger-lighter',
+    pressed: 'bg-danger-light border-danger-light',
+    disabled: 'bg-danger-lightest border-danger-lightest',
+    label: 'text-danger-darker',
+    labelPressed: 'text-danger-darker',
+    labelDisabled: 'text-danger-base',
+    circle: 'border-danger-darker',
+    dot: 'bg-success-base',
+    isLink: false,
+  },
+  'secondary-danger-gray': {
+    container: 'bg-white border border-thin border-danger-base',
+    pressed: 'bg-danger-lightest-hover border-danger-base',
+    disabled: 'bg-white border-danger-medium',
+    label: 'text-danger-darker',
+    labelPressed: 'text-danger-darkest',
+    labelDisabled: 'text-danger-base',
+    circle: 'border-danger-darker',
+    dot: 'bg-success-base',
+    isLink: false,
+  },
+  'tertiary-danger': {
+    container: 'bg-transparent border-0',
+    pressed: 'bg-danger-light-hover',
+    disabled: 'bg-transparent',
+    label: 'text-danger-darker',
+    labelPressed: 'text-danger-darker',
+    labelFocused: 'text-danger-darkest',
+    labelDisabled: 'text-danger-base',
+    circle: 'border-danger-darker',
+    dot: 'bg-success-base',
+    isLink: false,
+  },
+  'tertiary-danger-gray': {
+    container: 'bg-transparent border-0',
+    pressed: 'bg-danger-light-hover',
+    disabled: 'bg-transparent',
+    label: 'text-danger-darker',
+    labelPressed: 'text-danger-darkest',
+    labelDisabled: 'text-danger-base',
+    circle: 'border-danger-darker',
+    dot: 'bg-success-base',
+    isLink: false,
+  },
+  'link-danger-primary': {
+    container: 'bg-transparent border-0',
+    pressed: 'bg-transparent',
+    disabled: 'bg-transparent',
+    label: 'text-danger-darker',
+    labelPressed: 'text-danger-darkest',
+    labelDisabled: 'text-danger-base',
+    circle: 'border-danger-darker',
+    dot: 'bg-success-base',
+    isLink: true,
+  },
+  'link-danger-gray': {
+    container: 'bg-transparent border-0',
+    pressed: 'bg-transparent',
+    disabled: 'bg-transparent',
+    label: 'text-danger-darker',
+    labelPressed: 'text-danger-darkest',
+    labelDisabled: 'text-danger-base',
+    circle: 'border-danger-darker',
+    dot: 'bg-success-base',
+    isLink: true,
+  },
+};
+
+const ICON_TINT: Record<
+  ButtonVariant,
+  { default: string; pressed: string; disabled: string; focused?: string }
+> = {
+  primary: { default: colors.white, pressed: colors.white, disabled: colors.white },
+  secondary: { default: colors.primary.base, pressed: colors.primary.base, disabled: colors.primary.dark },
+  success: { default: colors.white, pressed: colors.white, disabled: colors.white },
+  danger: { default: colors.white, pressed: colors.white, disabled: colors.white },
+  warning: { default: colors.white, pressed: colors.white, disabled: colors.white },
+  info: { default: colors.white, pressed: colors.white, disabled: colors.white },
+  'secondary-gray': { default: colors.gray.darker, pressed: colors.gray.darker, disabled: colors.gray.medium },
+  tertiary: { default: colors.primary.base, pressed: colors.primary.base, disabled: colors.gray.base },
+  'tertiary-gray': { default: colors.gray.dark, pressed: colors.gray.darker, disabled: colors.gray.base },
+  'link-primary': { default: colors.primary.base, pressed: colors.primary.darker, disabled: colors.gray.base },
+  'link-gray': { default: colors.gray.dark, pressed: colors.gray.darkest, disabled: colors.gray.base },
+  'primary-danger': { default: colors.white, pressed: colors.white, disabled: colors.white },
+  'secondary-danger': { default: colors.danger.darker, pressed: colors.danger.darker, disabled: colors.danger.base },
+  'secondary-danger-gray': {
+    default: colors.danger.darker,
+    pressed: colors.danger.darkest,
+    disabled: colors.danger.base,
+  },
+  'tertiary-danger': { default: colors.danger.darker, pressed: colors.danger.darker, focused: colors.danger.darkest, disabled: colors.danger.base },
+  'tertiary-danger-gray': {
+    default: colors.danger.darker,
+    pressed: colors.danger.darkest,
+    disabled: colors.danger.base,
+  },
+  'link-danger-primary': {
+    default: colors.danger.darker,
+    pressed: colors.danger.darkest,
+    disabled: colors.danger.base,
+  },
+  'link-danger-gray': { default: colors.danger.darker, pressed: colors.danger.darkest, disabled: colors.danger.base },
+};
+
+function Decoration({ kind, circleClass, dotClass }: { kind: IconType; circleClass: string; dotClass: string }) {
+  if (kind === IconType.Dot) {
+    return <View className={cx('h-md w-md rounded-full', dotClass)} />;
+  }
+
+  return <View className={cx('h-lg w-lg rounded-full border-thin', circleClass)} />;
+}
+
+function hitSlopFor(visualHeight: number) {
+  const extra = Math.max(0, (buttonTokens.minTouch - visualHeight) / 2);
+  if (extra === 0) {
+    return undefined;
+  }
+  return { top: extra, bottom: extra, left: extra, right: extra };
+}
+
+function containsNode(host: unknown, target: EventTarget | null) {
+  if (!host || !target || typeof host !== 'object') {
+    return false;
+  }
+  const node = host as { contains?: (other: EventTarget) => boolean };
+  return typeof node.contains === 'function' ? node.contains(target) : false;
+}
+
+/** Flush 2px ring that follows `border-radius` (CSS `outline` stays square on RN web). */
+function angularFocusRing(visible: boolean): ViewStyle {
+  return {
+    boxShadow: visible ? `0px 0px 0px ${borders.focusRing.width}px ${colors.focus}` : 'none',
+  } as ViewStyle;
+}
+
+const PRESSABLE_RESET = {
+  outlineWidth: 0,
+  outlineStyle: 'solid' as const,
+  outlineColor: 'transparent',
+  outlineOffset: 0,
+  borderRadius: radius.button,
+  overflow: 'visible' as const,
+} satisfies ViewStyle;
+
+export function Button({
+  label = 'Button',
+  variant = ButtonVariant.Primary,
+  size = ButtonSize.Medium,
+  disabled = false,
+  iconPosition = IconPosition.None,
+  iconType = IconType.Circle,
+  iconName,
+  iconDecorative = false,
+  accessibilityLabel,
+  onPress,
+  fullWidth = false,
+  style,
+  contentStyle,
+}: ButtonProps) {
+  const hostRef = useRef<View>(null);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const visual = visualSize(size);
+  const palette = VARIANT_CLASS[variant];
+  const hasSvg = Boolean(iconName);
+  const showSvgBefore = hasSvg && iconPosition === IconPosition.Before;
+  const showSvgAfter = hasSvg && iconPosition === IconPosition.After;
+  const isSvgOnly = hasSvg && !showSvgBefore && !showSvgAfter;
+  const isIconOnly = isSvgOnly || iconPosition === IconPosition.Only;
+  const isLink = palette.isLink || LINK_VARIANTS.has(variant);
+  const showLabel = !isIconOnly;
+  const showBefore = !hasSvg && iconPosition === IconPosition.Before;
+  const showAfter = !hasSvg && iconPosition === IconPosition.After;
+  const showOnlyDecoration = !hasSvg && iconPosition === IconPosition.Only;
+  const visualHeight = isLink ? buttonTokens.lineHeight[visual] : buttonTokens.height[visual];
+
+  useEffect(() => {
+    const dismiss = () => setFocused(false);
+    focusDismissers.add(dismiss);
+    return () => {
+      focusDismissers.delete(dismiss);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (Platform.OS !== 'web' || !focused) {
+      return;
+    }
+
+    const doc = globalThis.document as Document | undefined;
+    if (!doc) {
+      return;
+    }
+
+    const onPointerDown = (event: Event) => {
+      if (!containsNode(hostRef.current, event.target)) {
+        setFocused(false);
+      }
+    };
+
+    doc.addEventListener('mousedown', onPointerDown);
+    doc.addEventListener('touchstart', onPointerDown);
+    return () => {
+      doc.removeEventListener('mousedown', onPointerDown);
+      doc.removeEventListener('touchstart', onPointerDown);
+    };
+  }, [focused]);
+
+  return (
+    <View
+      className={fullWidth ? 'w-full self-stretch' : 'self-start'}
+      style={fullWidth ? { width: '100%', alignSelf: 'stretch' } : undefined}>
+      <Pressable
+        ref={hostRef}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel || (showLabel ? label : iconName || label)}
+        accessibilityState={{ disabled }}
+        disabled={disabled}
+        focusable={!disabled}
+        hitSlop={hitSlopFor(visualHeight)}
+        className="overflow-visible rounded-button"
+        onHoverIn={() => setHovered(true)}
+        onHoverOut={() => setHovered(false)}
+        onFocus={() => {
+          if (!isLink && !disabled) {
+            setFocused(true);
+          }
+        }}
+        onBlur={() => setFocused(false)}
+        onPress={(event) => {
+          if ('stopPropagation' in event && typeof event.stopPropagation === 'function') {
+            event.stopPropagation();
+          }
+          clearAllButtonFocus();
+          retainFocusUntil = Date.now() + 200;
+          if (!isLink && !disabled) {
+            setFocused(true);
+          }
+          onPress?.();
+        }}
+        style={[PRESSABLE_RESET, fullWidth && { width: '100%' }, style]}>
+        {({ pressed }) => {
+          const showRing = !disabled && !isLink && (pressed || focused);
+          const showHover = !disabled && !showRing && hovered;
+          const containerState = disabled
+            ? palette.disabled
+            : showHover
+              ? palette.pressed
+              : showRing
+                ? (palette.focused ?? palette.container)
+                : palette.container;
+          const labelState = disabled
+            ? palette.labelDisabled
+            : showHover
+              ? palette.labelPressed
+              : showRing
+                ? (palette.labelFocused ?? palette.label)
+                : palette.label;
+          const tints = ICON_TINT[variant];
+          const tint = disabled
+            ? tints.disabled
+            : showHover
+              ? tints.pressed
+              : showRing
+                ? (tints.focused ?? tints.default)
+                : tints.default;
+
+          return (
+            <View
+              className={cx(
+                'flex-row items-center justify-center gap-sm rounded-button',
+                isLink ? 'px-0 py-0' : isIconOnly ? ICON_ONLY_CLASS[visual] : SIZE_CLASS[visual],
+                containerState,
+                disabled && 'opacity-60',
+              )}
+              style={[angularFocusRing(showRing), fullWidth && { width: '100%' }, contentStyle]}>
+              {showSvgBefore && iconName ? (
+                <Icon name={iconName} size={buttonTokens.icon[visual]} color={tint} decorative={iconDecorative} />
+              ) : null}
+              {isSvgOnly && iconName ? (
+                <Icon name={iconName} size={buttonTokens.icon[visual]} color={tint} decorative={iconDecorative} />
+              ) : null}
+              {showBefore ? (
+                <Decoration kind={iconType} circleClass={palette.circle} dotClass={palette.dot} />
+              ) : null}
+              {showOnlyDecoration ? (
+                <Decoration kind={iconType} circleClass={palette.circle} dotClass={palette.dot} />
+              ) : null}
+              {showLabel ? (
+                <Text className={cx('font-sans font-semibold', LABEL_CLASS[visual], labelState)}>{label}</Text>
+              ) : null}
+              {showAfter ? (
+                <Decoration kind={iconType} circleClass={palette.circle} dotClass={palette.dot} />
+              ) : null}
+              {showSvgAfter && iconName ? (
+                <Icon name={iconName} size={buttonTokens.icon[visual]} color={tint} decorative={iconDecorative} />
+              ) : null}
+            </View>
+          );
+        }}
+      </Pressable>
+    </View>
+  );
+}

package/src/components/Button/index.ts

@@ -0,0 +1,9 @@
+export {
+  Button,
+  ButtonVariant,
+  ButtonSize,
+  IconPosition,
+  IconType,
+  dismissButtonFocus,
+} from './Button';
+export type { ButtonProps } from './Button';