@onlynative/components 0.1.0-alpha.0

package/dist/appbar/index.js

@@ -0,0 +1,952 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/appbar/index.ts
+var appbar_exports = {};
+__export(appbar_exports, {
+  AppBar: () => AppBar
+});
+module.exports = __toCommonJS(appbar_exports);
+
+// src/appbar/AppBar.tsx
+var import_react3 = require("react");
+var import_react_native6 = require("react-native");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_core4 = require("@onlynative/core");
+
+// src/icon-button/IconButton.tsx
+var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react = require("react");
+var import_react_native2 = require("react-native");
+var import_core = require("@onlynative/core");
+
+// src/icon-button/styles.ts
+var import_react_native = require("react-native");
+
+// src/utils/color.ts
+function parseHexColor(color) {
+  const normalized = color.replace("#", "");
+  if (normalized.length !== 6 && normalized.length !== 8) {
+    return null;
+  }
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) {
+    return null;
+  }
+  return { r, g, b };
+}
+function clampAlpha(alpha) {
+  return Math.max(0, Math.min(1, alpha));
+}
+function alphaColor(color, alpha) {
+  const channels = parseHexColor(color);
+  const boundedAlpha = clampAlpha(alpha);
+  if (!channels) {
+    return color;
+  }
+  return `rgba(${channels.r}, ${channels.g}, ${channels.b}, ${boundedAlpha})`;
+}
+function blendColor(base, overlay, overlayAlpha) {
+  const baseChannels = parseHexColor(base);
+  const overlayChannels = parseHexColor(overlay);
+  const boundedAlpha = clampAlpha(overlayAlpha);
+  if (!baseChannels || !overlayChannels) {
+    return alphaColor(overlay, boundedAlpha);
+  }
+  const r = Math.round(
+    (1 - boundedAlpha) * baseChannels.r + boundedAlpha * overlayChannels.r
+  );
+  const g = Math.round(
+    (1 - boundedAlpha) * baseChannels.g + boundedAlpha * overlayChannels.g
+  );
+  const b = Math.round(
+    (1 - boundedAlpha) * baseChannels.b + boundedAlpha * overlayChannels.b
+  );
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+// src/icon-button/styles.ts
+function createStyles(theme) {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest;
+  return import_react_native.StyleSheet.create({
+    container: {
+      borderRadius: theme.shape.cornerFull,
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer"
+    },
+    sizeSmall: {
+      width: 32,
+      height: 32
+    },
+    sizeMedium: {
+      width: 40,
+      height: 40
+    },
+    sizeLarge: {
+      width: 48,
+      height: 48
+    },
+    colorFilled: {
+      backgroundColor: theme.colors.primary,
+      borderColor: theme.colors.primary,
+      borderWidth: 0
+    },
+    colorFilledToggleUnselected: {
+      backgroundColor: toggleUnselectedContainerColor,
+      borderColor: toggleUnselectedContainerColor,
+      borderWidth: 0
+    },
+    colorFilledToggleSelected: {
+      backgroundColor: theme.colors.primary,
+      borderColor: theme.colors.primary,
+      borderWidth: 0
+    },
+    colorTonal: {
+      backgroundColor: theme.colors.secondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0
+    },
+    colorTonalToggleUnselected: {
+      backgroundColor: toggleUnselectedContainerColor,
+      borderColor: toggleUnselectedContainerColor,
+      borderWidth: 0
+    },
+    colorTonalToggleSelected: {
+      backgroundColor: theme.colors.secondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0
+    },
+    colorOutlined: {
+      borderColor: theme.colors.outline,
+      borderWidth: 1
+    },
+    colorOutlinedToggleSelected: {
+      backgroundColor: theme.colors.inverseSurface,
+      borderColor: theme.colors.inverseSurface,
+      borderWidth: 0
+    },
+    colorStandard: {
+      borderWidth: 0
+    },
+    colorStandardToggleSelected: {
+      borderWidth: 0
+    },
+    // Hover states (M3: 8% state layer)
+    hoveredFilled: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredFilledToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredFilledToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredTonal: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredTonalToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredTonalToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredOutlined: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredOutlinedToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredOutlinedToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.inverseSurface,
+        theme.colors.inverseOnSurface,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredStandard: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredStandardToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    hoveredStandardToggleSelected: {
+      backgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      )
+    },
+    // Pressed states (M3: 12% state layer)
+    pressedFilled: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedFilledToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedFilledToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedTonal: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedTonalToggleUnselected: {
+      backgroundColor: blendColor(
+        toggleUnselectedContainerColor,
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedTonalToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedOutlined: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedOutlinedToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedOutlinedToggleSelected: {
+      backgroundColor: blendColor(
+        theme.colors.inverseSurface,
+        theme.colors.inverseOnSurface,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedStandard: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedStandardToggleUnselected: {
+      backgroundColor: alphaColor(
+        theme.colors.onSurfaceVariant,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    pressedStandardToggleSelected: {
+      backgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      )
+    },
+    // Disabled states
+    disabledFilled: {
+      backgroundColor: disabledContainerColor,
+      borderColor: disabledContainerColor,
+      cursor: "auto"
+    },
+    disabledTonal: {
+      backgroundColor: disabledContainerColor,
+      borderColor: disabledContainerColor,
+      cursor: "auto"
+    },
+    disabledOutlined: {
+      backgroundColor: "transparent",
+      borderColor: disabledOutlineColor,
+      cursor: "auto"
+    },
+    disabledStandard: {
+      backgroundColor: "transparent",
+      borderColor: "transparent",
+      cursor: "auto"
+    }
+  });
+}
+
+// src/icon-button/IconButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function getIconColor(variant, theme, disabled, isToggle, selected) {
+  if (disabled) {
+    return alphaColor(theme.colors.onSurface, 0.38);
+  }
+  if (isToggle) {
+    if (variant === "filled") {
+      return selected ? theme.colors.onPrimary : theme.colors.primary;
+    }
+    if (variant === "tonal") {
+      return selected ? theme.colors.onSecondaryContainer : theme.colors.onSurfaceVariant;
+    }
+    if (variant === "outlined") {
+      return selected ? theme.colors.inverseOnSurface : theme.colors.onSurfaceVariant;
+    }
+    return selected ? theme.colors.primary : theme.colors.onSurfaceVariant;
+  }
+  if (variant === "filled") {
+    return theme.colors.onPrimary;
+  }
+  if (variant === "tonal") {
+    return theme.colors.onSecondaryContainer;
+  }
+  return theme.colors.onSurfaceVariant;
+}
+function getColorStyle(styles, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles.colorTonalToggleSelected : styles.colorTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles.colorOutlinedToggleSelected : styles.colorOutlined;
+    }
+    if (variant === "standard") {
+      return selected ? styles.colorStandardToggleSelected : styles.colorStandard;
+    }
+    return selected ? styles.colorFilledToggleSelected : styles.colorFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles.colorTonal;
+  }
+  if (variant === "outlined") {
+    return styles.colorOutlined;
+  }
+  if (variant === "standard") {
+    return styles.colorStandard;
+  }
+  return styles.colorFilled;
+}
+function getSizeStyle(styles, size) {
+  if (size === "small") {
+    return styles.sizeSmall;
+  }
+  if (size === "large") {
+    return styles.sizeLarge;
+  }
+  return styles.sizeMedium;
+}
+function getIconPixelSize(size) {
+  if (size === "small") {
+    return 18;
+  }
+  if (size === "large") {
+    return 28;
+  }
+  return 24;
+}
+function getDefaultHitSlop(size) {
+  if (size === "small") {
+    return 8;
+  }
+  if (size === "large") {
+    return 0;
+  }
+  return 4;
+}
+function getHoveredStyle(styles, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles.hoveredTonalToggleSelected : styles.hoveredTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles.hoveredOutlinedToggleSelected : styles.hoveredOutlinedToggleUnselected;
+    }
+    if (variant === "standard") {
+      return selected ? styles.hoveredStandardToggleSelected : styles.hoveredStandardToggleUnselected;
+    }
+    return selected ? styles.hoveredFilledToggleSelected : styles.hoveredFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles.hoveredTonal;
+  }
+  if (variant === "outlined") {
+    return styles.hoveredOutlined;
+  }
+  if (variant === "standard") {
+    return styles.hoveredStandard;
+  }
+  return styles.hoveredFilled;
+}
+function getPressedStyle(styles, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles.pressedTonalToggleSelected : styles.pressedTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles.pressedOutlinedToggleSelected : styles.pressedOutlinedToggleUnselected;
+    }
+    if (variant === "standard") {
+      return selected ? styles.pressedStandardToggleSelected : styles.pressedStandardToggleUnselected;
+    }
+    return selected ? styles.pressedFilledToggleSelected : styles.pressedFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles.pressedTonal;
+  }
+  if (variant === "outlined") {
+    return styles.pressedOutlined;
+  }
+  if (variant === "standard") {
+    return styles.pressedStandard;
+  }
+  return styles.pressedFilled;
+}
+function getDisabledStyle(styles, variant) {
+  if (variant === "tonal") {
+    return styles.disabledTonal;
+  }
+  if (variant === "outlined") {
+    return styles.disabledOutlined;
+  }
+  if (variant === "standard") {
+    return styles.disabledStandard;
+  }
+  return styles.disabledFilled;
+}
+function IconButton({
+  icon,
+  selectedIcon,
+  iconColor,
+  contentColor,
+  containerColor,
+  style,
+  onPress,
+  disabled = false,
+  variant = "filled",
+  selected,
+  size = "medium",
+  hitSlop,
+  accessibilityLabel,
+  ...props
+}) {
+  var _a;
+  const theme = (0, import_core.useTheme)();
+  const styles = (0, import_react.useMemo)(() => createStyles(theme), [theme]);
+  const isDisabled = Boolean(disabled);
+  const isToggle = selected !== void 0;
+  const isSelected = Boolean(selected);
+  const resolvedIconColor = (_a = contentColor != null ? contentColor : iconColor) != null ? _a : getIconColor(variant, theme, isDisabled, isToggle, isSelected);
+  const displayIcon = isToggle && isSelected && selectedIcon ? selectedIcon : icon;
+  const iconPixelSize = getIconPixelSize(size);
+  const accessibilityState = isToggle ? { disabled: isDisabled, selected: isSelected } : { disabled: isDisabled };
+  const containerOverrides = (0, import_react.useMemo)(() => {
+    if (!containerColor) return null;
+    const overlay = resolvedIconColor;
+    return {
+      base: {
+        backgroundColor: containerColor,
+        borderColor: containerColor,
+        borderWidth: 0
+      },
+      hovered: {
+        backgroundColor: blendColor(
+          containerColor,
+          overlay,
+          theme.stateLayer.hoveredOpacity
+        )
+      },
+      pressed: {
+        backgroundColor: blendColor(
+          containerColor,
+          overlay,
+          theme.stateLayer.pressedOpacity
+        )
+      }
+    };
+  }, [containerColor, resolvedIconColor, theme.stateLayer]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_native2.Pressable,
+    {
+      ...props,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState,
+      disabled: isDisabled,
+      hitSlop: hitSlop != null ? hitSlop : getDefaultHitSlop(size),
+      onPress,
+      style: ({
+        pressed,
+        hovered
+      }) => {
+        const base = [
+          styles.container,
+          getSizeStyle(styles, size),
+          getColorStyle(styles, variant, isToggle, isSelected),
+          containerOverrides == null ? void 0 : containerOverrides.base,
+          hovered && !pressed && !isDisabled ? containerOverrides ? containerOverrides.hovered : getHoveredStyle(styles, variant, isToggle, isSelected) : void 0,
+          pressed && !isDisabled ? containerOverrides ? containerOverrides.pressed : getPressedStyle(styles, variant, isToggle, isSelected) : void 0,
+          isDisabled ? getDisabledStyle(styles, variant) : void 0
+        ];
+        if (typeof style === "function") {
+          base.push(style({ pressed }));
+        } else if (style) {
+          base.push(style);
+        }
+        return base;
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_MaterialCommunityIcons.default,
+        {
+          name: displayIcon,
+          size: iconPixelSize,
+          color: resolvedIconColor
+        }
+      )
+    }
+  );
+}
+
+// src/typography/Typography.tsx
+var import_react2 = require("react");
+var import_react_native3 = require("react-native");
+var import_core2 = require("@onlynative/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var HEADING_VARIANTS = /* @__PURE__ */ new Set([
+  "displayLarge",
+  "displayMedium",
+  "displaySmall",
+  "headlineLarge",
+  "headlineMedium",
+  "headlineSmall"
+]);
+function Typography({
+  children,
+  variant = "bodyMedium",
+  color,
+  style,
+  as: Component = import_react_native3.Text,
+  accessibilityRole,
+  ...textProps
+}) {
+  const theme = (0, import_core2.useTheme)();
+  const typographyStyle = theme.typography[variant];
+  const colorStyle = (0, import_react2.useMemo)(
+    () => ({ color: color != null ? color : theme.colors.onSurface }),
+    [color, theme.colors.onSurface]
+  );
+  const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      ...textProps,
+      accessibilityRole: resolvedRole,
+      style: [typographyStyle, colorStyle, style],
+      children
+    }
+  );
+}
+
+// src/utils/rtl.ts
+var import_react_native4 = require("react-native");
+function selectRTL(ltr, rtl) {
+  return import_react_native4.I18nManager.isRTL ? rtl : ltr;
+}
+
+// src/appbar/styles.ts
+var import_react_native5 = require("react-native");
+var import_core3 = require("@onlynative/core");
+function createStyles2(theme) {
+  var _a;
+  const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core3.defaultTopAppBarTokens;
+  return import_react_native5.StyleSheet.create({
+    root: {
+      backgroundColor: theme.colors.surface
+    },
+    safeArea: {
+      backgroundColor: theme.colors.surface
+    },
+    elevatedRoot: {
+      backgroundColor: theme.colors.surfaceContainer
+    },
+    elevatedSafeArea: {
+      backgroundColor: theme.colors.surfaceContainer
+    },
+    smallContainer: {
+      height: topAppBar.smallContainerHeight,
+      position: "relative"
+    },
+    mediumContainer: {
+      height: topAppBar.mediumContainerHeight
+    },
+    largeContainer: {
+      height: topAppBar.largeContainerHeight
+    },
+    expandedContainer: {
+      position: "relative"
+    },
+    topRow: {
+      height: topAppBar.topRowHeight,
+      paddingHorizontal: topAppBar.horizontalPadding,
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    expandedTitleContainer: {
+      flex: 1,
+      justifyContent: "flex-end",
+      minWidth: 0,
+      paddingEnd: theme.spacing.md,
+      pointerEvents: "none"
+    },
+    topRowSpacer: {
+      flex: 1
+    },
+    sideSlot: {
+      flexDirection: "row",
+      alignItems: "center",
+      minHeight: topAppBar.sideSlotMinHeight
+    },
+    actionsRow: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    iconFrame: {
+      width: topAppBar.iconFrameSize,
+      height: topAppBar.iconFrameSize,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    overlayTitleContainer: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      justifyContent: "center",
+      minWidth: 0,
+      pointerEvents: "none"
+    },
+    centeredTitle: {
+      textAlign: "center"
+    },
+    startAlignedTitle: {
+      textAlign: "auto"
+    },
+    mediumTitlePadding: {
+      paddingBottom: topAppBar.mediumTitleBottomPadding
+    },
+    largeTitlePadding: {
+      paddingBottom: topAppBar.largeTitleBottomPadding
+    },
+    title: {
+      flexShrink: 1,
+      maxWidth: "100%",
+      includeFontPadding: false,
+      textAlignVertical: "center"
+    }
+  });
+}
+
+// src/appbar/AppBar.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function getBackIcon() {
+  if (import_react_native6.Platform.OS === "ios") {
+    return selectRTL("chevron-left", "chevron-right");
+  }
+  return selectRTL("arrow-left", "arrow-right");
+}
+var titleVariantBySize = {
+  small: "titleLarge",
+  medium: "headlineSmall",
+  large: "headlineMedium"
+};
+var APP_BAR_TITLE_TEXT_PROPS = {
+  numberOfLines: 1,
+  ellipsizeMode: "tail",
+  accessibilityRole: "header"
+};
+function resolveSize(variant) {
+  if (variant === "medium" || variant === "large") {
+    return variant;
+  }
+  return "small";
+}
+function getSizeStyle2(styles, size) {
+  if (size === "large") {
+    return styles.largeContainer;
+  }
+  return styles.mediumContainer;
+}
+function withTopInset(enabled, content, style) {
+  if (enabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_safe_area_context.SafeAreaView, { edges: ["top"], style, children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style, children: content });
+}
+function measureWidth(event) {
+  return Math.round(event.nativeEvent.layout.width);
+}
+function AppBar({
+  title,
+  variant = "small",
+  canGoBack = false,
+  onBackPress,
+  insetTop = false,
+  elevated = false,
+  leading,
+  trailing,
+  actions,
+  containerColor,
+  contentColor,
+  titleStyle,
+  style
+}) {
+  var _a;
+  const theme = (0, import_core4.useTheme)();
+  const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core4.defaultTopAppBarTokens;
+  const styles = (0, import_react3.useMemo)(() => createStyles2(theme), [theme]);
+  const [leadingWidth, setLeadingWidth] = (0, import_react3.useState)(0);
+  const [actionsWidth, setActionsWidth] = (0, import_react3.useState)(0);
+  const titleColorStyle = (0, import_react3.useMemo)(
+    () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
+    [contentColor, theme.colors.onSurface]
+  );
+  const size = resolveSize(variant);
+  const titleVariant = titleVariantBySize[size];
+  const isCenterAligned = variant === "center-aligned";
+  const isExpanded = size !== "small";
+  const titleStartInset = topAppBar.horizontalPadding + Math.max(topAppBar.titleStartInset, leadingWidth);
+  const compactTitleEndInset = topAppBar.horizontalPadding + actionsWidth;
+  const centeredSideInset = topAppBar.horizontalPadding + Math.max(leadingWidth, actionsWidth);
+  const expandedTitleInsetStyle = (0, import_react3.useMemo)(
+    () => ({ paddingStart: titleStartInset }),
+    [titleStartInset]
+  );
+  const overlayTitleInsetStyle = (0, import_react3.useMemo)(
+    () => isCenterAligned ? { start: centeredSideInset, end: centeredSideInset } : { start: titleStartInset, end: compactTitleEndInset },
+    [centeredSideInset, compactTitleEndInset, isCenterAligned, titleStartInset]
+  );
+  const leadingContent = (0, import_react3.useMemo)(() => {
+    if (leading) {
+      return leading;
+    }
+    if (!canGoBack) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      IconButton,
+      {
+        icon: getBackIcon(),
+        size: "medium",
+        variant: "standard",
+        iconColor: contentColor != null ? contentColor : theme.colors.onSurface,
+        accessibilityLabel: "Go back",
+        onPress: onBackPress
+      }
+    ) });
+  }, [
+    canGoBack,
+    contentColor,
+    leading,
+    onBackPress,
+    styles.iconFrame,
+    theme.colors.onSurface
+  ]);
+  const actionsContent = (0, import_react3.useMemo)(() => {
+    if (trailing) {
+      return trailing;
+    }
+    if (!actions || actions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native6.View,
+      {
+        style: styles.iconFrame,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          IconButton,
+          {
+            icon: action.icon,
+            size: "medium",
+            variant: "standard",
+            iconColor: contentColor,
+            accessibilityLabel: action.accessibilityLabel,
+            onPress: action.onPress,
+            disabled: action.disabled
+          }
+        )
+      },
+      `${String(action.icon)}-${index}`
+    )) });
+  }, [actions, contentColor, styles.actionsRow, styles.iconFrame, trailing]);
+  const onLeadingLayout = (0, import_react3.useCallback)((event) => {
+    const nextWidth = measureWidth(event);
+    setLeadingWidth((currentWidth) => {
+      if (currentWidth === nextWidth) {
+        return currentWidth;
+      }
+      return nextWidth;
+    });
+  }, []);
+  const onActionsLayout = (0, import_react3.useCallback)((event) => {
+    const nextWidth = measureWidth(event);
+    setActionsWidth((currentWidth) => {
+      if (currentWidth === nextWidth) {
+        return currentWidth;
+      }
+      return nextWidth;
+    });
+  }, []);
+  const topRow = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: styles.topRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native6.View,
+      {
+        collapsable: false,
+        onLayout: onLeadingLayout,
+        style: styles.sideSlot,
+        children: leadingContent
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: styles.topRowSpacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_react_native6.View,
+      {
+        collapsable: false,
+        onLayout: onActionsLayout,
+        style: styles.sideSlot,
+        children: actionsContent
+      }
+    )
+  ] });
+  const containerOverride = containerColor ? { backgroundColor: containerColor } : void 0;
+  const rootStyle = [
+    styles.root,
+    elevated ? styles.elevatedRoot : void 0,
+    containerOverride,
+    style
+  ];
+  const safeAreaStyle = [
+    styles.safeArea,
+    elevated ? styles.elevatedSafeArea : void 0,
+    containerOverride
+  ];
+  if (isExpanded) {
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: [styles.expandedContainer, getSizeStyle2(styles, size)], children: [
+      topRow,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_react_native6.View,
+        {
+          style: [
+            styles.expandedTitleContainer,
+            size === "large" ? styles.largeTitlePadding : styles.mediumTitlePadding,
+            expandedTitleInsetStyle
+          ],
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Typography,
+            {
+              ...APP_BAR_TITLE_TEXT_PROPS,
+              variant: titleVariant,
+              style: [
+                styles.title,
+                titleColorStyle,
+                styles.startAlignedTitle,
+                titleStyle
+              ],
+              children: title
+            }
+          )
+        }
+      )
+    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
+  }
+  const content = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native6.View, { style: styles.smallContainer, children: [
+    topRow,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: [styles.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Typography,
+      {
+        ...APP_BAR_TITLE_TEXT_PROPS,
+        variant: titleVariant,
+        style: [
+          styles.title,
+          titleColorStyle,
+          isCenterAligned ? styles.centeredTitle : styles.startAlignedTitle,
+          titleStyle
+        ],
+        children: title
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native6.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppBar
+});