claude-code/components/design-system/ThemedBox.tsx

import { c as _c } from "react/compiler-runtime";
import React, { type PropsWithChildren, type Ref } from 'react';
import Box from '../../ink/components/Box.js';
import type { DOMElement } from '../../ink/dom.js';
import type { ClickEvent } from '../../ink/events/click-event.js';
import type { FocusEvent } from '../../ink/events/focus-event.js';
import type { KeyboardEvent } from '../../ink/events/keyboard-event.js';
import type { Color, Styles } from '../../ink/styles.js';
import { getTheme, type Theme } from '../../utils/theme.js';
import { useTheme } from './ThemeProvider.js';

// Color props that accept theme keys
type ThemedColorProps = {
  readonly borderColor?: keyof Theme | Color;
  readonly borderTopColor?: keyof Theme | Color;
  readonly borderBottomColor?: keyof Theme | Color;
  readonly borderLeftColor?: keyof Theme | Color;
  readonly borderRightColor?: keyof Theme | Color;
  readonly backgroundColor?: keyof Theme | Color;
};

// Base Styles without color props (they'll be overridden)
type BaseStylesWithoutColors = Omit<Styles, 'textWrap' | 'borderColor' | 'borderTopColor' | 'borderBottomColor' | 'borderLeftColor' | 'borderRightColor' | 'backgroundColor'>;
export type Props = BaseStylesWithoutColors & ThemedColorProps & {
  ref?: Ref<DOMElement>;
  tabIndex?: number;
  autoFocus?: boolean;
  onClick?: (event: ClickEvent) => void;
  onFocus?: (event: FocusEvent) => void;
  onFocusCapture?: (event: FocusEvent) => void;
  onBlur?: (event: FocusEvent) => void;
  onBlurCapture?: (event: FocusEvent) => void;
  onKeyDown?: (event: KeyboardEvent) => void;
  onKeyDownCapture?: (event: KeyboardEvent) => void;
  onMouseEnter?: () => void;
  onMouseLeave?: () => void;
};

/**
 * Resolves a color value that may be a theme key to a raw Color.
 */
function resolveColor(color: keyof Theme | Color | undefined, theme: Theme): Color | undefined {
  if (!color) return undefined;
  // Check if it's a raw color (starts with rgb(, #, ansi256(, or ansi:)
  if (color.startsWith('rgb(') || color.startsWith('#') || color.startsWith('ansi256(') || color.startsWith('ansi:')) {
    return color as Color;
  }
  // It's a theme key - resolve it
  return theme[color as keyof Theme] as Color;
}

/**
 * Theme-aware Box component that resolves theme color keys to raw colors.
 * This wraps the base Box component with theme resolution for border colors.
 */
function ThemedBox(t0) {
  const $ = _c(33);
  let backgroundColor;
  let borderBottomColor;
  let borderColor;
  let borderLeftColor;
  let borderRightColor;
  let borderTopColor;
  let children;
  let ref;
  let rest;
  if ($[0] !== t0) {
    ({
      borderColor,
      borderTopColor,
      borderBottomColor,
      borderLeftColor,
      borderRightColor,
      backgroundColor,
      children,
      ref,
      ...rest
    } = t0);
    $[0] = t0;
    $[1] = backgroundColor;
    $[2] = borderBottomColor;
    $[3] = borderColor;
    $[4] = borderLeftColor;
    $[5] = borderRightColor;
    $[6] = borderTopColor;
    $[7] = children;
    $[8] = ref;
    $[9] = rest;
  } else {
    backgroundColor = $[1];
    borderBottomColor = $[2];
    borderColor = $[3];
    borderLeftColor = $[4];
    borderRightColor = $[5];
    borderTopColor = $[6];
    children = $[7];
    ref = $[8];
    rest = $[9];
  }
  const [themeName] = useTheme();
  let resolvedBorderBottomColor;
  let resolvedBorderColor;
  let resolvedBorderLeftColor;
  let resolvedBorderRightColor;
  let resolvedBorderTopColor;
  let t1;
  if ($[10] !== backgroundColor || $[11] !== borderBottomColor || $[12] !== borderColor || $[13] !== borderLeftColor || $[14] !== borderRightColor || $[15] !== borderTopColor || $[16] !== themeName) {
    const theme = getTheme(themeName);
    resolvedBorderColor = resolveColor(borderColor, theme);
    resolvedBorderTopColor = resolveColor(borderTopColor, theme);
    resolvedBorderBottomColor = resolveColor(borderBottomColor, theme);
    resolvedBorderLeftColor = resolveColor(borderLeftColor, theme);
    resolvedBorderRightColor = resolveColor(borderRightColor, theme);
    t1 = resolveColor(backgroundColor, theme);
    $[10] = backgroundColor;
    $[11] = borderBottomColor;
    $[12] = borderColor;
    $[13] = borderLeftColor;
    $[14] = borderRightColor;
    $[15] = borderTopColor;
    $[16] = themeName;
    $[17] = resolvedBorderBottomColor;
    $[18] = resolvedBorderColor;
    $[19] = resolvedBorderLeftColor;
    $[20] = resolvedBorderRightColor;
    $[21] = resolvedBorderTopColor;
    $[22] = t1;
  } else {
    resolvedBorderBottomColor = $[17];
    resolvedBorderColor = $[18];
    resolvedBorderLeftColor = $[19];
    resolvedBorderRightColor = $[20];
    resolvedBorderTopColor = $[21];
    t1 = $[22];
  }
  const resolvedBackgroundColor = t1;
  let t2;
  if ($[23] !== children || $[24] !== ref || $[25] !== resolvedBackgroundColor || $[26] !== resolvedBorderBottomColor || $[27] !== resolvedBorderColor || $[28] !== resolvedBorderLeftColor || $[29] !== resolvedBorderRightColor || $[30] !== resolvedBorderTopColor || $[31] !== rest) {
    t2 = <Box ref={ref} borderColor={resolvedBorderColor} borderTopColor={resolvedBorderTopColor} borderBottomColor={resolvedBorderBottomColor} borderLeftColor={resolvedBorderLeftColor} borderRightColor={resolvedBorderRightColor} backgroundColor={resolvedBackgroundColor} {...rest}>{children}</Box>;
    $[23] = children;
    $[24] = ref;
    $[25] = resolvedBackgroundColor;
    $[26] = resolvedBorderBottomColor;
    $[27] = resolvedBorderColor;
    $[28] = resolvedBorderLeftColor;
    $[29] = resolvedBorderRightColor;
    $[30] = resolvedBorderTopColor;
    $[31] = rest;
    $[32] = t2;
  } else {
    t2 = $[32];
  }
  return t2;
}
export default ThemedBox;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIlByb3BzV2l0aENoaWxkcmVuIiwiUmVmIiwiQm94IiwiRE9NRWxlbWVudCIsIkNsaWNrRXZlbnQiLCJGb2N1c0V2ZW50IiwiS2V5Ym9hcmRFdmVudCIsIkNvbG9yIiwiU3R5bGVzIiwiZ2V0VGhlbWUiLCJUaGVtZSIsInVzZVRoZW1lIiwiVGhlbWVkQ29sb3JQcm9wcyIsImJvcmRlckNvbG9yIiwiYm9yZGVyVG9wQ29sb3IiLCJib3JkZXJCb3R0b21Db2xvciIsImJvcmRlckxlZnRDb2xvciIsImJvcmRlclJpZ2h0Q29sb3IiLCJiYWNrZ3JvdW5kQ29sb3IiLCJCYXNlU3R5bGVzV2l0aG91dENvbG9ycyIsIk9taXQiLCJQcm9wcyIsInJlZiIsInRhYkluZGV4IiwiYXV0b0ZvY3VzIiwib25DbGljayIsImV2ZW50Iiwib25Gb2N1cyIsIm9uRm9jdXNDYXB0dXJlIiwib25CbHVyIiwib25CbHVyQ2FwdHVyZSIsIm9uS2V5RG93biIsIm9uS2V5RG93bkNhcHR1cmUiLCJvbk1vdXNlRW50ZXIiLCJvbk1vdXNlTGVhdmUiLCJyZXNvbHZlQ29sb3IiLCJjb2xvciIsInRoZW1lIiwidW5kZWZpbmVkIiwic3RhcnRzV2l0aCIsIlRoZW1lZEJveCIsInQwIiwiJCIsIl9jIiwiY2hpbGRyZW4iLCJyZXN0IiwidGhlbWVOYW1lIiwicmVzb2x2ZWRCb3JkZXJCb3R0b21Db2xvciIsInJlc29sdmVkQm9yZGVyQ29sb3IiLCJyZXNvbHZlZEJvcmRlckxlZnRDb2xvciIsInJlc29sdmVkQm9yZGVyUmlnaHRDb2xvciIsInJlc29sdmVkQm9yZGVyVG9wQ29sb3IiLCJ0MSIsInJlc29sdmVkQmFja2dyb3VuZENvbG9yIiwidDIiXSwic291cmNlcyI6WyJUaGVtZWRCb3gudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCwgeyB0eXBlIFByb3BzV2l0aENoaWxkcmVuLCB0eXBlIFJlZiB9IGZyb20gJ3JlYWN0J1xuaW1wb3J0IEJveCBmcm9tICcuLi8uLi9pbmsvY29tcG9uZW50cy9Cb3guanMnXG5pbXBvcnQgdHlwZSB7IERPTUVsZW1lbnQgfSBmcm9tICcuLi8uLi9pbmsvZG9tLmpzJ1xuaW1wb3J0IHR5cGUgeyBDbGlja0V2ZW50IH0gZnJvbSAnLi4vLi4vaW5rL2V2ZW50cy9jbGljay1ldmVudC5qcydcbmltcG9ydCB0eXBlIHsgRm9jdXNFdmVudCB9IGZyb20gJy4uLy4uL2luay9ldmVudHMvZm9jdXMtZXZlbnQuanMnXG5pbXBvcnQgdHlwZSB7IEtleWJvYXJkRXZlbnQgfSBmcm9tICcuLi8uLi9pbmsvZXZlbnRzL2tleWJvYXJkLWV2ZW50LmpzJ1xuaW1wb3J0IHR5cGUgeyBDb2xvciwgU3R5bGVzIH0gZnJvbSAnLi4vLi4vaW5rL3N0eWxlcy5qcydcbmltcG9ydCB7IGdldFRoZW1lLCB0eXBlIFRoZW1lIH0gZnJvbSAnLi4vLi4vdXRpbHMvdGhlbWUuanMnXG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gJy4vVGhlbWVQcm92aWRlci5qcydcblxuLy8gQ29sb3IgcHJvcHMgdGhhdCBhY2NlcHQgdGhlbWUga2V5c1xudHlwZSBUaGVtZWRDb2xvclByb3BzID0ge1xuICByZWFkb25seSBib3JkZXJDb2xvcj86IGtleW9mIFRoZW1lIHwgQ29sb3JcbiAgcmVhZG9ubHkgYm9yZGVyVG9wQ29sb3I/OiBrZXlvZiBUaGVtZSB8IENvbG9yXG4gIHJlYWRvbmx5IGJvcmRlckJvdHRvbUNvbG9yPzoga2V5b2YgVGhlbWUgfCBDb2xvclxuICByZWFkb25seSBib3JkZXJMZWZ0Q29sb3I/OiBrZXlvZiBUaGVtZSB8IENvbG9yXG4gIHJlYWRvbmx5IGJvcmRlclJpZ2h0Q29sb3I/OiBrZXlvZiBUaGVtZSB8IENvbG9yXG4gIHJlYWRvbmx5IGJhY2tncm91bmRDb2xvcj86IGtleW9mIFRoZW1lIHwgQ29sb3Jcbn1cblxuLy8gQmFzZSBTdHlsZXMgd2l0aG91dCBjb2xvciBwcm9wcyAodGhleSdsbCBiZSBvdmVycmlkZGVuKVxudHlwZSBCYXNlU3R5bGVzV2l0aG91dENvbG9ycyA9IE9taXQ8XG4gIFN0eWxlcyxcbiAgfCAndGV4dFdyYXAnXG4gIHwgJ2JvcmRlckNvbG9yJ1xuICB8ICdib3JkZXJUb3BDb2xvcidcbiAgfCAnYm9yZGVyQm90dG9tQ29sb3InXG4gIHwgJ2JvcmRlckxlZnRDb2xvcidcbiAgfCAnYm9yZGVyUmlnaHRDb2xvcidcbiAgfCAnYmFja2dyb3VuZENvbG9yJ1xuPlxuXG5leHBvcnQgdHlwZSBQcm9wcyA9IEJhc2VTdHlsZXNXaXRob3V0Q29sb3JzICZcbiAgVGhlbWVkQ29sb3JQcm9wcyAmIHtcbiAgICByZWY/OiBSZWY8RE9NRWxlbWVudD5cbiAgICB0YWJJbmRleD86IG51bWJlclxuICAgIGF1dG9Gb2N1cz86IGJvb2xlYW5cbiAgICBvbkNsaWNrPzogKGV2ZW50OiBDbGlja0V2ZW50KSA9PiB2b2lkXG4gICAgb25Gb2N1cz86IChldmVudDogRm9jdXNFdmVudCkgPT4gdm9pZFxuICAgIG9uRm9jdXNDYXB0dXJlPzogKGV2ZW50OiBGb2N1c0V2ZW50KSA9PiB2b2lkXG4gICAgb25CbHVyPzogKGV2ZW50OiBGb2N1c0V2ZW50KSA9PiB2b2lkXG4gICAgb25CbHVyQ2FwdHVyZT86IChldmVudDogRm9jdXNFdmVudCkgPT4gdm9pZFxuICAgIG9uS2V5RG93bj86IChldmVudDogS2V5Ym9hcmRFdmVudCkgPT4gdm9pZFxuICAgIG9uS2V5RG93bkNhcHR1cmU/OiAoZXZlbnQ6IEtleWJvYXJkRXZlbnQpID0+IHZvaWRcbiAgICBvbk1vdXNlRW50ZXI/OiAoKSA9PiB2b2lkXG4gICAgb25Nb3VzZUxlYXZlPzogKCkgPT4gdm9pZFxuICB9XG5cbi8qKlxuICogUmVzb2x2ZXMgYSBjb2xvciB2YWx1ZSB0aGF0IG1heSBiZSBhIHRoZW1lIGtleSB0byBhIHJhdyBDb2xvci5cbiAqL1xuZnVuY3Rpb24gcmVzb2x2ZUNvbG9yKFxuICBjb2xvcjoga2V5b2YgVGhlbWUgfCBDb2xvciB8IHVuZGVmaW5lZCxcbiAgdGhlbWU6IFRoZW1lLFxuKTogQ29sb3IgfCB1bmRlZmluZWQge1xuICBpZiAoIWNvbG9yKSByZXR1cm4gdW5kZWZpbmVkXG4gIC8vIENoZWNrIGlmIGl0J3MgYSByYXcgY29sb3IgKHN0YXJ0cyB3aXRoIHJnYigsICMsIGFuc2kyNTYoLCBvciBhbnNpOilcbiAgaWYgKFxuICAgIGNvbG9yLnN0YXJ0c1dpdGgoJ3JnYignKSB8fFxuICAgIGNvbG9yLnN0YXJ0c1dpdGgoJyMnKSB8fFxuICAgIGNvbG9yLnN0YXJ0c1dpdGgoJ2Fuc2kyNTYoJykgfHxcbiAgICBjb2xvci5zdGFydHNXaXRoKCdhbnNpOicpXG4gICkge1xuICAgIHJldHVybiBjb2xvciBhcyBDb2xvclxuICB9XG4gIC8vIEl0J3MgYSB0aGVtZSBrZXk