@onlynative/components 0.1.0-alpha.0 → 0.1.0-alpha.2

package/README.md

@@ -8,7 +8,7 @@ Material Design 3 UI components for React Native, part of [OnlyNative UI](https:
 pnpm add @onlynative/core @onlynative/components @expo/vector-icons react-native-safe-area-context
 ```
 
-Wrap your app with `MaterialProvider` from `@onlynative/core` (see [@onlynative/core](https://www.npmjs.com/package/@onlynative/core)).
+Wrap your app with `ThemeProvider` from `@onlynative/core` (see [@onlynative/core](https://www.npmjs.com/package/@onlynative/core)).
 
 ## Import
 

package/dist/appbar/index.js

@@ -35,7 +35,7 @@ __export(appbar_exports, {
 module.exports = __toCommonJS(appbar_exports);
 
 // src/appbar/AppBar.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_react_native6 = require("react-native");
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_core4 = require("@onlynative/core");
@@ -577,7 +577,6 @@ function IconButton({
 }
 
 // src/typography/Typography.tsx
-var import_react2 = require("react");
 var import_react_native3 = require("react-native");
 var import_core2 = require("@onlynative/core");
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -600,17 +599,18 @@ function Typography({
 }) {
   const theme = (0, import_core2.useTheme)();
   const typographyStyle = theme.typography[variant];
-  const colorStyle = (0, import_react2.useMemo)(
-    () => ({ color: color != null ? color : theme.colors.onSurface }),
-    [color, theme.colors.onSurface]
-  );
   const resolvedRole = accessibilityRole != null ? accessibilityRole : HEADING_VARIANTS.has(variant) ? "header" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Component,
     {
       ...textProps,
       accessibilityRole: resolvedRole,
-      style: [typographyStyle, colorStyle, style],
+      style: [
+        { color: theme.colors.onSurface },
+        typographyStyle,
+        style,
+        color != null ? { color } : void 0
+      ],
       children
     }
   );
@@ -771,10 +771,10 @@ function AppBar({
   var _a;
   const theme = (0, import_core4.useTheme)();
   const topAppBar = (_a = theme.topAppBar) != null ? _a : import_core4.defaultTopAppBarTokens;
-  const styles = (0, import_react3.useMemo)(() => createStyles2(theme), [theme]);
-  const [leadingWidth, setLeadingWidth] = (0, import_react3.useState)(0);
-  const [actionsWidth, setActionsWidth] = (0, import_react3.useState)(0);
-  const titleColorStyle = (0, import_react3.useMemo)(
+  const styles = (0, import_react2.useMemo)(() => createStyles2(theme), [theme]);
+  const [leadingWidth, setLeadingWidth] = (0, import_react2.useState)(0);
+  const [actionsWidth, setActionsWidth] = (0, import_react2.useState)(0);
+  const titleColorStyle = (0, import_react2.useMemo)(
     () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
     [contentColor, theme.colors.onSurface]
   );
@@ -785,15 +785,15 @@ function AppBar({
   const titleStartInset = topAppBar.horizontalPadding + Math.max(topAppBar.titleStartInset, leadingWidth);
   const compactTitleEndInset = topAppBar.horizontalPadding + actionsWidth;
   const centeredSideInset = topAppBar.horizontalPadding + Math.max(leadingWidth, actionsWidth);
-  const expandedTitleInsetStyle = (0, import_react3.useMemo)(
+  const expandedTitleInsetStyle = (0, import_react2.useMemo)(
     () => ({ paddingStart: titleStartInset }),
     [titleStartInset]
   );
-  const overlayTitleInsetStyle = (0, import_react3.useMemo)(
+  const overlayTitleInsetStyle = (0, import_react2.useMemo)(
     () => isCenterAligned ? { start: centeredSideInset, end: centeredSideInset } : { start: titleStartInset, end: compactTitleEndInset },
     [centeredSideInset, compactTitleEndInset, isCenterAligned, titleStartInset]
   );
-  const leadingContent = (0, import_react3.useMemo)(() => {
+  const leadingContent = (0, import_react2.useMemo)(() => {
     if (leading) {
       return leading;
     }
@@ -819,7 +819,7 @@ function AppBar({
     styles.iconFrame,
     theme.colors.onSurface
   ]);
-  const actionsContent = (0, import_react3.useMemo)(() => {
+  const actionsContent = (0, import_react2.useMemo)(() => {
     if (trailing) {
       return trailing;
     }
@@ -846,7 +846,7 @@ function AppBar({
       `${String(action.icon)}-${index}`
     )) });
   }, [actions, contentColor, styles.actionsRow, styles.iconFrame, trailing]);
-  const onLeadingLayout = (0, import_react3.useCallback)((event) => {
+  const onLeadingLayout = (0, import_react2.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {
       if (currentWidth === nextWidth) {
@@ -855,7 +855,7 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const onActionsLayout = (0, import_react3.useCallback)((event) => {
+  const onActionsLayout = (0, import_react2.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setActionsWidth((currentWidth) => {
       if (currentWidth === nextWidth) {

package/dist/index.js

@@ -52,7 +52,6 @@ __export(index_exports, {
 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");
@@ -75,24 +74,25 @@ function Typography({
 }) {
   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],
+      style: [
+        { color: theme.colors.onSurface },
+        typographyStyle,
+        style,
+        color != null ? { color } : void 0
+      ],
       children
     }
   );
 }
 
 // src/layout/Layout.tsx
-var import_react2 = require("react");
+var import_react = 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");
@@ -126,15 +126,15 @@ function removeBackgroundColor(style) {
 }
 function Layout({ immersive, edges, children, style }) {
   const theme = (0, import_core2.useTheme)();
-  const themeBackgroundStyle = (0, import_react2.useMemo)(
+  const themeBackgroundStyle = (0, import_react.useMemo)(
     () => ({ backgroundColor: theme.colors.background }),
     [theme.colors.background]
   );
-  const styleWithoutBackground = (0, import_react2.useMemo)(
+  const styleWithoutBackground = (0, import_react.useMemo)(
     () => removeBackgroundColor(style),
     [style]
   );
-  const safeAreaEdges = (0, import_react2.useMemo)(
+  const safeAreaEdges = (0, import_react.useMemo)(
     () => resolveEdges(immersive, edges),
     [immersive, edges]
   );
@@ -149,7 +149,7 @@ function Layout({ immersive, edges, children, style }) {
 }
 
 // src/layout/Box.tsx
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_react_native3 = require("react-native");
 var import_core3 = require("@onlynative/core");
 
@@ -188,7 +188,7 @@ function Box({
   ...viewProps
 }) {
   const { spacing } = (0, import_core3.useTheme)();
-  const layoutStyle = (0, import_react3.useMemo)(() => {
+  const layoutStyle = (0, import_react2.useMemo)(() => {
     const s = (v) => resolveSpacing(spacing, v);
     return {
       ...p !== void 0 && { padding: s(p) },
@@ -253,10 +253,10 @@ function Box({
 }
 
 // src/layout/Column.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Column({ inverted = false, style, ...boxProps }) {
-  const directionStyle = (0, import_react4.useMemo)(
+  const directionStyle = (0, import_react3.useMemo)(
     () => ({
       flexDirection: inverted ? "column-reverse" : "column"
     }),
@@ -266,12 +266,12 @@ function Column({ inverted = false, style, ...boxProps }) {
 }
 
 // src/layout/Grid.tsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __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_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Row({
   wrap = false,
@@ -279,7 +279,7 @@ function Row({
   style,
   ...boxProps
 }) {
-  const directionStyle = (0, import_react5.useMemo)(
+  const directionStyle = (0, import_react4.useMemo)(
     () => ({
       flexDirection: inverted ? "row-reverse" : "row",
       ...wrap && { flexWrap: "wrap" }
@@ -304,7 +304,7 @@ function Grid({
   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)(
+  const cellStyle = (0, import_react5.useMemo)(
     () => ({
       flexBasis: `${100 / columns}%`,
       flexShrink: 1,
@@ -313,14 +313,14 @@ function Grid({
     }),
     [columns, halfGap]
   );
-  const rowStyle = (0, import_react6.useMemo)(
+  const rowStyle = (0, import_react5.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(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Row, { wrap: true, rowGap: resolvedRowGap, ...rowProps, style: [rowStyle, style], children: import_react5.default.Children.map(
     children,
     (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, { style: cellStyle, children: child }) : null
   ) });
@@ -328,7 +328,7 @@ function Grid({
 
 // src/button/Button.tsx
 var import_MaterialCommunityIcons = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react7 = require("react");
+var import_react6 = require("react");
 var import_react_native7 = require("react-native");
 var import_react_native8 = require("react-native");
 var import_react_native9 = require("react-native");
@@ -674,7 +674,7 @@ function Button({
   const hasLeading = Boolean(leadingIcon);
   const hasTrailing = Boolean(trailingIcon);
   const theme = (0, import_core5.useTheme)();
-  const styles2 = (0, import_react7.useMemo)(
+  const styles2 = (0, import_react6.useMemo)(
     () => createStyles(
       theme,
       variant,
@@ -685,14 +685,14 @@ function Button({
     ),
     [theme, variant, hasLeading, hasTrailing, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react7.useMemo)(() => {
+  const resolvedIconColor = (0, import_react6.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)(
+  const computedLabelStyle = (0, import_react6.useMemo)(
     () => [
       styles2.label,
       isDisabled ? styles2.disabledLabel : void 0,
@@ -743,7 +743,7 @@ function Button({
 
 // src/icon-button/IconButton.tsx
 var import_MaterialCommunityIcons2 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react8 = require("react");
+var import_react7 = require("react");
 var import_react_native11 = require("react-native");
 var import_core6 = require("@onlynative/core");
 
@@ -1156,7 +1156,7 @@ function IconButton({
 }) {
   var _a;
   const theme = (0, import_core6.useTheme)();
-  const styles2 = (0, import_react8.useMemo)(() => createStyles2(theme), [theme]);
+  const styles2 = (0, import_react7.useMemo)(() => createStyles2(theme), [theme]);
   const isDisabled = Boolean(disabled);
   const isToggle = selected !== void 0;
   const isSelected = Boolean(selected);
@@ -1164,7 +1164,7 @@ function IconButton({
   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)(() => {
+  const containerOverrides = (0, import_react7.useMemo)(() => {
     if (!containerColor) return null;
     const overlay = resolvedIconColor;
     return {
@@ -1232,7 +1232,7 @@ function IconButton({
 }
 
 // src/appbar/AppBar.tsx
-var import_react9 = require("react");
+var import_react8 = 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");
@@ -1395,10 +1395,10 @@ function AppBar({
   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)(
+  const styles2 = (0, import_react8.useMemo)(() => createStyles3(theme), [theme]);
+  const [leadingWidth, setLeadingWidth] = (0, import_react8.useState)(0);
+  const [actionsWidth, setActionsWidth] = (0, import_react8.useState)(0);
+  const titleColorStyle = (0, import_react8.useMemo)(
     () => ({ color: contentColor != null ? contentColor : theme.colors.onSurface }),
     [contentColor, theme.colors.onSurface]
   );
@@ -1409,15 +1409,15 @@ function AppBar({
   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)(
+  const expandedTitleInsetStyle = (0, import_react8.useMemo)(
     () => ({ paddingStart: titleStartInset }),
     [titleStartInset]
   );
-  const overlayTitleInsetStyle = (0, import_react9.useMemo)(
+  const overlayTitleInsetStyle = (0, import_react8.useMemo)(
     () => isCenterAligned ? { start: centeredSideInset, end: centeredSideInset } : { start: titleStartInset, end: compactTitleEndInset },
     [centeredSideInset, compactTitleEndInset, isCenterAligned, titleStartInset]
   );
-  const leadingContent = (0, import_react9.useMemo)(() => {
+  const leadingContent = (0, import_react8.useMemo)(() => {
     if (leading) {
       return leading;
     }
@@ -1443,7 +1443,7 @@ function AppBar({
     styles2.iconFrame,
     theme.colors.onSurface
   ]);
-  const actionsContent = (0, import_react9.useMemo)(() => {
+  const actionsContent = (0, import_react8.useMemo)(() => {
     if (trailing) {
       return trailing;
     }
@@ -1470,7 +1470,7 @@ function AppBar({
       `${String(action.icon)}-${index}`
     )) });
   }, [actions, contentColor, styles2.actionsRow, styles2.iconFrame, trailing]);
-  const onLeadingLayout = (0, import_react9.useCallback)((event) => {
+  const onLeadingLayout = (0, import_react8.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setLeadingWidth((currentWidth) => {
       if (currentWidth === nextWidth) {
@@ -1479,7 +1479,7 @@ function AppBar({
       return nextWidth;
     });
   }, []);
-  const onActionsLayout = (0, import_react9.useCallback)((event) => {
+  const onActionsLayout = (0, import_react8.useCallback)((event) => {
     const nextWidth = measureWidth(event);
     setActionsWidth((currentWidth) => {
       if (currentWidth === nextWidth) {
@@ -1572,7 +1572,7 @@ function AppBar({
 }
 
 // src/card/Card.tsx
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_react_native16 = require("react-native");
 var import_core9 = require("@onlynative/core");
 
@@ -1706,7 +1706,7 @@ function Card({
   const isDisabled = Boolean(disabled);
   const isInteractive = onPress !== void 0;
   const theme = (0, import_core9.useTheme)();
-  const styles2 = (0, import_react10.useMemo)(
+  const styles2 = (0, import_react9.useMemo)(
     () => createStyles4(theme, variant, containerColor),
     [theme, variant, containerColor]
   );
@@ -1738,7 +1738,7 @@ function Card({
 
 // src/chip/Chip.tsx
 var import_MaterialCommunityIcons3 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react11 = require("react");
+var import_react10 = require("react");
 var import_react_native18 = require("react-native");
 var import_core10 = require("@onlynative/core");
 
@@ -1969,7 +1969,7 @@ function Chip({
     variant === "input" && avatar || leadingIcon || variant === "filter" && isSelected
   );
   const theme = (0, import_core10.useTheme)();
-  const styles2 = (0, import_react11.useMemo)(
+  const styles2 = (0, import_react10.useMemo)(
     () => createStyles5(
       theme,
       variant,
@@ -1991,14 +1991,14 @@ function Chip({
       contentColor
     ]
   );
-  const resolvedIconColor = (0, import_react11.useMemo)(() => {
+  const resolvedIconColor = (0, import_react10.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)(
+  const computedLabelStyle = (0, import_react10.useMemo)(
     () => [
       styles2.label,
       isDisabled ? styles2.disabledLabel : void 0,
@@ -2081,7 +2081,7 @@ function Chip({
 
 // src/checkbox/Checkbox.tsx
 var import_MaterialCommunityIcons4 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react12 = require("react");
+var import_react11 = require("react");
 var import_react_native20 = require("react-native");
 var import_core11 = require("@onlynative/core");
 
@@ -2237,11 +2237,11 @@ function Checkbox({
   const isDisabled = Boolean(disabled);
   const isChecked = Boolean(value);
   const theme = (0, import_core11.useTheme)();
-  const styles2 = (0, import_react12.useMemo)(
+  const styles2 = (0, import_react11.useMemo)(
     () => createStyles6(theme, isChecked, containerColor, contentColor),
     [theme, isChecked, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react12.useMemo)(() => {
+  const resolvedIconColor = (0, import_react11.useMemo)(() => {
     const base = import_react_native20.StyleSheet.flatten([
       styles2.iconColor,
       isDisabled ? styles2.disabledIconColor : void 0
@@ -2286,7 +2286,7 @@ function Checkbox({
 }
 
 // src/radio/Radio.tsx
-var import_react13 = require("react");
+var import_react12 = require("react");
 var import_react_native22 = require("react-native");
 var import_core12 = require("@onlynative/core");
 
@@ -2430,7 +2430,7 @@ function Radio({
   const isDisabled = Boolean(disabled);
   const isSelected = Boolean(value);
   const theme = (0, import_core12.useTheme)();
-  const styles2 = (0, import_react13.useMemo)(
+  const styles2 = (0, import_react12.useMemo)(
     () => createStyles7(theme, isSelected, containerColor, contentColor),
     [theme, isSelected, containerColor, contentColor]
   );
@@ -2480,7 +2480,7 @@ function Radio({
 
 // src/switch/Switch.tsx
 var import_MaterialCommunityIcons5 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react14 = require("react");
+var import_react13 = require("react");
 var import_react_native24 = require("react-native");
 var import_core13 = require("@onlynative/core");
 
@@ -2652,11 +2652,11 @@ function Switch({
   const isSelected = Boolean(value);
   const hasIcon = isSelected || Boolean(unselectedIcon);
   const theme = (0, import_core13.useTheme)();
-  const styles2 = (0, import_react14.useMemo)(
+  const styles2 = (0, import_react13.useMemo)(
     () => createStyles8(theme, isSelected, hasIcon, containerColor, contentColor),
     [theme, isSelected, hasIcon, containerColor, contentColor]
   );
-  const resolvedIconColor = (0, import_react14.useMemo)(() => {
+  const resolvedIconColor = (0, import_react13.useMemo)(() => {
     const base = import_react_native24.StyleSheet.flatten([
       styles2.iconColor,
       isDisabled ? styles2.disabledIconColor : void 0
@@ -2710,7 +2710,7 @@ function Switch({
 
 // src/text-field/TextField.tsx
 var import_MaterialCommunityIcons6 = __toESM(require("@expo/vector-icons/MaterialCommunityIcons"));
-var import_react15 = require("react");
+var import_react14 = require("react");
 var import_react_native26 = require("react-native");
 var import_core14 = require("@onlynative/core");
 
@@ -2938,28 +2938,28 @@ function TextField({
   const isError = Boolean(error) || Boolean(errorText);
   const isFilled = variant === "filled";
   const hasLeadingIcon = Boolean(leadingIcon);
-  const { colors, styles: styles2 } = (0, import_react15.useMemo)(
+  const { colors, styles: styles2 } = (0, import_react14.useMemo)(
     () => createStyles9(theme, variant),
     [theme, variant]
   );
-  const [isFocused, setIsFocused] = (0, import_react15.useState)(false);
-  const [internalHasText, setInternalHasText] = (0, import_react15.useState)(
+  const [isFocused, setIsFocused] = (0, import_react14.useState)(false);
+  const [internalHasText, setInternalHasText] = (0, import_react14.useState)(
     () => value !== void 0 && value !== ""
   );
-  const inputRef = (0, import_react15.useRef)(null);
+  const inputRef = (0, import_react14.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 labelAnimRef = (0, import_react14.useRef)(new import_react_native26.Animated.Value(isLabelFloated ? 1 : 0));
   const labelAnim = labelAnimRef.current;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.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 labelScale = (0, import_react14.useMemo)(() => {
     const restingScale = theme.typography.bodyLarge.fontSize / theme.typography.bodySmall.fontSize;
     return labelAnim.interpolate({
       inputRange: [0, 1],
@@ -2970,7 +2970,7 @@ function TextField({
     theme.typography.bodyLarge.fontSize,
     theme.typography.bodySmall.fontSize
   ]);
-  const labelTranslateY = (0, import_react15.useMemo)(() => {
+  const labelTranslateY = (0, import_react14.useMemo)(() => {
     const restingTop = isFilled ? labelPositions.filledRestingTop : labelPositions.outlinedRestingTop;
     const floatedTop = isFilled ? labelPositions.filledFloatedTop : labelPositions.outlinedFloatedTop;
     const restingOffset = restingTop - floatedTop;
@@ -2981,7 +2981,7 @@ function TextField({
   }, [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)(
+  const handleChangeText = (0, import_react14.useCallback)(
     (text) => {
       if (!isControlled) {
         setInternalHasText(text !== "");
@@ -2990,7 +2990,7 @@ function TextField({
     },
     [isControlled, onChangeText]
   );
-  const handleFocus = (0, import_react15.useCallback)(
+  const handleFocus = (0, import_react14.useCallback)(
     (event) => {
       if (isDisabled) return;
       setIsFocused(true);
@@ -2998,14 +2998,14 @@ function TextField({
     },
     [isDisabled, onFocus]
   );
-  const handleBlur = (0, import_react15.useCallback)(
+  const handleBlur = (0, import_react14.useCallback)(
     (event) => {
       setIsFocused(false);
       onBlur == null ? void 0 : onBlur(event);
     },
     [onBlur]
   );
-  const handleContainerPress = (0, import_react15.useCallback)(() => {
+  const handleContainerPress = (0, import_react14.useCallback)(() => {
     var _a;
     if (!isDisabled) {
       (_a = inputRef.current) == null ? void 0 : _a.focus();
@@ -3014,7 +3014,7 @@ function TextField({
   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)(
+  const containerStyle = (0, import_react14.useMemo)(
     () => [
       styles2.container,
       containerColor && !isDisabled ? { backgroundColor: containerColor } : void 0,
@@ -3024,7 +3024,7 @@ function TextField({
     ],
     [styles2, isFocused, isError, isDisabled, containerColor]
   );
-  const indicatorStyle = (0, import_react15.useMemo)(
+  const indicatorStyle = (0, import_react14.useMemo)(
     () => [
       styles2.indicator,
       isFocused && styles2.indicatorFocused,
@@ -3132,7 +3132,7 @@ function TextField({
 }
 
 // src/list/List.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 var import_react_native28 = require("react-native");
 var import_core15 = require("@onlynative/core");
 
@@ -3251,12 +3251,12 @@ function createDividerStyles(theme, inset) {
 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]);
+  const styles2 = (0, import_react15.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_react16 = require("react");
 var import_react_native29 = require("react-native");
 var import_core16 = require("@onlynative/core");
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -3285,7 +3285,7 @@ function ListItem({
   const isInteractive = onPress !== void 0;
   const theme = (0, import_core16.useTheme)();
   const lines = getLines(supportingText, overlineText, supportingTextNumberOfLines);
-  const styles2 = (0, import_react17.useMemo)(
+  const styles2 = (0, import_react16.useMemo)(
     () => createListItemStyles(theme, lines, containerColor),
     [theme, lines, containerColor]
   );
@@ -3335,7 +3335,7 @@ function ListItem({
 }
 
 // src/list/ListDivider.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 var import_react_native30 = require("react-native");
 var import_core17 = require("@onlynative/core");
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -3345,7 +3345,7 @@ function ListDivider({
   ...props
 }) {
   const theme = (0, import_core17.useTheme)();
-  const styles2 = (0, import_react18.useMemo)(
+  const styles2 = (0, import_react17.useMemo)(
     () => createDividerStyles(theme, inset),
     [theme, inset]
   );

package/dist/layout/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { StyleProp, ViewStyle, ViewProps, FlexAlignType } from 'react-native';
 import { Edge } from 'react-native-safe-area-context';
-import { Theme } from '@onlynative/core';
+import { MaterialTheme } from '@onlynative/core';
 
 interface LayoutProps extends PropsWithChildren {
     /**
@@ -18,7 +18,7 @@ interface LayoutProps extends PropsWithChildren {
 declare function Layout({ immersive, edges, children, style }: LayoutProps): react_jsx_runtime.JSX.Element;
 
 /** A theme spacing token name or a raw numeric value in dp. */
-type SpacingValue = keyof Theme['spacing'] | number;
+type SpacingValue = keyof MaterialTheme['spacing'] | number;
 interface BoxProps extends ViewProps {
     /** Padding on all sides */
     p?: SpacingValue;

package/dist/typography/index.d.ts

@@ -13,9 +13,9 @@ interface TypographyProps extends Omit<TextProps, 'children' | 'style'> {
      * @default 'bodyMedium'
      */
     variant?: TypographyVariant;
-    /** Override the text color. Defaults to the theme's `onSurface` color. */
+    /** Override the text color. Takes priority over `style.color`. Defaults to the theme's `onSurface` color. */
     color?: string;
-    /** Additional text styles merged after the theme typography styles. */
+    /** Additional text styles. Can override the default theme color via `style.color` when no `color` prop is set. */
     style?: StyleProp<TextStyle>;
     /**
      * Override the underlying text component (e.g. Animated.Text).

package/dist/typography/index.js

@@ -25,7 +25,6 @@ __export(typography_exports, {
 module.exports = __toCommonJS(typography_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");
@@ -48,17 +47,18 @@ function Typography({
 }) {
   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],
+      style: [
+        { color: theme.colors.onSurface },
+        typographyStyle,
+        style,
+        color != null ? { color } : void 0
+      ],
       children
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onlynative/components",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Material Design 3 UI components for React Native — Button, Card, Chip, TextField, and more.",
   "private": false,
   "sideEffects": false,
@@ -117,7 +117,8 @@
     }
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "files": [
     "dist",
@@ -145,11 +146,16 @@
   },
   "peerDependencies": {
     "@expo/vector-icons": ">=14.0.0",
-    "@onlynative/core": ">=0.1.0-alpha.0",
+    "@onlynative/core": ">=0.1.0-alpha.2",
     "react": ">=18.0.0",
     "react-native": ">=0.72.0",
     "react-native-safe-area-context": ">=4.0.0"
   },
+  "peerDependenciesMeta": {
+    "@expo/vector-icons": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@react-native/babel-preset": "^0.81.5",
     "@onlynative/core": "workspace:*",

package/src/appbar/styles.ts

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native'
 import { defaultTopAppBarTokens } from '@onlynative/core'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
-export function createStyles(theme: Theme) {
+export function createStyles(theme: MaterialTheme) {
   const topAppBar = theme.topAppBar ?? defaultTopAppBarTokens
 
   return StyleSheet.create({

package/src/button/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { ButtonVariant } from './types'
 import { alphaColor, blendColor } from '../utils/color'
@@ -17,7 +17,7 @@ interface VariantColors {
   disabledBorderColor: string
 }
 
-function getVariantColors(theme: Theme, variant: ButtonVariant): VariantColors {
+function getVariantColors(theme: MaterialTheme, variant: ButtonVariant): VariantColors {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
   const disabledLabelColor = alphaColor(theme.colors.onSurface, 0.38)
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
@@ -129,7 +129,7 @@ function getVariantColors(theme: Theme, variant: ButtonVariant): VariantColors {
 }
 
 function getHorizontalPadding(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: ButtonVariant,
   hasLeadingIcon: boolean,
   hasTrailingIcon: boolean,
@@ -154,7 +154,7 @@ function getHorizontalPadding(
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: VariantColors,
   containerColor?: string,
   contentColor?: string,
@@ -209,7 +209,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: ButtonVariant,
   hasLeadingIcon: boolean,
   hasTrailingIcon: boolean,

package/src/card/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { CardVariant } from './types'
 import { alphaColor, blendColor } from '../utils/color'
@@ -15,7 +15,7 @@ interface VariantColors {
   disabledBorderColor: string
 }
 
-function getVariantColors(theme: Theme, variant: CardVariant): VariantColors {
+function getVariantColors(theme: MaterialTheme, variant: CardVariant): VariantColors {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
 
@@ -78,7 +78,7 @@ function getVariantColors(theme: Theme, variant: CardVariant): VariantColors {
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: VariantColors,
   containerColor?: string,
 ): VariantColors {
@@ -103,7 +103,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: CardVariant,
   containerColor?: string,
 ) {

package/src/checkbox/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import { alphaColor, blendColor } from '../utils/color'
 
@@ -16,7 +16,7 @@ interface BoxColors {
   disabledIconColor: string
 }
 
-function getColors(theme: Theme, checked: boolean): BoxColors {
+function getColors(theme: MaterialTheme, checked: boolean): BoxColors {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
 
   if (checked) {
@@ -63,7 +63,7 @@ function getColors(theme: Theme, checked: boolean): BoxColors {
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: BoxColors,
   containerColor?: string,
   contentColor?: string,
@@ -96,7 +96,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   checked: boolean,
   containerColor?: string,
   contentColor?: string,

package/src/chip/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { ChipVariant } from './types'
 import { alphaColor, blendColor } from '../utils/color'
@@ -18,7 +18,7 @@ interface VariantColors {
 }
 
 function getVariantColors(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: ChipVariant,
   elevated: boolean,
   selected: boolean,
@@ -106,7 +106,7 @@ function getVariantColors(
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: VariantColors,
   containerColor?: string,
   contentColor?: string,
@@ -161,7 +161,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: ChipVariant,
   elevated: boolean,
   selected: boolean,

package/src/icon-button/styles.ts

@@ -1,8 +1,8 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 import { alphaColor, blendColor } from '../utils/color'
 
-export function createStyles(theme: Theme) {
+export function createStyles(theme: MaterialTheme) {
   const disabledContainerColor = alphaColor(theme.colors.onSurface, 0.12)
   const disabledOutlineColor = alphaColor(theme.colors.onSurface, 0.12)
   const toggleUnselectedContainerColor = theme.colors.surfaceContainerHighest

package/src/layout/resolveSpacing.ts

@@ -1,8 +1,8 @@
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 import type { SpacingValue } from './types'
 
 export function resolveSpacing(
-  spacing: Theme['spacing'],
+  spacing: MaterialTheme['spacing'],
   value: SpacingValue | undefined,
 ): number | undefined {
   if (value === undefined) return undefined

package/src/layout/types.ts

@@ -1,8 +1,8 @@
 import type { FlexAlignType, ViewProps } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 /** A theme spacing token name or a raw numeric value in dp. */
-export type SpacingValue = keyof Theme['spacing'] | number
+export type SpacingValue = keyof MaterialTheme['spacing'] | number
 
 export interface BoxProps extends ViewProps {
   /** Padding on all sides */

package/src/list/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { ListItemLines } from './types'
 import { alphaColor, blendColor } from '../utils/color'
@@ -13,7 +13,7 @@ const MIN_HEIGHT: Record<ListItemLines, number> = {
   3: 88,
 }
 
-export function createListStyles(theme: Theme) {
+export function createListStyles(theme: MaterialTheme) {
   return StyleSheet.create({
     container: {
       paddingVertical: theme.spacing.sm,
@@ -27,7 +27,7 @@ interface ItemColors {
   pressedBackgroundColor: string
 }
 
-function getItemColors(theme: Theme, containerColor?: string): ItemColors {
+function getItemColors(theme: MaterialTheme, containerColor?: string): ItemColors {
   const base = containerColor ?? 'transparent'
 
   if (containerColor) {
@@ -60,7 +60,7 @@ function getItemColors(theme: Theme, containerColor?: string): ItemColors {
 }
 
 export function createListItemStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   lines: ListItemLines,
   containerColor?: string,
 ) {
@@ -121,7 +121,7 @@ export function createListItemStyles(
   })
 }
 
-export function createDividerStyles(theme: Theme, inset: boolean) {
+export function createDividerStyles(theme: MaterialTheme, inset: boolean) {
   return StyleSheet.create({
     divider: {
       height: 1,

package/src/radio/styles.ts

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
-import { alphaColor, blendColor } from '../utils/color'
+import { alphaColor } from '../utils/color'
 
 interface RadioColors {
   borderColor: string
@@ -12,7 +12,7 @@ interface RadioColors {
   disabledDotColor: string
 }
 
-function getColors(theme: Theme, selected: boolean): RadioColors {
+function getColors(theme: MaterialTheme, selected: boolean): RadioColors {
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
 
   if (selected) {
@@ -49,7 +49,7 @@ function getColors(theme: Theme, selected: boolean): RadioColors {
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: RadioColors,
   containerColor?: string,
   contentColor?: string,
@@ -79,7 +79,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   selected: boolean,
   containerColor?: string,
   contentColor?: string,

package/src/switch/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import { alphaColor, blendColor } from '../utils/color'
 
@@ -17,7 +17,7 @@ interface TrackColors {
   disabledBorderWidth: number
 }
 
-function getColors(theme: Theme, selected: boolean): TrackColors {
+function getColors(theme: MaterialTheme, selected: boolean): TrackColors {
   const disabledOnSurface12 = alphaColor(theme.colors.onSurface, 0.12)
   const disabledOnSurface38 = alphaColor(theme.colors.onSurface, 0.38)
 
@@ -69,7 +69,7 @@ function getColors(theme: Theme, selected: boolean): TrackColors {
 }
 
 function applyColorOverrides(
-  theme: Theme,
+  theme: MaterialTheme,
   colors: TrackColors,
   containerColor?: string,
   contentColor?: string,
@@ -106,7 +106,7 @@ function applyColorOverrides(
 }
 
 export function createStyles(
-  theme: Theme,
+  theme: MaterialTheme,
   selected: boolean,
   hasIcon: boolean,
   containerColor?: string,

package/src/test-utils/render-with-theme.tsx

@@ -1,13 +1,13 @@
 import { render, type RenderOptions } from '@testing-library/react-native'
 import type { ReactElement } from 'react'
-import { MaterialProvider } from '@onlynative/core'
+import { ThemeProvider } from '@onlynative/core'
 
 export function renderWithTheme(
   ui: ReactElement,
   options?: Omit<RenderOptions, 'wrapper'>,
 ) {
   return render(ui, {
-    wrapper: ({ children }) => <MaterialProvider>{children}</MaterialProvider>,
+    wrapper: ({ children }) => <ThemeProvider>{children}</ThemeProvider>,
     ...options,
   })
 }

package/src/text-field/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { TextFieldVariant } from './types'
 import { alphaColor } from '../utils/color'
@@ -51,7 +51,7 @@ interface VariantColors {
 }
 
 function getVariantColors(
-  theme: Theme,
+  theme: MaterialTheme,
   variant: TextFieldVariant,
 ): VariantColors {
   const disabledOpacity = theme.stateLayer.disabledOpacity
@@ -92,7 +92,7 @@ function getVariantColors(
   }
 }
 
-export function createStyles(theme: Theme, variant: TextFieldVariant) {
+export function createStyles(theme: MaterialTheme, variant: TextFieldVariant) {
   const colors = getVariantColors(theme, variant)
   const bodyLarge = theme.typography.bodyLarge
   const bodySmall = theme.typography.bodySmall

package/src/typography/Typography.tsx

@@ -1,9 +1,8 @@
-import { useMemo } from 'react'
 import type { ComponentType, ReactNode } from 'react'
 import type { StyleProp, TextProps, TextStyle } from 'react-native'
 import { Text } from 'react-native'
 import { useTheme } from '@onlynative/core'
-import type { Theme } from '@onlynative/core'
+import type { MaterialTheme } from '@onlynative/core'
 
 import type { TypographyVariant } from './types'
 
@@ -24,9 +23,9 @@ export interface TypographyProps extends Omit<TextProps, 'children' | 'style'> {
    * @default 'bodyMedium'
    */
   variant?: TypographyVariant
-  /** Override the text color. Defaults to the theme's `onSurface` color. */
+  /** Override the text color. Takes priority over `style.color`. Defaults to the theme's `onSurface` color. */
   color?: string
-  /** Additional text styles merged after the theme typography styles. */
+  /** Additional text styles. Can override the default theme color via `style.color` when no `color` prop is set. */
   style?: StyleProp<TextStyle>
   /**
    * Override the underlying text component (e.g. Animated.Text).
@@ -44,12 +43,8 @@ export function Typography({
   accessibilityRole,
   ...textProps
 }: TypographyProps) {
-  const theme = useTheme() as Theme
+  const theme = useTheme() as MaterialTheme
   const typographyStyle = theme.typography[variant]
-  const colorStyle = useMemo(
-    () => ({ color: color ?? theme.colors.onSurface }),
-    [color, theme.colors.onSurface],
-  )
   const resolvedRole =
     accessibilityRole ?? (HEADING_VARIANTS.has(variant) ? 'header' : undefined)
 
@@ -57,7 +52,12 @@ export function Typography({
     <Component
       {...textProps}
       accessibilityRole={resolvedRole}
-      style={[typographyStyle, colorStyle, style]}
+      style={[
+        { color: theme.colors.onSurface },
+        typographyStyle,
+        style,
+        color != null ? { color } : undefined,
+      ]}
     >
       {children}
     </Component>