@rific/auto-paper 0.1.2 → 0.1.3

package/README.md

@@ -8,6 +8,7 @@ Adaptive theming for [`react-native-paper`](https://callstack.github.io/react-na
 - System/light/dark appearance with live updates via `Appearance` API
 - Tinted surface, surfaceVariant, outline, and elevation levels derived from the seed
 - Optional Redux slice for wiring appearance and color into your store
+- Wrapper components (`Button`, `Chip`, `FAB`, `IconButton`, `TextInput`) with prop defaults via context
 - All color utilities exported for standalone use
 
 ## Installation
@@ -49,6 +50,29 @@ export default function App() {
 </AutoPaperProvider>
 ```
 
+### With component defaults
+
+Pass a `defaults` object to `Provider` to set prop defaults for any of the included wrapper components. Each component merges defaults under its own props, so per-instance props always win:
+
+```tsx
+import { Button, Chip, Provider as AutoPaperProvider } from '@rific/auto-paper'
+
+<AutoPaperProvider
+  appearance={appearance}
+  color={color}
+  defaults={{
+    Button: { mode: 'contained' },
+    Chip: { compact: true },
+  }}
+>
+  <Button>Save</Button>       {/* mode="contained" from defaults */}
+  <Button mode="text">Cancel</Button>  {/* overrides default */}
+  <Chip>Tag</Chip>            {/* compact=true from defaults */}
+</AutoPaperProvider>
+```
+
+Available wrapper components: `Button`, `Chip`, `FAB`, `IconButton`, `TextInput`. Each is a thin wrapper around the matching `react-native-paper` component and accepts the same props.
+
 ### With Redux
 
 The package exports an optional Redux slice. Use `createThemeReducer` to register it in your store with a custom initial color:
@@ -132,6 +156,7 @@ export default function App() {
 | `appearance` | `'system' \| 'light' \| 'dark'` | Appearance mode |
 | `color` | `string` | Seed color (hex, rgb, or CSS name) |
 | `children` | `ReactNode` | |
+| `defaults` | `PaperDefaults` | Prop defaults for wrapper components (see below) |
 | `onReady` | `() => void` | Called once when the theme first resolves |
 | `statusBarProps` | `StatusBarProps` | Spread over the auto-derived `StatusBar` defaults |
 | `style` | `StyleProp<ViewStyle>` | Applied to the wrapper `View` |
@@ -144,6 +169,28 @@ Returns `MD3Theme | null`. `null` on the first render while the theme computes.
 const theme = useComputedTheme('system', '#6750a4')
 ```
 
+### `PaperDefaults` / `usePaperDefaults`
+
+`PaperDefaults` is the type for the `defaults` prop on `Provider`:
+
+```ts
+type PaperDefaults = {
+  Button?: Partial<ButtonProps>
+  Chip?: Partial<ChipProps>
+  FAB?: Partial<FABProps>
+  IconButton?: Partial<IconButtonProps>
+  TextInput?: Partial<TextInputProps>
+}
+```
+
+Use `usePaperDefaults` if you need to read the defaults in a custom component:
+
+```ts
+import { usePaperDefaults } from '@rific/auto-paper'
+
+const defaults = usePaperDefaults()
+```
+
 ### `createThemeReducer(initialState?)`
 
 Returns a Redux reducer with an optional initial state override. Useful for setting a custom default color without dispatching an action at startup.

package/dist/index.d.mts

@@ -1,10 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps, MD3Theme } from 'react-native-paper';
+export { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TextInput as TextInput$1, StatusBarProps, StyleProp, ViewStyle } from 'react-native';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as redux from 'redux';
-import { MD3Theme } from 'react-native-paper';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function Chip(props: ChipProps): react_jsx_runtime.JSX.Element;
+
+declare function FAB(props: FABProps): react_jsx_runtime.JSX.Element;
+
+declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
+
+type PaperDefaults = {
+    Button?: Partial<ButtonProps>;
+    Chip?: Partial<ChipProps>;
+    FAB?: Partial<FABProps>;
+    IconButton?: Partial<IconButtonProps>;
+    TextInput?: Partial<TextInputProps>;
+};
+declare function usePaperDefaults(): PaperDefaults;
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
 declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
@@ -39,11 +60,12 @@ type ProviderProps = {
     appearance: ThemeAppearance;
     color: string;
     children: ReactNode;
+    defaults?: PaperDefaults;
     onReady?: () => void;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ appearance, color, children, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -66,4 +88,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Provider, type ProviderProps, type RGB, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };
+export { Button, Chip, FAB, IconButton, type PaperDefaults, Provider, type ProviderProps, type RGB, TextInput, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme, usePaperDefaults };

package/dist/index.d.ts

@@ -1,10 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps, MD3Theme } from 'react-native-paper';
+export { ButtonProps, ChipProps, FABProps, IconButtonProps, TextInputProps } from 'react-native-paper';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TextInput as TextInput$1, StatusBarProps, StyleProp, ViewStyle } from 'react-native';
 import * as _reduxjs_toolkit from '@reduxjs/toolkit';
 import { PayloadAction } from '@reduxjs/toolkit';
 import * as redux from 'redux';
-import { MD3Theme } from 'react-native-paper';
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { StatusBarProps, StyleProp, ViewStyle } from 'react-native';
+
+declare function Button(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function Chip(props: ChipProps): react_jsx_runtime.JSX.Element;
+
+declare function FAB(props: FABProps): react_jsx_runtime.JSX.Element;
+
+declare function IconButton(props: IconButtonProps): react_jsx_runtime.JSX.Element;
+
+declare const TextInput: react.ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & react.RefAttributes<TextInput$1>>;
+
+type PaperDefaults = {
+    Button?: Partial<ButtonProps>;
+    Chip?: Partial<ChipProps>;
+    FAB?: Partial<FABProps>;
+    IconButton?: Partial<IconButtonProps>;
+    TextInput?: Partial<TextInputProps>;
+};
+declare function usePaperDefaults(): PaperDefaults;
 
 type ThemeAppearance = 'system' | 'light' | 'dark';
 declare function useComputedTheme(appearance: ThemeAppearance, color: string): MD3Theme | null;
@@ -39,11 +60,12 @@ type ProviderProps = {
     appearance: ThemeAppearance;
     color: string;
     children: ReactNode;
+    defaults?: PaperDefaults;
     onReady?: () => void;
     statusBarProps?: StatusBarProps;
     style?: StyleProp<ViewStyle>;
 };
-declare function Provider({ appearance, color, children, onReady, statusBarProps, style }: ProviderProps): react.JSX.Element | null;
+declare function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }: ProviderProps): react_jsx_runtime.JSX.Element | null;
 
 declare const getBlendedColor: (foreground: string, background: string, alpha: number) => string;
 
@@ -66,4 +88,4 @@ declare function getTriadicPalette(primaryColor: string): TriadicPalette;
 
 declare const isDarkColor: (value: string) => boolean;
 
-export { Provider, type ProviderProps, type RGB, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme };
+export { Button, Chip, FAB, IconButton, type PaperDefaults, Provider, type ProviderProps, type RGB, TextInput, type ThemeAppearance, type ThemeState, type TriadicPalette, createThemeReducer, getBlendedColor, getHex, getRgb, getTriadicPalette, isDarkColor, selectThemeAppearance, selectThemeColor, themeActions, themeReducer, useComputedTheme, usePaperDefaults };

package/dist/index.js

@@ -22,7 +22,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Button: () => Button,
+  Chip: () => Chip,
+  FAB: () => FAB,
+  IconButton: () => IconButton,
   Provider: () => Provider,
+  TextInput: () => TextInput,
   createThemeReducer: () => createThemeReducer,
   getBlendedColor: () => getBlendedColor,
   getHex: () => getHex,
@@ -33,10 +38,61 @@ __export(index_exports, {
   selectThemeColor: () => selectThemeColor,
   themeActions: () => themeActions,
   themeReducer: () => themeReducer,
-  useComputedTheme: () => useComputedTheme
+  useComputedTheme: () => useComputedTheme,
+  usePaperDefaults: () => usePaperDefaults
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/components/Button.tsx
+var import_react_native_paper = require("react-native-paper");
+
+// src/PaperDefaultsContext.tsx
+var import_react = require("react");
+var PaperDefaultsContext = (0, import_react.createContext)({});
+function usePaperDefaults() {
+  return (0, import_react.useContext)(PaperDefaultsContext);
+}
+
+// src/components/Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function Button(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Button, { ...defaults.Button, ...props });
+}
+
+// src/components/Chip.tsx
+var import_react_native_paper2 = require("react-native-paper");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Chip(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Chip, { ...defaults.Chip, ...props });
+}
+
+// src/components/FAB.tsx
+var import_react_native_paper3 = require("react-native-paper");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FAB(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.FAB, { ...defaults.FAB, ...props });
+}
+
+// src/components/IconButton.tsx
+var import_react_native_paper4 = require("react-native-paper");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function IconButton(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.IconButton, { ...defaults.IconButton, ...props });
+}
+
+// src/components/TextInput.tsx
+var import_react2 = require("react");
+var import_react_native_paper5 = require("react-native-paper");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TextInput = (0, import_react2.forwardRef)(function TextInput2(props, ref) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper5.TextInput, { ref, ...defaults.TextInput, ...props });
+});
+
 // node_modules/redux/dist/redux.mjs
 var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
 var ActionTypes = {
@@ -1603,14 +1659,14 @@ var selectThemeAppearance = (state) => state.appearance;
 var selectThemeColor = (state) => state.color;
 
 // src/ThemeProvider.tsx
-var import_react2 = require("react");
+var import_react4 = require("react");
 var import_react_native2 = require("react-native");
-var import_react_native_paper2 = require("react-native-paper");
+var import_react_native_paper7 = require("react-native-paper");
 
 // src/useComputedTheme.ts
-var import_react = require("react");
+var import_react3 = require("react");
 var import_react_native = require("react-native");
-var import_react_native_paper = require("react-native-paper");
+var import_react_native_paper6 = require("react-native-paper");
 
 // src/utils/colorNames.ts
 var colorNames = {
@@ -1921,12 +1977,12 @@ var isDarkColor = (value) => {
 
 // src/useComputedTheme.ts
 function useComputedTheme(appearance, color) {
-  const [theme, setTheme] = (0, import_react.useState)(null);
-  const computeTheme = (0, import_react.useCallback)(() => {
+  const [theme, setTheme] = (0, import_react3.useState)(null);
+  const computeTheme = (0, import_react3.useCallback)(() => {
     let resolved = appearance;
     if (resolved === "system") resolved = import_react_native.Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
-    const base = resolved === "dark" ? import_react_native_paper.MD3DarkTheme : import_react_native_paper.MD3LightTheme;
+    const base = resolved === "dark" ? import_react_native_paper6.MD3DarkTheme : import_react_native_paper6.MD3LightTheme;
     const _theme = {
       ...base,
       colors: {
@@ -1965,10 +2021,10 @@ function useComputedTheme(appearance, color) {
     };
     setTheme(_theme);
   }, [appearance, color]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const subscription = import_react_native.Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
@@ -1976,24 +2032,33 @@ function useComputedTheme(appearance, color) {
 }
 
 // src/ThemeProvider.tsx
-function Provider({ appearance, color, children, onReady, statusBarProps, style }) {
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }) {
   const theme = useComputedTheme(appearance, color);
-  const called = (0, import_react2.useRef)(false);
-  (0, import_react2.useEffect)(() => {
+  const called = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     if (theme && !called.current) {
       called.current = true;
       onReady?.();
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ React.createElement(import_react_native_paper2.Provider, { theme }, /* @__PURE__ */ React.createElement(import_react_native2.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }), /* @__PURE__ */ React.createElement(import_react_native2.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style] }, children));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native_paper7.Provider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) })
+  ] });
 }
 var styles = import_react_native2.StyleSheet.create({
   flex: { flex: 1 }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Button,
+  Chip,
+  FAB,
+  IconButton,
   Provider,
+  TextInput,
   createThemeReducer,
   getBlendedColor,
   getHex,
@@ -2004,5 +2069,6 @@ var styles = import_react_native2.StyleSheet.create({
   selectThemeColor,
   themeActions,
   themeReducer,
-  useComputedTheme
+  useComputedTheme,
+  usePaperDefaults
 });

package/dist/index.mjs

@@ -2,6 +2,56 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
+// src/components/Button.tsx
+import { Button as PaperButton } from "react-native-paper";
+
+// src/PaperDefaultsContext.tsx
+import { createContext, useContext } from "react";
+var PaperDefaultsContext = createContext({});
+function usePaperDefaults() {
+  return useContext(PaperDefaultsContext);
+}
+
+// src/components/Button.tsx
+import { jsx } from "react/jsx-runtime";
+function Button(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx(PaperButton, { ...defaults.Button, ...props });
+}
+
+// src/components/Chip.tsx
+import { Chip as PaperChip } from "react-native-paper";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Chip(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx2(PaperChip, { ...defaults.Chip, ...props });
+}
+
+// src/components/FAB.tsx
+import { FAB as PaperFAB } from "react-native-paper";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FAB(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx3(PaperFAB, { ...defaults.FAB, ...props });
+}
+
+// src/components/IconButton.tsx
+import { IconButton as PaperIconButton } from "react-native-paper";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function IconButton(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx4(PaperIconButton, { ...defaults.IconButton, ...props });
+}
+
+// src/components/TextInput.tsx
+import { forwardRef } from "react";
+import { TextInput as PaperTextInput } from "react-native-paper";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var TextInput = forwardRef(function TextInput2(props, ref) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ jsx5(PaperTextInput, { ref, ...defaults.TextInput, ...props });
+});
+
 // node_modules/redux/dist/redux.mjs
 var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
 var ActionTypes = {
@@ -1941,7 +1991,8 @@ function useComputedTheme(appearance, color) {
 }
 
 // src/ThemeProvider.tsx
-function Provider({ appearance, color, children, onReady, statusBarProps, style }) {
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }) {
   const theme = useComputedTheme(appearance, color);
   const called = useRef(false);
   useEffect2(() => {
@@ -1951,13 +2002,21 @@ function Provider({ appearance, color, children, onReady, statusBarProps, style
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ React.createElement(PaperProvider, { theme }, /* @__PURE__ */ React.createElement(StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }), /* @__PURE__ */ React.createElement(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style] }, children));
+  return /* @__PURE__ */ jsxs(PaperProvider, { theme, children: [
+    /* @__PURE__ */ jsx6(StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    /* @__PURE__ */ jsx6(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ jsx6(View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) })
+  ] });
 }
 var styles = StyleSheet.create({
   flex: { flex: 1 }
 });
 export {
+  Button,
+  Chip,
+  FAB,
+  IconButton,
   Provider,
+  TextInput,
   createThemeReducer,
   getBlendedColor,
   getHex,
@@ -1968,5 +2027,6 @@ export {
   selectThemeColor,
   themeActions,
   themeReducer,
-  useComputedTheme
+  useComputedTheme,
+  usePaperDefaults
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",