@grundtone/react-native 2.0.1

package/README.md

@@ -0,0 +1,78 @@
+# @grundtone/react-native
+
+React Native theme provider and hooks for the [Grundtone](https://grundtone.com) design system. Uses
+the same semantic tokens as the web packages.
+
+## Installation
+
+```bash
+npm install @grundtone/react-native @grundtone/core
+```
+
+You do **not** need `@grundtone/design-system` - that package is web-only (SCSS/CSS). For React
+Native, tokens are delivered via the theme object.
+
+## Usage
+
+### 1. Wrap your app
+
+```tsx
+import { GrundtoneThemeProvider } from '@grundtone/react-native';
+import { createTheme } from '@grundtone/core';
+
+const { light, dark } = createTheme({
+  light: {
+    colors: { primary: '#007aff', background: '#ffffff', text: '#1c1c1e' },
+  },
+  dark: {
+    colors: { primary: '#0a84ff', background: '#000000', text: '#ffffff' },
+  },
+});
+
+export default function App() {
+  return (
+    <GrundtoneThemeProvider light={light} dark={dark}>
+      <RootNavigator />
+    </GrundtoneThemeProvider>
+  );
+}
+```
+
+### 2. Use the theme
+
+```tsx
+import { useGrundtoneTheme } from '@grundtone/react-native';
+
+function MyScreen() {
+  const { theme, mode, setMode, isDark } = useGrundtoneTheme();
+
+  return (
+    <View style={{ backgroundColor: theme.colors.background, flex: 1 }}>
+      <Text style={{ color: theme.colors.text }}>Hello</Text>
+    </View>
+  );
+}
+```
+
+### Toggle theme
+
+```tsx
+const { setMode } = useGrundtoneTheme();
+setMode('dark');
+```
+
+By default, the provider follows the system color scheme.
+
+## Utilities
+
+- `shadowToRN(shadow)` - Convert web shadow values to React Native shadow styles
+- `createBranding()` - Create branding configuration
+- `getLogoSource()` - Get logo asset for current theme
+
+## Documentation
+
+See [grundtone.com](https://grundtone.com) for full API reference.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,158 @@
+import React, { ReactNode } from 'react';
+import { Theme, ThemeMode, ShadowLayer, IconDefinition, IconRegistry, ToggleSize, BrandingConfig } from '@grundtone/core';
+export { BrandingConfig, IconDefinition, IconRegistry, LOGO_VARIANT_SIZES, LogoVariants, Theme, ThemeMode, ToggleSize, createBranding, createTheme, defaultBranding } from '@grundtone/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Validator, ValidationResult } from '@grundtone/utils';
+export { ValidationResult, Validator, composeValidators, cpr, cvr, email, maxLength, minLength, pattern, phone, required, url } from '@grundtone/utils';
+import { ImageSourcePropType } from 'react-native';
+
+interface GrundtoneThemeContextValue {
+    theme: Theme;
+    mode: ThemeMode;
+    isDark: boolean;
+    setMode: (mode: ThemeMode) => void;
+}
+declare const GrundtoneThemeContext: React.Context<GrundtoneThemeContextValue | undefined>;
+interface GrundtoneThemeProviderProps {
+    light: Theme;
+    dark: Theme;
+    defaultMode?: ThemeMode;
+    mode?: ThemeMode;
+    children: React.ReactNode;
+}
+declare function GrundtoneThemeProvider({ light, dark, defaultMode, mode: controlledMode, children, }: GrundtoneThemeProviderProps): React.ReactElement;
+
+declare function useGrundtoneTheme(): GrundtoneThemeContextValue;
+
+interface RNShadowStyle {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+declare function shadowToRN(layers: ShadowLayer[]): RNShadowStyle;
+
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface IconProps {
+    icon?: IconDefinition;
+    name?: string;
+    size?: IconSize;
+    label?: string;
+    color?: string;
+}
+
+declare function GTIcon({ icon, name, size, label, color }: IconProps): react_jsx_runtime.JSX.Element | null;
+
+interface IconRegistryProviderProps {
+    registry: IconRegistry;
+    children: React.ReactNode;
+}
+declare function IconRegistryProvider({ registry, children, }: IconRegistryProviderProps): react_jsx_runtime.JSX.Element;
+declare function useIconRegistry(): IconRegistry | null;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'negative' | 'unstyled';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    rounded?: ButtonRadius;
+    disabled?: boolean;
+    loading?: boolean;
+    block?: boolean;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    children: ReactNode;
+}
+
+declare function GTButton({ variant, size, rounded, disabled, loading, block, onPress, accessibilityLabel, children, }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type InputSize = 'sm' | 'md' | 'lg';
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+type InputRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+interface InputProps {
+    value?: string;
+    onChangeText?: (text: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    type?: InputType;
+    size?: InputSize;
+    rounded?: InputRadius;
+    placeholder?: string;
+    label?: string;
+    helpText?: string;
+    errorText?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    optionalLabel?: string;
+    block?: boolean;
+    maxLength?: number;
+    prefix?: string;
+    suffix?: string;
+    accessibilityLabel?: string;
+}
+
+declare function GTInput({ value, onChangeText, onFocus, onBlur, type, size, rounded, placeholder, label, helpText, errorText, disabled, readonly, required, optionalLabel, block, maxLength, prefix, suffix, accessibilityLabel, }: InputProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps {
+    value?: boolean;
+    onValueChange?: (value: boolean) => void;
+    label?: string;
+    size?: ToggleSize;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+}
+
+declare function GTToggle({ value, onValueChange, label, size, disabled, accessibilityLabel, }: ToggleProps): react_jsx_runtime.JSX.Element;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface AlertProps {
+    variant: AlertVariant;
+    heading?: string;
+    icon?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    accessibilityLabel?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+}
+
+declare function GTAlert({ variant, heading, icon, dismissible, onDismiss, accessibilityLabel, children, footer, }: AlertProps): react_jsx_runtime.JSX.Element;
+
+interface UseFieldOptions {
+    validators?: Validator[];
+    validateOn?: 'input' | 'blur' | 'submit';
+    initialValue?: string;
+}
+interface UseFieldReturn {
+    value: string;
+    setValue: (v: string) => void;
+    errorText: string | undefined;
+    touched: boolean;
+    isValid: boolean;
+    validate: () => ValidationResult;
+    reset: () => void;
+    fieldProps: {
+        value: string;
+        onChangeText: (v: string) => void;
+        onBlur: () => void;
+    };
+}
+declare function useField(options?: UseFieldOptions): UseFieldReturn;
+
+interface UseFormValidationReturn {
+    isValid: boolean;
+    validateAll: () => boolean;
+    resetAll: () => void;
+}
+declare function useFormValidation(fields: Record<string, UseFieldReturn>): UseFormValidationReturn;
+
+declare const defaultLogoSource: ImageSourcePropType;
+declare function getLogoSource(branding?: BrandingConfig): ImageSourcePropType;
+
+export { type AlertProps, type AlertVariant, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, GTAlert, GTButton, GTIcon, GTInput, GTToggle, GrundtoneThemeContext, type GrundtoneThemeContextValue, GrundtoneThemeProvider, type IconProps, IconRegistryProvider, type IconRegistryProviderProps, type IconSize, type InputProps, type InputRadius, type InputSize, type InputType, type RNShadowStyle, type ToggleProps, type UseFieldOptions, type UseFieldReturn, type UseFormValidationReturn, defaultLogoSource, getLogoSource, shadowToRN, useField, useFormValidation, useGrundtoneTheme, useIconRegistry };

package/dist/index.d.ts

@@ -0,0 +1,158 @@
+import React, { ReactNode } from 'react';
+import { Theme, ThemeMode, ShadowLayer, IconDefinition, IconRegistry, ToggleSize, BrandingConfig } from '@grundtone/core';
+export { BrandingConfig, IconDefinition, IconRegistry, LOGO_VARIANT_SIZES, LogoVariants, Theme, ThemeMode, ToggleSize, createBranding, createTheme, defaultBranding } from '@grundtone/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Validator, ValidationResult } from '@grundtone/utils';
+export { ValidationResult, Validator, composeValidators, cpr, cvr, email, maxLength, minLength, pattern, phone, required, url } from '@grundtone/utils';
+import { ImageSourcePropType } from 'react-native';
+
+interface GrundtoneThemeContextValue {
+    theme: Theme;
+    mode: ThemeMode;
+    isDark: boolean;
+    setMode: (mode: ThemeMode) => void;
+}
+declare const GrundtoneThemeContext: React.Context<GrundtoneThemeContextValue | undefined>;
+interface GrundtoneThemeProviderProps {
+    light: Theme;
+    dark: Theme;
+    defaultMode?: ThemeMode;
+    mode?: ThemeMode;
+    children: React.ReactNode;
+}
+declare function GrundtoneThemeProvider({ light, dark, defaultMode, mode: controlledMode, children, }: GrundtoneThemeProviderProps): React.ReactElement;
+
+declare function useGrundtoneTheme(): GrundtoneThemeContextValue;
+
+interface RNShadowStyle {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+declare function shadowToRN(layers: ShadowLayer[]): RNShadowStyle;
+
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface IconProps {
+    icon?: IconDefinition;
+    name?: string;
+    size?: IconSize;
+    label?: string;
+    color?: string;
+}
+
+declare function GTIcon({ icon, name, size, label, color }: IconProps): react_jsx_runtime.JSX.Element | null;
+
+interface IconRegistryProviderProps {
+    registry: IconRegistry;
+    children: React.ReactNode;
+}
+declare function IconRegistryProvider({ registry, children, }: IconRegistryProviderProps): react_jsx_runtime.JSX.Element;
+declare function useIconRegistry(): IconRegistry | null;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'negative' | 'unstyled';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    rounded?: ButtonRadius;
+    disabled?: boolean;
+    loading?: boolean;
+    block?: boolean;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    children: ReactNode;
+}
+
+declare function GTButton({ variant, size, rounded, disabled, loading, block, onPress, accessibilityLabel, children, }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type InputSize = 'sm' | 'md' | 'lg';
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+type InputRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
+interface InputProps {
+    value?: string;
+    onChangeText?: (text: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    type?: InputType;
+    size?: InputSize;
+    rounded?: InputRadius;
+    placeholder?: string;
+    label?: string;
+    helpText?: string;
+    errorText?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    optionalLabel?: string;
+    block?: boolean;
+    maxLength?: number;
+    prefix?: string;
+    suffix?: string;
+    accessibilityLabel?: string;
+}
+
+declare function GTInput({ value, onChangeText, onFocus, onBlur, type, size, rounded, placeholder, label, helpText, errorText, disabled, readonly, required, optionalLabel, block, maxLength, prefix, suffix, accessibilityLabel, }: InputProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleProps {
+    value?: boolean;
+    onValueChange?: (value: boolean) => void;
+    label?: string;
+    size?: ToggleSize;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+}
+
+declare function GTToggle({ value, onValueChange, label, size, disabled, accessibilityLabel, }: ToggleProps): react_jsx_runtime.JSX.Element;
+
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+interface AlertProps {
+    variant: AlertVariant;
+    heading?: string;
+    icon?: string;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    accessibilityLabel?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+}
+
+declare function GTAlert({ variant, heading, icon, dismissible, onDismiss, accessibilityLabel, children, footer, }: AlertProps): react_jsx_runtime.JSX.Element;
+
+interface UseFieldOptions {
+    validators?: Validator[];
+    validateOn?: 'input' | 'blur' | 'submit';
+    initialValue?: string;
+}
+interface UseFieldReturn {
+    value: string;
+    setValue: (v: string) => void;
+    errorText: string | undefined;
+    touched: boolean;
+    isValid: boolean;
+    validate: () => ValidationResult;
+    reset: () => void;
+    fieldProps: {
+        value: string;
+        onChangeText: (v: string) => void;
+        onBlur: () => void;
+    };
+}
+declare function useField(options?: UseFieldOptions): UseFieldReturn;
+
+interface UseFormValidationReturn {
+    isValid: boolean;
+    validateAll: () => boolean;
+    resetAll: () => void;
+}
+declare function useFormValidation(fields: Record<string, UseFieldReturn>): UseFormValidationReturn;
+
+declare const defaultLogoSource: ImageSourcePropType;
+declare function getLogoSource(branding?: BrandingConfig): ImageSourcePropType;
+
+export { type AlertProps, type AlertVariant, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, GTAlert, GTButton, GTIcon, GTInput, GTToggle, GrundtoneThemeContext, type GrundtoneThemeContextValue, GrundtoneThemeProvider, type IconProps, IconRegistryProvider, type IconRegistryProviderProps, type IconSize, type InputProps, type InputRadius, type InputSize, type InputType, type RNShadowStyle, type ToggleProps, type UseFieldOptions, type UseFieldReturn, type UseFormValidationReturn, defaultLogoSource, getLogoSource, shadowToRN, useField, useFormValidation, useGrundtoneTheme, useIconRegistry };