@onlynative/components 0.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,3374 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AppBar: () => AppBar,
+  Box: () => Box,
+  Button: () => Button,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  Chip: () => Chip,
+  Column: () => Column,
+  Grid: () => Grid,
+  IconButton: () => IconButton,
+  Layout: () => Layout,
+  List: () => List,
+  ListDivider: () => ListDivider,
+  ListItem: () => ListItem,
+  Radio: () => Radio,
+  Row: () => Row,
+  Switch: () => Switch,
+  TextField: () => TextField,
+  Typography: () => Typography
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/typography/Typography.tsx
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_core = require("@onlynative/core");
+var import_jsx_runtime = 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_native.Text,
+  accessibilityRole,
+  ...textProps
+}) {
+  const theme = (0, import_core.useTheme)();
+  const typographyStyle = theme.typography[variant];
+  const colorStyle = (0, import_react.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_runtime.jsx)(
+    Component,
+    {
+      ...textProps,
+      accessibilityRole: resolvedRole,
+      style: [typographyStyle, colorStyle, style],
+      children
+    }
+  );
+}
+
+// src/layout/Layout.tsx
+var import_react2 = require("react");
+var import_react_native2 = require("react-native");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+var import_core2 = require("@onlynative/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var defaultEdges = ["bottom"];
+function resolveEdges(immersive, edges) {
+  if (edges) {
+    return edges;
+  }
+  if (immersive) {
+    return [];
+  }
+  return defaultEdges;
+}
+var styles = import_react_native2.StyleSheet.create({
+  root: {
+    flex: 1
+  }
+});
+function removeBackgroundColor(style) {
+  if (!style) {
+    return void 0;
+  }
+  const flattenedStyle = import_react_native2.StyleSheet.flatten(style);
+  if (!flattenedStyle || flattenedStyle.backgroundColor === void 0) {
+    return style;
+  }
+  const styleWithoutBackground = { ...flattenedStyle };
+  delete styleWithoutBackground.backgroundColor;
+  return styleWithoutBackground;
+}
+function Layout({ immersive, edges, children, style }) {
+  const theme = (0, import_core2.useTheme)();
+  const themeBackgroundStyle = (0, import_react2.useMemo)(
+    () => ({ backgroundColor: theme.colors.background }),
+    [theme.colors.background]
+  );
+  const styleWithoutBackground = (0, import_react2.useMemo)(
+    () => removeBackgroundColor(style),
+    [style]
+  );
+  const safeAreaEdges = (0, import_react2.useMemo)(
+    () => resolveEdges(immersive, edges),
+    [immersive, edges]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_native_safe_area_context.SafeAreaView,
+    {
+      style: [styles.root, themeBackgroundStyle, styleWithoutBackground],
+      edges: safeAreaEdges,
+      children
+    }
+  );
+}
+
+// src/layout/Box.tsx
+var import_react3 = require("react");
+var import_react_native3 = require("react-native");
+var import_core3 = require("@onlynative/core");
+
+// src/layout/resolveSpacing.ts
+function resolveSpacing(spacing, value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return value;
+  return spacing[value];
+}
+
+// src/layout/Box.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Box({
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  ps,
+  pe,
+  m,
+  mx,
+  my,
+  mt,
+  mb,
+  ms,
+  me,
+  gap,
+  rowGap,
+  columnGap,
+  flex,
+  align,
+  justify,
+  bg,
+  style,
+  ...viewProps
+}) {
+  const { spacing } = (0, import_core3.useTheme)();
+  const layoutStyle = (0, import_react3.useMemo)(() => {
+    const s = (v) => resolveSpacing(spacing, v);
+    return {
+      ...p !== void 0 && { padding: s(p) },
+      ...px !== void 0 && {
+        paddingStart: s(px),
+        paddingEnd: s(px)
+      },
+      ...py !== void 0 && {
+        paddingTop: s(py),
+        paddingBottom: s(py)
+      },
+      ...pt !== void 0 && { paddingTop: s(pt) },
+      ...pb !== void 0 && { paddingBottom: s(pb) },
+      ...ps !== void 0 && { paddingStart: s(ps) },
+      ...pe !== void 0 && { paddingEnd: s(pe) },
+      ...m !== void 0 && { margin: s(m) },
+      ...mx !== void 0 && {
+        marginStart: s(mx),
+        marginEnd: s(mx)
+      },
+      ...my !== void 0 && {
+        marginTop: s(my),
+        marginBottom: s(my)
+      },
+      ...mt !== void 0 && { marginTop: s(mt) },
+      ...mb !== void 0 && { marginBottom: s(mb) },
+      ...ms !== void 0 && { marginStart: s(ms) },
+      ...me !== void 0 && { marginEnd: s(me) },
+      ...gap !== void 0 && { gap: s(gap) },
+      ...rowGap !== void 0 && { rowGap: s(rowGap) },
+      ...columnGap !== void 0 && { columnGap: s(columnGap) },
+      ...flex !== void 0 && { flex },
+      ...align !== void 0 && { alignItems: align },
+      ...justify !== void 0 && { justifyContent: justify },
+      ...bg !== void 0 && { backgroundColor: bg }
+    };
+  }, [
+    spacing,
+    p,
+    px,
+    py,
+    pt,
+    pb,
+    ps,
+    pe,
+    m,
+    mx,
+    my,
+    mt,
+    mb,
+    ms,
+    me,
+    gap,
+    rowGap,
+    columnGap,
+    flex,
+    align,
+    justify,
+    bg
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { ...viewProps, style: [layoutStyle, style] });
+}
+
+// src/layout/Column.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Column({ inverted = false, style, ...boxProps }) {
+  const directionStyle = (0, import_react4.useMemo)(
+    () => ({
+      flexDirection: inverted ? "column-reverse" : "column"
+    }),
+    [inverted]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { ...boxProps, style: [directionStyle, style] });
+}
+
+// src/layout/Grid.tsx
+var import_react6 = __toESM(require("react"));
+var import_react_native4 = require("react-native");
+var import_core4 = require("@onlynative/core");
+
+// src/layout/Row.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Row({
+  wrap = false,
+  inverted = false,
+  style,
+  ...boxProps
+}) {
+  const directionStyle = (0, import_react5.useMemo)(
+    () => ({
+      flexDirection: inverted ? "row-reverse" : "row",
+      ...wrap && { flexWrap: "wrap" }
+    }),
+    [wrap, inverted]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { ...boxProps, style: [directionStyle, style] });
+}
+
+// src/layout/Grid.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Grid({
+  columns,
+  gap,
+  columnGap,
+  rowGap,
+  children,
+  style,
+  ...rowProps
+}) {
+  const { spacing } = (0, import_core4.useTheme)();
+  const resolvedColumnGap = resolveSpacing(spacing, columnGap != null ? columnGap : gap);
+  const resolvedRowGap = resolveSpacing(spacing, rowGap != null ? rowGap : gap);
+  const halfGap = resolvedColumnGap ? resolvedColumnGap / 2 : 0;
+  const cellStyle = (0, import_react6.useMemo)(
+    () => ({
+      flexBasis: `${100 / columns}%`,
+      flexShrink: 1,
+      paddingLeft: halfGap,
+      paddingRight: halfGap
+    }),
+    [columns, halfGap]
+  );
+  const rowStyle = (0, import_react6.useMemo)(
+    () => ({
+      marginLeft: -halfGap,
+      marginRight: -halfGap
+    }),
+    [halfGap]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { wrap: true, rowGap: resolvedRowGap, ...rowProps, style: [rowStyle, style], children: import_react6.default.Children.map(
+    children,
+    (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { style: cellStyle, children: child }) : null
+  ) });
+}
+
+// src/button/Button.tsx
+var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react7 = require("react");
+var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
+var import_core5 = require("@onlynative/core");
+
+// src/button/styles.ts
+var import_react_native6 = 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/utils/elevation.ts
+var import_react_native5 = require("react-native");
+function elevationStyle(level) {
+  if (import_react_native5.Platform.OS === "web") {
+    const { shadowOffset, shadowOpacity, shadowRadius } = level;
+    if (shadowOpacity === 0) {
+      return { boxShadow: "none" };
+    }
+    return {
+      boxShadow: `${shadowOffset.width}px ${shadowOffset.height}px ${shadowRadius}px rgba(0, 0, 0, ${shadowOpacity})`
+    };
+  }
+  return {
+    shadowColor: level.shadowColor,
+    shadowOffset: {
+      width: level.shadowOffset.width,
+      height: level.shadowOffset.height
+    },
+    shadowOpacity: level.shadowOpacity,
+    shadowRadius: level.shadowRadius,
+    elevation: level.elevation
+  };
+}
+
+// src/button/styles.ts
+function getVariantColors(theme, variant) {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  if (variant === "outlined") {
+    return {
+      backgroundColor: "transparent",
+      textColor: theme.colors.primary,
+      borderColor: theme.colors.outline,
+      borderWidth: 1,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: "transparent",
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledOutlineColor
+    };
+  }
+  if (variant === "text") {
+    return {
+      backgroundColor: "transparent",
+      textColor: theme.colors.primary,
+      borderColor: "transparent",
+      borderWidth: 0,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: "transparent",
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: "transparent"
+    };
+  }
+  if (variant === "elevated") {
+    return {
+      backgroundColor: theme.colors.surfaceContainerLow,
+      textColor: theme.colors.primary,
+      borderColor: theme.colors.surfaceContainerLow,
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledContainerColor
+    };
+  }
+  if (variant === "tonal") {
+    return {
+      backgroundColor: theme.colors.secondaryContainer,
+      textColor: theme.colors.onSecondaryContainer,
+      borderColor: theme.colors.secondaryContainer,
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: disabledContainerColor
+    };
+  }
+  return {
+    backgroundColor: theme.colors.primary,
+    textColor: theme.colors.onPrimary,
+    borderColor: theme.colors.primary,
+    borderWidth: 0,
+    hoveredBackgroundColor: blendColor(
+      theme.colors.primary,
+      theme.colors.onPrimary,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: blendColor(
+      theme.colors.primary,
+      theme.colors.onPrimary,
+      theme.stateLayer.pressedOpacity
+    ),
+    disabledBackgroundColor: disabledContainerColor,
+    disabledTextColor: disabledLabelColor,
+    disabledBorderColor: disabledContainerColor
+  };
+}
+function getHorizontalPadding(theme, variant, hasLeadingIcon, hasTrailingIcon) {
+  if (variant === "text") {
+    return {
+      paddingStart: hasLeadingIcon ? 12 : hasTrailingIcon ? theme.spacing.md : 12,
+      paddingEnd: hasTrailingIcon ? 12 : hasLeadingIcon ? theme.spacing.md : 12
+    };
+  }
+  return {
+    paddingStart: hasLeadingIcon ? theme.spacing.md : theme.spacing.lg,
+    paddingEnd: hasTrailingIcon ? theme.spacing.md : theme.spacing.lg
+  };
+}
+function applyColorOverrides(theme, colors, containerColor, contentColor) {
+  if (!containerColor && !contentColor) return colors;
+  const result = { ...colors };
+  if (contentColor) {
+    result.textColor = contentColor;
+  }
+  if (containerColor) {
+    const overlay = contentColor != null ? contentColor : colors.textColor;
+    result.backgroundColor = containerColor;
+    result.borderColor = containerColor;
+    result.hoveredBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity
+    );
+    result.pressedBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity
+    );
+  } else if (contentColor) {
+    if (colors.backgroundColor === "transparent") {
+      result.hoveredBackgroundColor = alphaColor(
+        contentColor,
+        theme.stateLayer.hoveredOpacity
+      );
+      result.pressedBackgroundColor = alphaColor(
+        contentColor,
+        theme.stateLayer.pressedOpacity
+      );
+    } else {
+      result.hoveredBackgroundColor = blendColor(
+        colors.backgroundColor,
+        contentColor,
+        theme.stateLayer.hoveredOpacity
+      );
+      result.pressedBackgroundColor = blendColor(
+        colors.backgroundColor,
+        contentColor,
+        theme.stateLayer.pressedOpacity
+      );
+    }
+  }
+  return result;
+}
+function createStyles(theme, variant, hasLeadingIcon, hasTrailingIcon, containerColor, contentColor) {
+  const baseColors = getVariantColors(theme, variant);
+  const colors = applyColorOverrides(
+    theme,
+    baseColors,
+    containerColor,
+    contentColor
+  );
+  const labelStyle = theme.typography.labelLarge;
+  const padding = getHorizontalPadding(
+    theme,
+    variant,
+    hasLeadingIcon,
+    hasTrailingIcon
+  );
+  const elevationLevel0 = elevationStyle(theme.elevation.level0);
+  const elevationLevel1 = elevationStyle(theme.elevation.level1);
+  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
+  return import_react_native6.StyleSheet.create({
+    container: {
+      alignSelf: "flex-start",
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "center",
+      minWidth: 58,
+      minHeight: 40,
+      paddingStart: padding.paddingStart,
+      paddingEnd: padding.paddingEnd,
+      paddingVertical: 10,
+      borderRadius: theme.shape.cornerFull,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      cursor: "pointer",
+      ...baseElevation
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor,
+      ...variant === "elevated" ? elevationLevel2 : void 0
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      backgroundColor: colors.disabledBackgroundColor,
+      borderColor: colors.disabledBorderColor,
+      cursor: "auto",
+      ...elevationLevel0
+    },
+    label: {
+      fontFamily: labelStyle.fontFamily,
+      fontSize: labelStyle.fontSize,
+      lineHeight: labelStyle.lineHeight,
+      fontWeight: labelStyle.fontWeight,
+      letterSpacing: labelStyle.letterSpacing,
+      color: colors.textColor
+    },
+    leadingIcon: {
+      marginEnd: theme.spacing.sm
+    },
+    trailingIcon: {
+      marginStart: theme.spacing.sm
+    },
+    disabledLabel: {
+      color: colors.disabledTextColor
+    }
+  });
+}
+
+// src/button/Button.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function resolveStyle(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      containerStyle,
+      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+      state.pressed && !disabled ? pressedContainerStyle : void 0,
+      disabled ? disabledContainerStyle : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    containerStyle,
+    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+    state.pressed && !disabled ? pressedContainerStyle : void 0,
+    disabled ? disabledContainerStyle : void 0,
+    style
+  ];
+}
+function Button({
+  children,
+  style,
+  variant = "filled",
+  leadingIcon,
+  trailingIcon,
+  iconSize = 18,
+  containerColor,
+  contentColor,
+  labelStyle: labelStyleOverride,
+  disabled = false,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const hasLeading = Boolean(leadingIcon);
+  const hasTrailing = Boolean(trailingIcon);
+  const theme = (0, import_core5.useTheme)();
+  const styles2 = (0, import_react7.useMemo)(
+    () => createStyles(
+      theme,
+      variant,
+      hasLeading,
+      hasTrailing,
+      containerColor,
+      contentColor
+    ),
+    [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
+  );
+  const resolvedIconColor = (0, import_react7.useMemo)(() => {
+    const base = import_react_native8.StyleSheet.flatten([
+      styles2.label,
+      isDisabled ? styles2.disabledLabel : void 0
+    ]);
+    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
+  }, [styles2.label, styles2.disabledLabel, isDisabled]);
+  const computedLabelStyle = (0, import_react7.useMemo)(
+    () => [
+      styles2.label,
+      isDisabled ? styles2.disabledLabel : void 0,
+      labelStyleOverride
+    ],
+    [isDisabled, styles2.disabledLabel, styles2.label, labelStyleOverride]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react_native7.Pressable,
+    {
+      ...props,
+      accessibilityRole: "button",
+      accessibilityState: { disabled: isDisabled },
+      hitSlop: import_react_native7.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      style: resolveStyle(
+        styles2.container,
+        styles2.hoveredContainer,
+        styles2.pressedContainer,
+        styles2.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: [
+        leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_MaterialCommunityIcons.default,
+          {
+            name: leadingIcon,
+            size: iconSize,
+            color: resolvedIconColor,
+            style: styles2.leadingIcon
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native9.Text, { style: computedLabelStyle, children }),
+        trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_MaterialCommunityIcons.default,
+          {
+            name: trailingIcon,
+            size: iconSize,
+            color: resolvedIconColor,
+            style: styles2.trailingIcon
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/icon-button/IconButton.tsx
+var import_MaterialCommunityIcons2 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react8 = require("react");
+var import_react_native11 = require("react-native");
+var import_core6 = require("@onlynative/core");
+
+// src/icon-button/styles.ts
+var import_react_native10 = require("react-native");
+function createStyles2(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_native10.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_runtime8 = 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(styles2, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles2.colorTonalToggleSelected : styles2.colorTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles2.colorOutlinedToggleSelected : styles2.colorOutlined;
+    }
+    if (variant === "standard") {
+      return selected ? styles2.colorStandardToggleSelected : styles2.colorStandard;
+    }
+    return selected ? styles2.colorFilledToggleSelected : styles2.colorFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles2.colorTonal;
+  }
+  if (variant === "outlined") {
+    return styles2.colorOutlined;
+  }
+  if (variant === "standard") {
+    return styles2.colorStandard;
+  }
+  return styles2.colorFilled;
+}
+function getSizeStyle(styles2, size) {
+  if (size === "small") {
+    return styles2.sizeSmall;
+  }
+  if (size === "large") {
+    return styles2.sizeLarge;
+  }
+  return styles2.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(styles2, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles2.hoveredTonalToggleSelected : styles2.hoveredTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles2.hoveredOutlinedToggleSelected : styles2.hoveredOutlinedToggleUnselected;
+    }
+    if (variant === "standard") {
+      return selected ? styles2.hoveredStandardToggleSelected : styles2.hoveredStandardToggleUnselected;
+    }
+    return selected ? styles2.hoveredFilledToggleSelected : styles2.hoveredFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles2.hoveredTonal;
+  }
+  if (variant === "outlined") {
+    return styles2.hoveredOutlined;
+  }
+  if (variant === "standard") {
+    return styles2.hoveredStandard;
+  }
+  return styles2.hoveredFilled;
+}
+function getPressedStyle(styles2, variant, isToggle, selected) {
+  if (isToggle) {
+    if (variant === "tonal") {
+      return selected ? styles2.pressedTonalToggleSelected : styles2.pressedTonalToggleUnselected;
+    }
+    if (variant === "outlined") {
+      return selected ? styles2.pressedOutlinedToggleSelected : styles2.pressedOutlinedToggleUnselected;
+    }
+    if (variant === "standard") {
+      return selected ? styles2.pressedStandardToggleSelected : styles2.pressedStandardToggleUnselected;
+    }
+    return selected ? styles2.pressedFilledToggleSelected : styles2.pressedFilledToggleUnselected;
+  }
+  if (variant === "tonal") {
+    return styles2.pressedTonal;
+  }
+  if (variant === "outlined") {
+    return styles2.pressedOutlined;
+  }
+  if (variant === "standard") {
+    return styles2.pressedStandard;
+  }
+  return styles2.pressedFilled;
+}
+function getDisabledStyle(styles2, variant) {
+  if (variant === "tonal") {
+    return styles2.disabledTonal;
+  }
+  if (variant === "outlined") {
+    return styles2.disabledOutlined;
+  }
+  if (variant === "standard") {
+    return styles2.disabledStandard;
+  }
+  return styles2.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_core6.useTheme)();
+  const styles2 = (0, import_react8.useMemo)(() => createStyles2(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_react8.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_runtime8.jsx)(
+    import_react_native11.Pressable,
+    {
+      ...props,
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState,
+      disabled: isDisabled,
+      hitSlop: hitSlop != null ? hitSlop : getDefaultHitSlop(size),
+      onPress,
+      style: ({
+        pressed,
+        hovered
+      }) => {
+        const base = [
+          styles2.container,
+          getSizeStyle(styles2, size),
+          getColorStyle(styles2, variant, isToggle, isSelected),
+          containerOverrides == null ? void 0 : containerOverrides.base,
+          hovered && !pressed && !isDisabled ? containerOverrides ? containerOverrides.hovered : getHoveredStyle(styles2, variant, isToggle, isSelected) : void 0,
+          pressed && !isDisabled ? containerOverrides ? containerOverrides.pressed : getPressedStyle(styles2, variant, isToggle, isSelected) : void 0,
+          isDisabled ? getDisabledStyle(styles2, variant) : void 0
+        ];
+        if (typeof style === "function") {
+          base.push(style({ pressed }));
+        } else if (style) {
+          base.push(style);
+        }
+        return base;
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_MaterialCommunityIcons2.default,
+        {
+          name: displayIcon,
+          size: iconPixelSize,
+          color: resolvedIconColor
+        }
+      )
+    }
+  );
+}
+
+// src/appbar/AppBar.tsx
+var import_react9 = require("react");
+var import_react_native14 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+var import_core8 = require("@onlynative/core");
+
+// src/utils/rtl.ts
+var import_react_native12 = require("react-native");
+function transformOrigin(vertical = "top") {
+  return import_react_native12.I18nManager.isRTL ? `right ${vertical}` : `left ${vertical}`;
+}
+function selectRTL(ltr, rtl) {
+  return import_react_native12.I18nManager.isRTL ? rtl : ltr;
+}
+
+// src/appbar/styles.ts
+var import_react_native13 = require("react-native");
+var import_core7 = require("@onlynative/core");
+function createStyles3(theme) {
+  var _a;
+  const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core7.defaultTopAppBarTokens;
+  return import_react_native13.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_runtime9 = require("react/jsx-runtime");
+function getBackIcon() {
+  if (import_react_native14.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(styles2, size) {
+  if (size === "large") {
+    return styles2.largeContainer;
+  }
+  return styles2.mediumContainer;
+}
+function withTopInset(enabled, content, style) {
+  if (enabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_safe_area_context2.SafeAreaView, { edges: ["top"], style, children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.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_core8.useTheme)();
+  const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core8.defaultTopAppBarTokens;
+  const styles2 = (0, import_react9.useMemo)(() => createStyles3(theme), [theme]);
+  const [leadingWidth, setLeadingWidth] = (0, import_react9.useState)(0);
+  const [actionsWidth, setActionsWidth] = (0, import_react9.useState)(0);
+  const titleColorStyle = (0, import_react9.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_react9.useMemo)(
+    () => ({ paddingStart: titleStartInset }),
+    [titleStartInset]
+  );
+  const overlayTitleInsetStyle = (0, import_react9.useMemo)(
+    () => isCenterAligned ? { start: centeredSideInset, end: centeredSideInset } : { start: titleStartInset, end: compactTitleEndInset },
+    [centeredSideInset, compactTitleEndInset, isCenterAligned, titleStartInset]
+  );
+  const leadingContent = (0, import_react9.useMemo)(() => {
+    if (leading) {
+      return leading;
+    }
+    if (!canGoBack) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles2.iconFrame, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      IconButton,
+      {
+        icon: getBackIcon(),
+        size: "medium",
+        variant: "standard",
+        iconColor: contentColor != null ? contentColor : theme.colors.onSurface,
+        accessibilityLabel: "Go back",
+        onPress: onBackPress
+      }
+    ) });
+  }, [
+    canGoBack,
+    contentColor,
+    leading,
+    onBackPress,
+    styles2.iconFrame,
+    theme.colors.onSurface
+  ]);
+  const actionsContent = (0, import_react9.useMemo)(() => {
+    if (trailing) {
+      return trailing;
+    }
+    if (!actions || actions.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles2.actionsRow, children: actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native14.View,
+      {
+        style: styles2.iconFrame,
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.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, styles2.actionsRow, styles2.iconFrame, trailing]);
+  const onLeadingLayout = (0, import_react9.useCallback)((event) => {
+    const nextWidth = measureWidth(event);
+    setLeadingWidth((currentWidth) => {
+      if (currentWidth === nextWidth) {
+        return currentWidth;
+      }
+      return nextWidth;
+    });
+  }, []);
+  const onActionsLayout = (0, import_react9.useCallback)((event) => {
+    const nextWidth = measureWidth(event);
+    setActionsWidth((currentWidth) => {
+      if (currentWidth === nextWidth) {
+        return currentWidth;
+      }
+      return nextWidth;
+    });
+  }, []);
+  const topRow = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: styles2.topRow, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native14.View,
+      {
+        collapsable: false,
+        onLayout: onLeadingLayout,
+        style: styles2.sideSlot,
+        children: leadingContent
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: styles2.topRowSpacer }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native14.View,
+      {
+        collapsable: false,
+        onLayout: onActionsLayout,
+        style: styles2.sideSlot,
+        children: actionsContent
+      }
+    )
+  ] });
+  const containerOverride = containerColor ? { backgroundColor: containerColor } : void 0;
+  const rootStyle = [
+    styles2.root,
+    elevated ? styles2.elevatedRoot : void 0,
+    containerOverride,
+    style
+  ];
+  const safeAreaStyle = [
+    styles2.safeArea,
+    elevated ? styles2.elevatedSafeArea : void 0,
+    containerOverride
+  ];
+  if (isExpanded) {
+    const content2 = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: [styles2.expandedContainer, getSizeStyle2(styles2, size)], children: [
+      topRow,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        import_react_native14.View,
+        {
+          style: [
+            styles2.expandedTitleContainer,
+            size === "large" ? styles2.largeTitlePadding : styles2.mediumTitlePadding,
+            expandedTitleInsetStyle
+          ],
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Typography,
+            {
+              ...APP_BAR_TITLE_TEXT_PROPS,
+              variant: titleVariant,
+              style: [
+                styles2.title,
+                titleColorStyle,
+                styles2.startAlignedTitle,
+                titleStyle
+              ],
+              children: title
+            }
+          )
+        }
+      )
+    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: rootStyle, children: withTopInset(insetTop, content2, safeAreaStyle) });
+  }
+  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native14.View, { style: styles2.smallContainer, children: [
+    topRow,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: [styles2.overlayTitleContainer, overlayTitleInsetStyle], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      Typography,
+      {
+        ...APP_BAR_TITLE_TEXT_PROPS,
+        variant: titleVariant,
+        style: [
+          styles2.title,
+          titleColorStyle,
+          isCenterAligned ? styles2.centeredTitle : styles2.startAlignedTitle,
+          titleStyle
+        ],
+        children: title
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native14.View, { style: rootStyle, children: withTopInset(insetTop, content, safeAreaStyle) });
+}
+
+// src/card/Card.tsx
+var import_react10 = require("react");
+var import_react_native16 = require("react-native");
+var import_core9 = require("@onlynative/core");
+
+// src/card/styles.ts
+var import_react_native15 = require("react-native");
+function getVariantColors2(theme, variant) {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  if (variant === "outlined") {
+    return {
+      backgroundColor: theme.colors.surface,
+      borderColor: theme.colors.outline,
+      borderWidth: 1,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.onSurface,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.onSurface,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: theme.colors.surface,
+      disabledBorderColor: disabledOutlineColor
+    };
+  }
+  if (variant === "filled") {
+    return {
+      backgroundColor: theme.colors.surfaceContainerHighest,
+      borderColor: "transparent",
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.surfaceContainerHighest,
+        theme.colors.onSurface,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.surfaceContainerHighest,
+        theme.colors.onSurface,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledBorderColor: "transparent"
+    };
+  }
+  return {
+    backgroundColor: theme.colors.surface,
+    borderColor: "transparent",
+    borderWidth: 0,
+    hoveredBackgroundColor: blendColor(
+      theme.colors.surface,
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: blendColor(
+      theme.colors.surface,
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    ),
+    disabledBackgroundColor: disabledContainerColor,
+    disabledBorderColor: "transparent"
+  };
+}
+function applyColorOverrides2(theme, colors, containerColor) {
+  if (!containerColor) return colors;
+  return {
+    ...colors,
+    backgroundColor: containerColor,
+    borderColor: containerColor,
+    borderWidth: 0,
+    hoveredBackgroundColor: blendColor(
+      containerColor,
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: blendColor(
+      containerColor,
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    )
+  };
+}
+function createStyles4(theme, variant, containerColor) {
+  const baseColors = getVariantColors2(theme, variant);
+  const colors = applyColorOverrides2(theme, baseColors, containerColor);
+  const elevationLevel0 = elevationStyle(theme.elevation.level0);
+  const elevationLevel1 = elevationStyle(theme.elevation.level1);
+  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  const baseElevation = variant === "elevated" ? elevationLevel1 : elevationLevel0;
+  return import_react_native15.StyleSheet.create({
+    container: {
+      borderRadius: theme.shape.cornerMedium,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      overflow: "hidden",
+      ...baseElevation
+    },
+    interactiveContainer: {
+      cursor: "pointer"
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor,
+      ...variant === "elevated" ? elevationLevel2 : variant === "filled" ? elevationLevel1 : void 0
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      backgroundColor: colors.disabledBackgroundColor,
+      borderColor: colors.disabledBorderColor,
+      cursor: "auto",
+      ...elevationLevel0
+    },
+    disabledContent: {
+      opacity: theme.stateLayer.disabledOpacity
+    }
+  });
+}
+
+// src/card/Card.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Card({
+  children,
+  style,
+  variant = "elevated",
+  onPress,
+  disabled = false,
+  containerColor,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isInteractive = onPress !== void 0;
+  const theme = (0, import_core9.useTheme)();
+  const styles2 = (0, import_react10.useMemo)(
+    () => createStyles4(theme, variant, containerColor),
+    [theme, variant, containerColor]
+  );
+  if (!isInteractive) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { ...props, style: [styles2.container, style], children });
+  }
+  const resolvedStyle = (state) => [
+    styles2.container,
+    styles2.interactiveContainer,
+    state.hovered && !state.pressed && !isDisabled ? styles2.hoveredContainer : void 0,
+    state.pressed && !isDisabled ? styles2.pressedContainer : void 0,
+    isDisabled ? styles2.disabledContainer : void 0,
+    typeof style === "function" ? style(state) : style
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_native16.Pressable,
+    {
+      ...props,
+      role: "button",
+      accessibilityState: { disabled: isDisabled },
+      hitSlop: import_react_native16.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      onPress,
+      style: resolvedStyle,
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native16.View, { style: styles2.disabledContent, children }) : children
+    }
+  );
+}
+
+// src/chip/Chip.tsx
+var import_MaterialCommunityIcons3 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react11 = require("react");
+var import_react_native18 = require("react-native");
+var import_core10 = require("@onlynative/core");
+
+// src/chip/styles.ts
+var import_react_native17 = require("react-native");
+function getVariantColors3(theme, variant, elevated, selected) {
+  const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38);
+  const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12);
+  if (variant === "filter" && selected) {
+    return {
+      backgroundColor: theme.colors.secondaryContainer,
+      textColor: theme.colors.onSecondaryContainer,
+      borderColor: "transparent",
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.secondaryContainer,
+        theme.colors.onSecondaryContainer,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: "transparent"
+    };
+  }
+  if (elevated && variant !== "input") {
+    const textColor2 = variant === "assist" ? theme.colors.onSurface : theme.colors.onSurfaceVariant;
+    return {
+      backgroundColor: theme.colors.surfaceContainerLow,
+      textColor: textColor2,
+      borderColor: "transparent",
+      borderWidth: 0,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        textColor2,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.surfaceContainerLow,
+        textColor2,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: disabledContainerColor,
+      disabledTextColor: disabledLabelColor,
+      disabledBorderColor: "transparent"
+    };
+  }
+  const textColor = variant === "assist" ? theme.colors.onSurface : theme.colors.onSurfaceVariant;
+  return {
+    backgroundColor: theme.colors.surface,
+    textColor,
+    borderColor: theme.colors.outline,
+    borderWidth: 1,
+    hoveredBackgroundColor: blendColor(
+      theme.colors.surface,
+      textColor,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: blendColor(
+      theme.colors.surface,
+      textColor,
+      theme.stateLayer.pressedOpacity
+    ),
+    disabledBackgroundColor: disabledContainerColor,
+    disabledTextColor: disabledLabelColor,
+    disabledBorderColor: disabledOutlineColor
+  };
+}
+function applyColorOverrides3(theme, colors, containerColor, contentColor) {
+  if (!containerColor && !contentColor) return colors;
+  const result = { ...colors };
+  if (contentColor) {
+    result.textColor = contentColor;
+  }
+  if (containerColor) {
+    const overlay = contentColor != null ? contentColor : colors.textColor;
+    result.backgroundColor = containerColor;
+    result.borderColor = containerColor;
+    result.hoveredBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity
+    );
+    result.pressedBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity
+    );
+  } else if (contentColor) {
+    if (colors.backgroundColor === "transparent") {
+      result.hoveredBackgroundColor = alphaColor(
+        contentColor,
+        theme.stateLayer.hoveredOpacity
+      );
+      result.pressedBackgroundColor = alphaColor(
+        contentColor,
+        theme.stateLayer.pressedOpacity
+      );
+    } else {
+      result.hoveredBackgroundColor = blendColor(
+        colors.backgroundColor,
+        contentColor,
+        theme.stateLayer.hoveredOpacity
+      );
+      result.pressedBackgroundColor = blendColor(
+        colors.backgroundColor,
+        contentColor,
+        theme.stateLayer.pressedOpacity
+      );
+    }
+  }
+  return result;
+}
+function createStyles5(theme, variant, elevated, selected, hasLeadingContent, hasTrailingContent, containerColor, contentColor) {
+  const baseColors = getVariantColors3(theme, variant, elevated, selected);
+  const colors = applyColorOverrides3(
+    theme,
+    baseColors,
+    containerColor,
+    contentColor
+  );
+  const labelStyle = theme.typography.labelLarge;
+  const elevationLevel0 = elevationStyle(theme.elevation.level0);
+  const elevationLevel1 = elevationStyle(theme.elevation.level1);
+  const elevationLevel2 = elevationStyle(theme.elevation.level2);
+  const isElevated = elevated && variant !== "input";
+  const baseElevation = isElevated ? elevationLevel1 : elevationLevel0;
+  return import_react_native17.StyleSheet.create({
+    container: {
+      alignSelf: "flex-start",
+      alignItems: "center",
+      flexDirection: "row",
+      height: 32,
+      paddingStart: hasLeadingContent ? 8 : 16,
+      paddingEnd: hasTrailingContent ? 8 : 16,
+      borderRadius: theme.shape.cornerSmall,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      cursor: "pointer",
+      ...baseElevation
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor,
+      ...isElevated ? elevationLevel2 : void 0
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      backgroundColor: colors.disabledBackgroundColor,
+      borderColor: colors.disabledBorderColor,
+      cursor: "auto",
+      ...elevationLevel0
+    },
+    label: {
+      fontFamily: labelStyle.fontFamily,
+      fontSize: labelStyle.fontSize,
+      lineHeight: labelStyle.lineHeight,
+      fontWeight: labelStyle.fontWeight,
+      letterSpacing: labelStyle.letterSpacing,
+      color: colors.textColor
+    },
+    disabledLabel: {
+      color: colors.disabledTextColor
+    },
+    leadingIcon: {
+      marginEnd: theme.spacing.sm
+    },
+    avatar: {
+      marginEnd: theme.spacing.sm,
+      width: 24,
+      height: 24,
+      borderRadius: 12,
+      overflow: "hidden"
+    },
+    closeButton: {
+      marginStart: theme.spacing.sm
+    }
+  });
+}
+
+// src/chip/Chip.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function resolveStyle2(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      containerStyle,
+      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+      state.pressed && !disabled ? pressedContainerStyle : void 0,
+      disabled ? disabledContainerStyle : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    containerStyle,
+    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+    state.pressed && !disabled ? pressedContainerStyle : void 0,
+    disabled ? disabledContainerStyle : void 0,
+    style
+  ];
+}
+function Chip({
+  children,
+  style,
+  variant = "assist",
+  elevated = false,
+  selected = false,
+  leadingIcon,
+  iconSize = 18,
+  avatar,
+  onClose,
+  containerColor,
+  contentColor,
+  labelStyle: labelStyleOverride,
+  disabled = false,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isSelected = variant === "filter" ? Boolean(selected) : false;
+  const showCloseIcon = onClose !== void 0 && (variant === "input" || variant === "filter" && isSelected);
+  const hasLeadingContent = Boolean(
+    variant === "input" && avatar || leadingIcon || variant === "filter" && isSelected
+  );
+  const theme = (0, import_core10.useTheme)();
+  const styles2 = (0, import_react11.useMemo)(
+    () => createStyles5(
+      theme,
+      variant,
+      elevated,
+      isSelected,
+      hasLeadingContent,
+      showCloseIcon,
+      containerColor,
+      contentColor
+    ),
+    [
+      theme,
+      variant,
+      elevated,
+      isSelected,
+      hasLeadingContent,
+      showCloseIcon,
+      containerColor,
+      contentColor
+    ]
+  );
+  const resolvedIconColor = (0, import_react11.useMemo)(() => {
+    const base = import_react_native18.StyleSheet.flatten([
+      styles2.label,
+      isDisabled ? styles2.disabledLabel : void 0
+    ]);
+    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
+  }, [styles2.label, styles2.disabledLabel, isDisabled]);
+  const computedLabelStyle = (0, import_react11.useMemo)(
+    () => [
+      styles2.label,
+      isDisabled ? styles2.disabledLabel : void 0,
+      labelStyleOverride
+    ],
+    [isDisabled, styles2.disabledLabel, styles2.label, labelStyleOverride]
+  );
+  const renderLeadingContent = () => {
+    if (variant === "input" && avatar) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native18.View, { style: styles2.avatar, children: avatar });
+    }
+    if (leadingIcon) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_MaterialCommunityIcons3.default,
+        {
+          name: leadingIcon,
+          size: iconSize,
+          color: resolvedIconColor,
+          style: styles2.leadingIcon
+        }
+      );
+    }
+    if (variant === "filter" && isSelected) {
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_MaterialCommunityIcons3.default,
+        {
+          name: "check",
+          size: iconSize,
+          color: resolvedIconColor,
+          style: styles2.leadingIcon
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    import_react_native18.Pressable,
+    {
+      ...props,
+      accessibilityRole: "button",
+      accessibilityState: {
+        disabled: isDisabled,
+        ...variant === "filter" ? { selected: isSelected } : void 0
+      },
+      hitSlop: import_react_native18.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      style: resolveStyle2(
+        styles2.container,
+        styles2.hoveredContainer,
+        styles2.pressedContainer,
+        styles2.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: [
+        renderLeadingContent(),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native18.Text, { style: computedLabelStyle, children }),
+        showCloseIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_native18.Pressable,
+          {
+            onPress: onClose,
+            accessibilityRole: "button",
+            accessibilityLabel: "Remove",
+            hitSlop: 4,
+            style: styles2.closeButton,
+            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              import_MaterialCommunityIcons3.default,
+              {
+                name: "close",
+                size: iconSize,
+                color: resolvedIconColor
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/checkbox/Checkbox.tsx
+var import_MaterialCommunityIcons4 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react12 = require("react");
+var import_react_native20 = require("react-native");
+var import_core11 = require("@onlynative/core");
+
+// src/checkbox/styles.ts
+var import_react_native19 = require("react-native");
+function getColors(theme, checked) {
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  if (checked) {
+    return {
+      backgroundColor: theme.colors.primary,
+      borderColor: "transparent",
+      borderWidth: 0,
+      iconColor: theme.colors.onPrimary,
+      hoveredBackgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBackgroundColor: disabledOnSurface38,
+      disabledBorderColor: "transparent",
+      disabledBorderWidth: 0,
+      disabledIconColor: theme.colors.surface
+    };
+  }
+  return {
+    backgroundColor: "transparent",
+    borderColor: theme.colors.onSurfaceVariant,
+    borderWidth: 2,
+    iconColor: "transparent",
+    hoveredBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    ),
+    disabledBackgroundColor: "transparent",
+    disabledBorderColor: disabledOnSurface38,
+    disabledBorderWidth: 2,
+    disabledIconColor: "transparent"
+  };
+}
+function applyColorOverrides4(theme, colors, containerColor, contentColor) {
+  if (!containerColor && !contentColor) return colors;
+  const result = { ...colors };
+  if (contentColor) {
+    result.iconColor = contentColor;
+  }
+  if (containerColor) {
+    const overlay = contentColor != null ? contentColor : colors.iconColor;
+    result.backgroundColor = containerColor;
+    result.borderColor = containerColor;
+    result.hoveredBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity
+    );
+    result.pressedBackgroundColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity
+    );
+  }
+  return result;
+}
+function createStyles6(theme, checked, containerColor, contentColor) {
+  const colors = applyColorOverrides4(
+    theme,
+    getColors(theme, checked),
+    containerColor,
+    contentColor
+  );
+  const size = 18;
+  const touchTarget = 48;
+  return import_react_native19.StyleSheet.create({
+    container: {
+      width: touchTarget,
+      height: touchTarget,
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer"
+    },
+    hoveredContainer: {
+      borderRadius: touchTarget / 2,
+      backgroundColor: colors.hoveredBackgroundColor
+    },
+    pressedContainer: {
+      borderRadius: touchTarget / 2,
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      cursor: "auto"
+    },
+    box: {
+      width: size,
+      height: size,
+      borderRadius: theme.shape.cornerExtraSmall,
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    disabledBox: {
+      backgroundColor: colors.disabledBackgroundColor,
+      borderColor: colors.disabledBorderColor,
+      borderWidth: colors.disabledBorderWidth
+    },
+    iconColor: {
+      color: colors.iconColor
+    },
+    disabledIconColor: {
+      color: colors.disabledIconColor
+    }
+  });
+}
+
+// src/checkbox/Checkbox.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function resolveStyle3(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      containerStyle,
+      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+      state.pressed && !disabled ? pressedContainerStyle : void 0,
+      disabled ? disabledContainerStyle : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    containerStyle,
+    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+    state.pressed && !disabled ? pressedContainerStyle : void 0,
+    disabled ? disabledContainerStyle : void 0,
+    style
+  ];
+}
+function Checkbox({
+  style,
+  value = false,
+  onValueChange,
+  containerColor,
+  contentColor,
+  disabled = false,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isChecked = Boolean(value);
+  const theme = (0, import_core11.useTheme)();
+  const styles2 = (0, import_react12.useMemo)(
+    () => createStyles6(theme, isChecked, containerColor, contentColor),
+    [theme, isChecked, containerColor, contentColor]
+  );
+  const resolvedIconColor = (0, import_react12.useMemo)(() => {
+    const base = import_react_native20.StyleSheet.flatten([
+      styles2.iconColor,
+      isDisabled ? styles2.disabledIconColor : void 0
+    ]);
+    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
+  }, [styles2.iconColor, styles2.disabledIconColor, isDisabled]);
+  const handlePress = () => {
+    if (!isDisabled) {
+      onValueChange == null ? void 0 : onValueChange(!isChecked);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_native20.Pressable,
+    {
+      ...props,
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        disabled: isDisabled,
+        checked: isChecked
+      },
+      hitSlop: import_react_native20.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      onPress: handlePress,
+      style: resolveStyle3(
+        styles2.container,
+        styles2.hoveredContainer,
+        styles2.pressedContainer,
+        styles2.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native20.View, { style: [styles2.box, isDisabled ? styles2.disabledBox : void 0], children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        import_MaterialCommunityIcons4.default,
+        {
+          name: "check",
+          size: 14,
+          color: resolvedIconColor
+        }
+      ) : null })
+    }
+  );
+}
+
+// src/radio/Radio.tsx
+var import_react13 = require("react");
+var import_react_native22 = require("react-native");
+var import_core12 = require("@onlynative/core");
+
+// src/radio/styles.ts
+var import_react_native21 = require("react-native");
+function getColors2(theme, selected) {
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  if (selected) {
+    return {
+      borderColor: theme.colors.primary,
+      dotColor: theme.colors.primary,
+      hoveredBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: alphaColor(
+        theme.colors.primary,
+        theme.stateLayer.pressedOpacity
+      ),
+      disabledBorderColor: disabledOnSurface38,
+      disabledDotColor: disabledOnSurface38
+    };
+  }
+  return {
+    borderColor: theme.colors.onSurfaceVariant,
+    dotColor: "transparent",
+    hoveredBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    ),
+    disabledBorderColor: disabledOnSurface38,
+    disabledDotColor: "transparent"
+  };
+}
+function applyColorOverrides5(theme, colors, containerColor, contentColor) {
+  if (!containerColor && !contentColor) return colors;
+  const result = { ...colors };
+  if (containerColor) {
+    result.borderColor = containerColor;
+    result.dotColor = containerColor;
+    result.hoveredBackgroundColor = alphaColor(
+      containerColor,
+      theme.stateLayer.hoveredOpacity
+    );
+    result.pressedBackgroundColor = alphaColor(
+      containerColor,
+      theme.stateLayer.pressedOpacity
+    );
+  }
+  if (contentColor) {
+    result.borderColor = contentColor;
+  }
+  return result;
+}
+function createStyles7(theme, selected, containerColor, contentColor) {
+  const colors = applyColorOverrides5(
+    theme,
+    getColors2(theme, selected),
+    containerColor,
+    contentColor
+  );
+  const outerSize = 20;
+  const innerSize = 10;
+  const touchTarget = 48;
+  return import_react_native21.StyleSheet.create({
+    container: {
+      width: touchTarget,
+      height: touchTarget,
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer"
+    },
+    hoveredContainer: {
+      borderRadius: touchTarget / 2,
+      backgroundColor: colors.hoveredBackgroundColor
+    },
+    pressedContainer: {
+      borderRadius: touchTarget / 2,
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      cursor: "auto"
+    },
+    outer: {
+      width: outerSize,
+      height: outerSize,
+      borderRadius: outerSize / 2,
+      borderWidth: 2,
+      borderColor: colors.borderColor,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    disabledOuter: {
+      borderColor: colors.disabledBorderColor
+    },
+    inner: {
+      width: innerSize,
+      height: innerSize,
+      borderRadius: innerSize / 2,
+      backgroundColor: colors.dotColor
+    },
+    disabledInner: {
+      backgroundColor: colors.disabledDotColor
+    }
+  });
+}
+
+// src/radio/Radio.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function resolveStyle4(containerStyle, hoveredContainerStyle, pressedContainerStyle, disabledContainerStyle, disabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      containerStyle,
+      state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+      state.pressed && !disabled ? pressedContainerStyle : void 0,
+      disabled ? disabledContainerStyle : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    containerStyle,
+    state.hovered && !state.pressed && !disabled ? hoveredContainerStyle : void 0,
+    state.pressed && !disabled ? pressedContainerStyle : void 0,
+    disabled ? disabledContainerStyle : void 0,
+    style
+  ];
+}
+function Radio({
+  style,
+  value = false,
+  onValueChange,
+  containerColor,
+  contentColor,
+  disabled = false,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isSelected = Boolean(value);
+  const theme = (0, import_core12.useTheme)();
+  const styles2 = (0, import_react13.useMemo)(
+    () => createStyles7(theme, isSelected, containerColor, contentColor),
+    [theme, isSelected, containerColor, contentColor]
+  );
+  const handlePress = () => {
+    if (!isDisabled) {
+      onValueChange == null ? void 0 : onValueChange(!isSelected);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_native22.Pressable,
+    {
+      ...props,
+      accessibilityRole: "radio",
+      accessibilityState: {
+        disabled: isDisabled,
+        checked: isSelected
+      },
+      hitSlop: import_react_native22.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      onPress: handlePress,
+      style: resolveStyle4(
+        styles2.container,
+        styles2.hoveredContainer,
+        styles2.pressedContainer,
+        styles2.disabledContainer,
+        isDisabled,
+        style
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_native22.View,
+        {
+          style: [styles2.outer, isDisabled ? styles2.disabledOuter : void 0],
+          children: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react_native22.View,
+            {
+              style: [
+                styles2.inner,
+                isDisabled ? styles2.disabledInner : void 0
+              ]
+            }
+          ) : null
+        }
+      )
+    }
+  );
+}
+
+// src/switch/Switch.tsx
+var import_MaterialCommunityIcons5 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react14 = require("react");
+var import_react_native24 = require("react-native");
+var import_core13 = require("@onlynative/core");
+
+// src/switch/styles.ts
+var import_react_native23 = require("react-native");
+function getColors3(theme, selected) {
+  const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12);
+  const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38);
+  if (selected) {
+    return {
+      trackColor: theme.colors.primary,
+      thumbColor: theme.colors.onPrimary,
+      iconColor: theme.colors.onPrimaryContainer,
+      hoveredTrackColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedTrackColor: blendColor(
+        theme.colors.primary,
+        theme.colors.onPrimary,
+        theme.stateLayer.pressedOpacity
+      ),
+      borderColor: "transparent",
+      borderWidth: 0,
+      disabledTrackColor: disabledOnSurface12,
+      disabledThumbColor: theme.colors.surface,
+      disabledBorderColor: "transparent",
+      disabledBorderWidth: 0
+    };
+  }
+  return {
+    trackColor: theme.colors.surfaceContainerHighest,
+    thumbColor: theme.colors.outline,
+    iconColor: theme.colors.surfaceContainerHighest,
+    hoveredTrackColor: blendColor(
+      theme.colors.surfaceContainerHighest,
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedTrackColor: blendColor(
+      theme.colors.surfaceContainerHighest,
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    ),
+    borderColor: theme.colors.outline,
+    borderWidth: 2,
+    disabledTrackColor: disabledOnSurface12,
+    disabledThumbColor: disabledOnSurface38,
+    disabledBorderColor: disabledOnSurface12,
+    disabledBorderWidth: 2
+  };
+}
+function applyColorOverrides6(theme, colors, containerColor, contentColor) {
+  if (!containerColor && !contentColor) return colors;
+  const result = { ...colors };
+  if (contentColor) {
+    result.thumbColor = contentColor;
+    result.iconColor = contentColor;
+  }
+  if (containerColor) {
+    const overlay = contentColor != null ? contentColor : colors.thumbColor;
+    result.trackColor = containerColor;
+    result.borderColor = containerColor;
+    result.hoveredTrackColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.hoveredOpacity
+    );
+    result.pressedTrackColor = blendColor(
+      containerColor,
+      overlay,
+      theme.stateLayer.pressedOpacity
+    );
+    if (contentColor) {
+      result.iconColor = containerColor;
+    }
+  }
+  return result;
+}
+function createStyles8(theme, selected, hasIcon, containerColor, contentColor) {
+  const colors = applyColorOverrides6(
+    theme,
+    getColors3(theme, selected),
+    containerColor,
+    contentColor
+  );
+  const thumbSize = selected || hasIcon ? 24 : 16;
+  const trackWidth = 52;
+  const trackHeight = 32;
+  const trackPadding = 4;
+  const thumbOffset = selected ? trackWidth - trackPadding - thumbSize : trackPadding;
+  return import_react_native23.StyleSheet.create({
+    track: {
+      width: trackWidth,
+      height: trackHeight,
+      borderRadius: trackHeight / 2,
+      backgroundColor: colors.trackColor,
+      borderColor: colors.borderColor,
+      borderWidth: colors.borderWidth,
+      justifyContent: "center",
+      cursor: "pointer"
+    },
+    hoveredTrack: {
+      backgroundColor: colors.hoveredTrackColor
+    },
+    pressedTrack: {
+      backgroundColor: colors.pressedTrackColor
+    },
+    disabledTrack: {
+      backgroundColor: colors.disabledTrackColor,
+      borderColor: colors.disabledBorderColor,
+      borderWidth: colors.disabledBorderWidth,
+      cursor: "auto"
+    },
+    thumb: {
+      width: thumbSize,
+      height: thumbSize,
+      borderRadius: thumbSize / 2,
+      backgroundColor: colors.thumbColor,
+      marginStart: thumbOffset,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    disabledThumb: {
+      backgroundColor: colors.disabledThumbColor
+    },
+    iconColor: {
+      color: colors.iconColor
+    },
+    disabledIconColor: {
+      color: alphaColor(theme.colors.onSurface, 0.38)
+    }
+  });
+}
+
+// src/switch/Switch.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function resolveStyle5(trackStyle, hoveredTrackStyle, pressedTrackStyle, disabledTrackStyle, disabled, style) {
+  if (typeof style === "function") {
+    return (state) => [
+      trackStyle,
+      state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
+      state.pressed && !disabled ? pressedTrackStyle : void 0,
+      disabled ? disabledTrackStyle : void 0,
+      style(state)
+    ];
+  }
+  return (state) => [
+    trackStyle,
+    state.hovered && !state.pressed && !disabled ? hoveredTrackStyle : void 0,
+    state.pressed && !disabled ? pressedTrackStyle : void 0,
+    disabled ? disabledTrackStyle : void 0,
+    style
+  ];
+}
+function Switch({
+  style,
+  value = false,
+  onValueChange,
+  selectedIcon = "check",
+  unselectedIcon,
+  containerColor,
+  contentColor,
+  disabled = false,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isSelected = Boolean(value);
+  const hasIcon = isSelected || Boolean(unselectedIcon);
+  const theme = (0, import_core13.useTheme)();
+  const styles2 = (0, import_react14.useMemo)(
+    () => createStyles8(theme, isSelected, hasIcon, containerColor, contentColor),
+    [theme, isSelected, hasIcon, containerColor, contentColor]
+  );
+  const resolvedIconColor = (0, import_react14.useMemo)(() => {
+    const base = import_react_native24.StyleSheet.flatten([
+      styles2.iconColor,
+      isDisabled ? styles2.disabledIconColor : void 0
+    ]);
+    return typeof (base == null ? void 0 : base.color) === "string" ? base.color : void 0;
+  }, [styles2.iconColor, styles2.disabledIconColor, isDisabled]);
+  const handlePress = () => {
+    if (!isDisabled) {
+      onValueChange == null ? void 0 : onValueChange(!isSelected);
+    }
+  };
+  const iconName = isSelected ? selectedIcon : unselectedIcon;
+  const iconSize = 16;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_react_native24.Pressable,
+    {
+      ...props,
+      accessibilityRole: "switch",
+      accessibilityState: {
+        disabled: isDisabled,
+        checked: isSelected
+      },
+      hitSlop: import_react_native24.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      onPress: handlePress,
+      style: resolveStyle5(
+        styles2.track,
+        styles2.hoveredTrack,
+        styles2.pressedTrack,
+        styles2.disabledTrack,
+        isDisabled,
+        style
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_react_native24.View,
+        {
+          style: [styles2.thumb, isDisabled ? styles2.disabledThumb : void 0],
+          children: iconName ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            import_MaterialCommunityIcons5.default,
+            {
+              name: iconName,
+              size: iconSize,
+              color: resolvedIconColor
+            }
+          ) : null
+        }
+      )
+    }
+  );
+}
+
+// src/text-field/TextField.tsx
+var import_MaterialCommunityIcons6 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
+var import_react15 = require("react");
+var import_react_native26 = require("react-native");
+var import_core14 = require("@onlynative/core");
+
+// src/text-field/styles.ts
+var import_react_native25 = require("react-native");
+var CONTAINER_HEIGHT = 56;
+var ICON_SIZE = 24;
+var LABEL_FLOATED_LINE_HEIGHT = 16;
+var FILLED_LABEL_RESTING_TOP = 16;
+var FILLED_LABEL_FLOATED_TOP = 8;
+var FILLED_INPUT_TOP = 24;
+var FILLED_INPUT_BOTTOM = 8;
+var OUTLINED_INPUT_VERTICAL = 16;
+var OUTLINED_LABEL_RESTING_TOP = 16;
+var OUTLINED_LABEL_FLOATED_TOP = -(LABEL_FLOATED_LINE_HEIGHT / 2);
+var labelPositions = {
+  filledRestingTop: FILLED_LABEL_RESTING_TOP,
+  filledFloatedTop: FILLED_LABEL_FLOATED_TOP,
+  outlinedRestingTop: OUTLINED_LABEL_RESTING_TOP,
+  outlinedFloatedTop: OUTLINED_LABEL_FLOATED_TOP
+};
+function getVariantColors4(theme, variant) {
+  const disabledOpacity = theme.stateLayer.disabledOpacity;
+  const common = {
+    focusedBorderColor: theme.colors.primary,
+    errorBorderColor: theme.colors.error,
+    focusedLabelColor: theme.colors.primary,
+    errorLabelColor: theme.colors.error,
+    textColor: theme.colors.onSurface,
+    disabledTextColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledLabelColor: alphaColor(theme.colors.onSurface, disabledOpacity),
+    disabledBorderColor: alphaColor(theme.colors.onSurface, 0.12),
+    placeholderColor: theme.colors.onSurfaceVariant,
+    supportingTextColor: theme.colors.onSurfaceVariant,
+    errorSupportingTextColor: theme.colors.error,
+    iconColor: theme.colors.onSurfaceVariant,
+    errorIconColor: theme.colors.error,
+    disabledIconColor: alphaColor(theme.colors.onSurface, disabledOpacity)
+  };
+  if (variant === "outlined") {
+    return {
+      ...common,
+      backgroundColor: "transparent",
+      borderColor: theme.colors.outline,
+      disabledBackgroundColor: "transparent",
+      labelColor: theme.colors.onSurfaceVariant
+    };
+  }
+  return {
+    ...common,
+    backgroundColor: theme.colors.surfaceContainerHighest,
+    borderColor: theme.colors.onSurfaceVariant,
+    disabledBackgroundColor: alphaColor(theme.colors.onSurface, 0.04),
+    labelColor: theme.colors.onSurfaceVariant
+  };
+}
+function createStyles9(theme, variant) {
+  const colors = getVariantColors4(theme, variant);
+  const bodyLarge = theme.typography.bodyLarge;
+  const bodySmall = theme.typography.bodySmall;
+  const isFilled = variant === "filled";
+  return {
+    colors,
+    styles: import_react_native25.StyleSheet.create({
+      root: {
+        alignSelf: "stretch"
+      },
+      container: {
+        minHeight: CONTAINER_HEIGHT,
+        flexDirection: "row",
+        alignItems: "stretch",
+        backgroundColor: colors.backgroundColor,
+        paddingHorizontal: theme.spacing.md,
+        ...isFilled ? {
+          borderTopStartRadius: theme.shape.cornerExtraSmall,
+          borderTopEndRadius: theme.shape.cornerExtraSmall
+        } : {
+          borderRadius: theme.shape.cornerExtraSmall,
+          borderWidth: 1,
+          borderColor: colors.borderColor
+        }
+      },
+      containerFocused: isFilled ? {} : {
+        borderWidth: 2,
+        borderColor: colors.focusedBorderColor,
+        paddingHorizontal: theme.spacing.md - 1
+      },
+      containerError: isFilled ? {} : {
+        borderWidth: 2,
+        borderColor: colors.errorBorderColor,
+        paddingHorizontal: theme.spacing.md - 1
+      },
+      containerDisabled: isFilled ? { backgroundColor: colors.disabledBackgroundColor } : {
+        borderColor: colors.disabledBorderColor
+      },
+      indicator: {
+        position: "absolute",
+        start: 0,
+        end: 0,
+        bottom: 0,
+        height: 1,
+        backgroundColor: colors.borderColor
+      },
+      indicatorFocused: {
+        height: 2,
+        backgroundColor: colors.focusedBorderColor
+      },
+      indicatorError: {
+        height: 2,
+        backgroundColor: colors.errorBorderColor
+      },
+      indicatorDisabled: {
+        backgroundColor: colors.disabledBorderColor
+      },
+      inputWrapper: {
+        flex: 1,
+        justifyContent: "center"
+      },
+      // When label is present, use explicit padding so the input position
+      // matches the label resting top exactly.
+      inputWrapperWithLabel: {
+        justifyContent: "flex-start",
+        paddingTop: isFilled ? FILLED_INPUT_TOP : OUTLINED_INPUT_VERTICAL,
+        paddingBottom: isFilled ? FILLED_INPUT_BOTTOM : OUTLINED_INPUT_VERTICAL
+      },
+      label: {
+        position: "absolute",
+        zIndex: 1,
+        fontFamily: bodySmall.fontFamily,
+        fontSize: bodySmall.fontSize,
+        lineHeight: bodySmall.lineHeight,
+        fontWeight: bodySmall.fontWeight,
+        letterSpacing: bodySmall.letterSpacing,
+        color: colors.labelColor,
+        transformOrigin: transformOrigin("top")
+      },
+      labelNotch: {
+        paddingHorizontal: 4
+      },
+      input: {
+        fontFamily: bodyLarge.fontFamily,
+        fontSize: bodyLarge.fontSize,
+        lineHeight: bodyLarge.lineHeight,
+        fontWeight: bodyLarge.fontWeight,
+        letterSpacing: bodyLarge.letterSpacing,
+        color: colors.textColor,
+        paddingVertical: 0,
+        paddingHorizontal: 0,
+        margin: 0,
+        includeFontPadding: false
+      },
+      inputDisabled: {
+        color: colors.disabledTextColor
+      },
+      leadingIcon: {
+        alignSelf: "center",
+        marginStart: -4,
+        // 16dp container padding → 12dp icon inset per M3
+        marginEnd: theme.spacing.md,
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      trailingIcon: {
+        alignSelf: "center",
+        marginStart: theme.spacing.md,
+        marginEnd: -4,
+        // 16dp container padding → 12dp icon inset per M3
+        width: ICON_SIZE,
+        height: ICON_SIZE,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      trailingIconPressable: {
+        alignSelf: "center"
+      },
+      supportingTextRow: {
+        paddingHorizontal: theme.spacing.md,
+        paddingTop: theme.spacing.xs
+      },
+      supportingText: {
+        fontFamily: bodySmall.fontFamily,
+        fontSize: bodySmall.fontSize,
+        lineHeight: bodySmall.lineHeight,
+        fontWeight: bodySmall.fontWeight,
+        letterSpacing: bodySmall.letterSpacing,
+        color: colors.supportingTextColor
+      },
+      errorSupportingText: {
+        color: colors.errorSupportingTextColor
+      }
+    })
+  };
+}
+
+// src/text-field/TextField.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var ICON_SIZE2 = 24;
+var ICON_WITH_GAP = 12 + 24 + 16;
+function TextField({
+  value,
+  onChangeText,
+  label,
+  placeholder,
+  variant = "filled",
+  supportingText,
+  errorText,
+  error = false,
+  disabled = false,
+  leadingIcon,
+  trailingIcon,
+  onTrailingIconPress,
+  multiline = false,
+  onFocus,
+  onBlur,
+  style,
+  containerColor,
+  contentColor,
+  inputStyle,
+  ...textInputProps
+}) {
+  const theme = (0, import_core14.useTheme)();
+  const isDisabled = Boolean(disabled);
+  const isError = Boolean(error) || Boolean(errorText);
+  const isFilled = variant === "filled";
+  const hasLeadingIcon = Boolean(leadingIcon);
+  const { colors, styles: styles2 } = (0, import_react15.useMemo)(
+    () => createStyles9(theme, variant),
+    [theme, variant]
+  );
+  const [isFocused, setIsFocused] = (0, import_react15.useState)(false);
+  const [internalHasText, setInternalHasText] = (0, import_react15.useState)(
+    () => value !== void 0 && value !== ""
+  );
+  const inputRef = (0, import_react15.useRef)(null);
+  const isControlled = value !== void 0;
+  const hasValue = isControlled ? value !== "" : internalHasText;
+  const isLabelFloated = isFocused || hasValue;
+  const labelAnimRef = (0, import_react15.useRef)(new import_react_native26.Animated.Value(isLabelFloated ? 1 : 0));
+  const labelAnim = labelAnimRef.current;
+  (0, import_react15.useEffect)(() => {
+    import_react_native26.Animated.timing(labelAnim, {
+      toValue: isLabelFloated ? 1 : 0,
+      duration: 150,
+      useNativeDriver: import_react_native26.Platform.OS !== "web"
+    }).start();
+  }, [isLabelFloated, labelAnim]);
+  const labelScale = (0, import_react15.useMemo)(() => {
+    const restingScale = theme.typography.bodyLarge.fontSize / theme.typography.bodySmall.fontSize;
+    return labelAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [restingScale, 1]
+    });
+  }, [
+    labelAnim,
+    theme.typography.bodyLarge.fontSize,
+    theme.typography.bodySmall.fontSize
+  ]);
+  const labelTranslateY = (0, import_react15.useMemo)(() => {
+    const restingTop = isFilled ? labelPositions.filledRestingTop : labelPositions.outlinedRestingTop;
+    const floatedTop = isFilled ? labelPositions.filledFloatedTop : labelPositions.outlinedFloatedTop;
+    const restingOffset = restingTop - floatedTop;
+    return labelAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [restingOffset, 0]
+    });
+  }, [isFilled, labelAnim]);
+  const labelStart = theme.spacing.md + (hasLeadingIcon ? ICON_WITH_GAP - theme.spacing.md : 0);
+  const labelStaticTop = isFilled ? labelPositions.filledFloatedTop : labelPositions.outlinedFloatedTop;
+  const handleChangeText = (0, import_react15.useCallback)(
+    (text) => {
+      if (!isControlled) {
+        setInternalHasText(text !== "");
+      }
+      onChangeText == null ? void 0 : onChangeText(text);
+    },
+    [isControlled, onChangeText]
+  );
+  const handleFocus = (0, import_react15.useCallback)(
+    (event) => {
+      if (isDisabled) return;
+      setIsFocused(true);
+      onFocus == null ? void 0 : onFocus(event);
+    },
+    [isDisabled, onFocus]
+  );
+  const handleBlur = (0, import_react15.useCallback)(
+    (event) => {
+      setIsFocused(false);
+      onBlur == null ? void 0 : onBlur(event);
+    },
+    [onBlur]
+  );
+  const handleContainerPress = (0, import_react15.useCallback)(() => {
+    var _a;
+    if (!isDisabled) {
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    }
+  }, [isDisabled]);
+  const labelColor = isDisabled ? colors.disabledLabelColor : isError ? colors.errorLabelColor : isFocused ? colors.focusedLabelColor : colors.labelColor;
+  const labelBackgroundColor = variant === "outlined" && isLabelFloated ? theme.colors.surface : "transparent";
+  const iconColor = isDisabled ? colors.disabledIconColor : isError ? colors.errorIconColor : contentColor != null ? contentColor : colors.iconColor;
+  const containerStyle = (0, import_react15.useMemo)(
+    () => [
+      styles2.container,
+      containerColor && !isDisabled ? { backgroundColor: containerColor } : void 0,
+      isFocused && styles2.containerFocused,
+      isError && !isFocused && styles2.containerError,
+      isDisabled && styles2.containerDisabled
+    ],
+    [styles2, isFocused, isError, isDisabled, containerColor]
+  );
+  const indicatorStyle = (0, import_react15.useMemo)(
+    () => [
+      styles2.indicator,
+      isFocused && styles2.indicatorFocused,
+      isError && !isFocused && styles2.indicatorError,
+      isDisabled && styles2.indicatorDisabled
+    ],
+    [styles2, isFocused, isError, isDisabled]
+  );
+  const displaySupportingText = isError ? errorText : supportingText;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: [styles2.root, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.Pressable, { onPress: handleContainerPress, disabled: isDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_native26.View, { style: containerStyle, children: [
+      leadingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles2.leadingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_MaterialCommunityIcons6.default,
+        {
+          name: leadingIcon,
+          size: ICON_SIZE2,
+          color: iconColor
+        }
+      ) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_react_native26.View,
+        {
+          style: [
+            styles2.inputWrapper,
+            label ? styles2.inputWrapperWithLabel : void 0
+          ],
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_react_native26.TextInput,
+            {
+              ref: inputRef,
+              ...textInputProps,
+              value,
+              onChangeText: handleChangeText,
+              editable: !isDisabled,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              placeholder: isLabelFloated || !label ? placeholder : void 0,
+              placeholderTextColor: colors.placeholderColor,
+              multiline,
+              style: [
+                styles2.input,
+                isDisabled ? styles2.inputDisabled : void 0,
+                contentColor && !isDisabled ? { color: contentColor } : void 0,
+                inputStyle
+              ],
+              accessibilityLabel: label || void 0,
+              accessibilityState: { disabled: isDisabled },
+              accessibilityHint: isError && errorText ? errorText : void 0
+            }
+          )
+        }
+      ),
+      trailingIcon ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_react_native26.Pressable,
+        {
+          onPress: onTrailingIconPress,
+          disabled: isDisabled || !onTrailingIconPress,
+          accessibilityRole: "button",
+          hitSlop: 12,
+          style: styles2.trailingIconPressable,
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles2.trailingIcon, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            import_MaterialCommunityIcons6.default,
+            {
+              name: trailingIcon,
+              size: ICON_SIZE2,
+              color: iconColor
+            }
+          ) })
+        }
+      ) : null,
+      label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_react_native26.Animated.Text,
+        {
+          numberOfLines: 1,
+          style: [
+            styles2.label,
+            {
+              top: labelStaticTop,
+              start: labelStart,
+              color: labelColor,
+              backgroundColor: labelBackgroundColor,
+              transform: [
+                { translateY: labelTranslateY },
+                { scale: labelScale }
+              ]
+            },
+            variant === "outlined" && isLabelFloated ? styles2.labelNotch : void 0
+          ],
+          children: label
+        }
+      ) : null,
+      isFilled ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: indicatorStyle }) : null
+    ] }) }),
+    displaySupportingText ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native26.View, { style: styles2.supportingTextRow, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      import_react_native26.Text,
+      {
+        style: [
+          styles2.supportingText,
+          isError ? styles2.errorSupportingText : void 0
+        ],
+        children: displaySupportingText
+      }
+    ) }) : null
+  ] });
+}
+
+// src/list/List.tsx
+var import_react16 = require("react");
+var import_react_native28 = require("react-native");
+var import_core15 = require("@onlynative/core");
+
+// src/list/styles.ts
+var import_react_native27 = require("react-native");
+var ITEM_PADDING_VERTICAL = 12;
+var INSET_START = 56;
+var MIN_HEIGHT = {
+  1: 56,
+  2: 72,
+  3: 88
+};
+function createListStyles(theme) {
+  return import_react_native27.StyleSheet.create({
+    container: {
+      paddingVertical: theme.spacing.sm
+    }
+  });
+}
+function getItemColors(theme, containerColor) {
+  const base = containerColor != null ? containerColor : "transparent";
+  if (containerColor) {
+    return {
+      backgroundColor: containerColor,
+      hoveredBackgroundColor: blendColor(
+        containerColor,
+        theme.colors.onSurface,
+        theme.stateLayer.hoveredOpacity
+      ),
+      pressedBackgroundColor: blendColor(
+        containerColor,
+        theme.colors.onSurface,
+        theme.stateLayer.pressedOpacity
+      )
+    };
+  }
+  return {
+    backgroundColor: base,
+    hoveredBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.hoveredOpacity
+    ),
+    pressedBackgroundColor: alphaColor(
+      theme.colors.onSurface,
+      theme.stateLayer.pressedOpacity
+    )
+  };
+}
+function createListItemStyles(theme, lines, containerColor) {
+  const colors = getItemColors(theme, containerColor);
+  return import_react_native27.StyleSheet.create({
+    container: {
+      flexDirection: "row",
+      alignItems: lines === 3 ? "flex-start" : "center",
+      minHeight: MIN_HEIGHT[lines],
+      paddingHorizontal: theme.spacing.md,
+      paddingVertical: ITEM_PADDING_VERTICAL,
+      backgroundColor: colors.backgroundColor
+    },
+    interactiveContainer: {
+      cursor: "pointer"
+    },
+    hoveredContainer: {
+      backgroundColor: colors.hoveredBackgroundColor
+    },
+    pressedContainer: {
+      backgroundColor: colors.pressedBackgroundColor
+    },
+    disabledContainer: {
+      cursor: "auto"
+    },
+    disabledContentWrapper: {
+      flexDirection: "row",
+      flex: 1,
+      opacity: theme.stateLayer.disabledOpacity
+    },
+    leadingContent: {
+      marginEnd: theme.spacing.md
+    },
+    textBlock: {
+      flex: 1
+    },
+    overlineText: {
+      ...theme.typography.labelSmall,
+      color: theme.colors.onSurfaceVariant
+    },
+    headlineText: {
+      ...theme.typography.bodyLarge,
+      color: theme.colors.onSurface
+    },
+    supportingText: {
+      ...theme.typography.bodyMedium,
+      color: theme.colors.onSurfaceVariant
+    },
+    trailingBlock: {
+      marginStart: theme.spacing.md,
+      alignItems: "flex-end"
+    },
+    trailingSupportingText: {
+      ...theme.typography.labelSmall,
+      color: theme.colors.onSurfaceVariant
+    }
+  });
+}
+function createDividerStyles(theme, inset) {
+  return import_react_native27.StyleSheet.create({
+    divider: {
+      height: 1,
+      backgroundColor: theme.colors.outlineVariant,
+      ...inset ? { marginStart: INSET_START } : void 0
+    }
+  });
+}
+
+// src/list/List.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function List({ children, style, ...props }) {
+  const theme = (0, import_core15.useTheme)();
+  const styles2 = (0, import_react16.useMemo)(() => createListStyles(theme), [theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native28.View, { ...props, style: [styles2.container, style], children });
+}
+
+// src/list/ListItem.tsx
+var import_react17 = require("react");
+var import_react_native29 = require("react-native");
+var import_core16 = require("@onlynative/core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function getLines(supportingText, overlineText, supportingTextNumberOfLines) {
+  if (supportingText && overlineText || supportingText && supportingTextNumberOfLines && supportingTextNumberOfLines > 1) {
+    return 3;
+  }
+  if (supportingText || overlineText) return 2;
+  return 1;
+}
+function ListItem({
+  headlineText,
+  supportingText,
+  overlineText,
+  trailingSupportingText,
+  leadingContent,
+  trailingContent,
+  onPress,
+  disabled = false,
+  containerColor,
+  supportingTextNumberOfLines = 1,
+  style,
+  ...props
+}) {
+  const isDisabled = Boolean(disabled);
+  const isInteractive = onPress !== void 0;
+  const theme = (0, import_core16.useTheme)();
+  const lines = getLines(supportingText, overlineText, supportingTextNumberOfLines);
+  const styles2 = (0, import_react17.useMemo)(
+    () => createListItemStyles(theme, lines, containerColor),
+    [theme, lines, containerColor]
+  );
+  const content = /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    leadingContent != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { style: styles2.leadingContent, children: leadingContent }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native29.View, { style: styles2.textBlock, children: [
+      overlineText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles2.overlineText, numberOfLines: 1, children: overlineText }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles2.headlineText, numberOfLines: 1, children: headlineText }),
+      supportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        import_react_native29.Text,
+        {
+          style: styles2.supportingText,
+          numberOfLines: supportingTextNumberOfLines,
+          children: supportingText
+        }
+      )
+    ] }),
+    (trailingContent != null || trailingSupportingText != null) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_native29.View, { style: styles2.trailingBlock, children: [
+      trailingSupportingText != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.Text, { style: styles2.trailingSupportingText, numberOfLines: 1, children: trailingSupportingText }),
+      trailingContent
+    ] })
+  ] });
+  if (!isInteractive) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { ...props, style: [styles2.container, style], children: content });
+  }
+  const resolvedStyle = (state) => [
+    styles2.container,
+    styles2.interactiveContainer,
+    state.hovered && !state.pressed && !isDisabled ? styles2.hoveredContainer : void 0,
+    state.pressed && !isDisabled ? styles2.pressedContainer : void 0,
+    isDisabled ? styles2.disabledContainer : void 0,
+    typeof style === "function" ? style(state) : style
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_native29.Pressable,
+    {
+      ...props,
+      role: "button",
+      accessibilityState: { disabled: isDisabled },
+      hitSlop: import_react_native29.Platform.OS === "web" ? void 0 : 4,
+      disabled: isDisabled,
+      onPress,
+      style: resolvedStyle,
+      children: isDisabled ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native29.View, { style: styles2.disabledContentWrapper, children: content }) : content
+    }
+  );
+}
+
+// src/list/ListDivider.tsx
+var import_react18 = require("react");
+var import_react_native30 = require("react-native");
+var import_core17 = require("@onlynative/core");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function ListDivider({
+  inset = false,
+  style,
+  ...props
+}) {
+  const theme = (0, import_core17.useTheme)();
+  const styles2 = (0, import_react18.useMemo)(
+    () => createDividerStyles(theme, inset),
+    [theme, inset]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_native30.View, { ...props, style: [styles2.divider, style] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppBar,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  Chip,
+  Column,
+  Grid,
+  IconButton,
+  Layout,
+  List,
+  ListDivider,
+  ListItem,
+  Radio,
+  Row,
+  Switch,
+  TextField,
+  Typography
+});