@grundtone/react-native 2.0.1

package/dist/index.mjs

@@ -0,0 +1,912 @@
+// src/ThemeContext.tsx
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { Appearance } from "react-native";
+import { resolveThemeMode } from "@grundtone/utils";
+import { jsx } from "react/jsx-runtime";
+var GrundtoneThemeContext = createContext(void 0);
+function getSystemIsDark() {
+  return Appearance.getColorScheme() === "dark";
+}
+function GrundtoneThemeProvider({
+  light,
+  dark,
+  defaultMode = "auto",
+  mode: controlledMode,
+  children
+}) {
+  const [internalMode, setInternalMode] = useState(defaultMode);
+  const [systemIsDark, setSystemIsDark] = useState(getSystemIsDark);
+  useEffect(() => {
+    const sub = Appearance.addChangeListener(() => {
+      setSystemIsDark(getSystemIsDark());
+    });
+    return () => sub.remove();
+  }, []);
+  const activeMode = controlledMode ?? internalMode;
+  const resolved = resolveThemeMode(activeMode, systemIsDark);
+  const setMode = useCallback(
+    (newMode) => {
+      if (controlledMode === void 0) {
+        setInternalMode(newMode);
+      }
+    },
+    [controlledMode]
+  );
+  const theme = resolved === "dark" ? dark : light;
+  const isDark = resolved === "dark";
+  const value = useMemo(
+    () => ({
+      theme,
+      mode: activeMode,
+      isDark,
+      setMode
+    }),
+    [theme, activeMode, isDark, setMode]
+  );
+  return /* @__PURE__ */ jsx(GrundtoneThemeContext.Provider, { value, children });
+}
+
+// src/useGrundtoneTheme.ts
+import { useContext } from "react";
+function useGrundtoneTheme() {
+  const context = useContext(GrundtoneThemeContext);
+  if (context === void 0) {
+    throw new Error(
+      "useGrundtoneTheme must be used within a GrundtoneThemeProvider. Wrap your app with <GrundtoneThemeProvider light={...} dark={...}>."
+    );
+  }
+  return context;
+}
+
+// src/index.ts
+import { createTheme } from "@grundtone/core";
+
+// src/shadows.ts
+function shadowToRN(layers) {
+  const layer = layers[0];
+  if (!layer) {
+    return {
+      shadowColor: "transparent",
+      shadowOffset: { width: 0, height: 0 },
+      shadowOpacity: 0,
+      shadowRadius: 0,
+      elevation: 0
+    };
+  }
+  return {
+    shadowColor: layer.color,
+    shadowOffset: { width: layer.x, height: layer.y },
+    shadowOpacity: layer.opacity,
+    shadowRadius: layer.blur / 2,
+    elevation: Math.ceil(layer.blur / 2)
+  };
+}
+
+// src/components/Icon/Icon.tsx
+import { SvgXml } from "react-native-svg";
+import { getIconColor } from "@grundtone/core";
+
+// src/IconRegistryContext.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IconRegistryContext = createContext2(null);
+function IconRegistryProvider({
+  registry,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(IconRegistryContext.Provider, { value: registry, children });
+}
+function useIconRegistry() {
+  return useContext2(IconRegistryContext);
+}
+
+// src/components/Icon/Icon.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ICON_SIZES = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32,
+  "2xl": 40
+};
+function GTIcon({ icon, name, size = "lg", label, color }) {
+  const registry = useIconRegistry();
+  let resolved = null;
+  if (icon) {
+    resolved = icon;
+  } else if (name && registry) {
+    resolved = registry[name] ?? null;
+  }
+  if (!resolved) {
+    if (process.env.NODE_ENV !== "production") {
+      if (name && !registry) {
+        console.warn(
+          `[GTIcon] No icon registry provided. Wrap your app in <IconRegistryProvider> or pass the "icon" prop directly.`
+        );
+      } else if (name) {
+        console.warn(`[GTIcon] Icon "${name}" not found in registry.`);
+      }
+    }
+    return null;
+  }
+  const px = ICON_SIZES[size];
+  const resolvedColor = color ?? getIconColor();
+  const xml = `<svg viewBox="${resolved.viewBox}" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="${resolvedColor}" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${resolved.body}</svg>`;
+  return /* @__PURE__ */ jsx3(
+    SvgXml,
+    {
+      xml,
+      width: px,
+      height: px,
+      accessibilityLabel: label,
+      accessibilityRole: label ? "image" : void 0,
+      accessible: !!label
+    }
+  );
+}
+
+// src/components/Button/Button.tsx
+import {
+  Pressable,
+  Text,
+  ActivityIndicator,
+  StyleSheet
+} from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function rem(value) {
+  return parseFloat(value) * 16;
+}
+function GTButton({
+  variant = "primary",
+  size = "md",
+  rounded,
+  disabled = false,
+  loading = false,
+  block = false,
+  onPress,
+  accessibilityLabel,
+  children
+}) {
+  const { theme } = useGrundtoneTheme();
+  const isDisabled = disabled || loading;
+  const variantStyles = getVariantStyles(variant, theme.colors);
+  const sizeStyles = getSizeStyles(size, theme);
+  const radiusStyle = getRadiusStyle(rounded, theme.radius);
+  const containerStyle = {
+    ...styles.base,
+    ...variantStyles.container,
+    ...sizeStyles.container,
+    ...radiusStyle,
+    ...block ? styles.block : void 0,
+    ...isDisabled ? styles.disabled : void 0
+  };
+  const textStyle = {
+    ...sizeStyles.text,
+    ...variantStyles.text,
+    fontFamily: theme.typography.fontFamily.base,
+    fontWeight: `${theme.typography.fontWeight.medium}`
+  };
+  const spinnerColor = variantStyles.text.color;
+  function handlePress() {
+    if (isDisabled) return;
+    onPress?.();
+  }
+  return /* @__PURE__ */ jsx4(
+    Pressable,
+    {
+      onPress: handlePress,
+      disabled: isDisabled,
+      style: ({ pressed }) => [
+        containerStyle,
+        pressed && !isDisabled ? variantStyles.pressed : void 0
+      ],
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled: isDisabled, busy: loading },
+      children: loading ? /* @__PURE__ */ jsx4(ActivityIndicator, { size: "small", color: spinnerColor }) : typeof children === "string" ? /* @__PURE__ */ jsx4(Text, { style: textStyle, children }) : children
+    }
+  );
+}
+function getVariantStyles(variant, colors) {
+  switch (variant) {
+    case "primary":
+      return {
+        container: {
+          backgroundColor: colors.primary,
+          borderColor: colors.primary
+        },
+        text: { color: colors.onPrimary },
+        pressed: { backgroundColor: colors.primaryDark }
+      };
+    case "secondary":
+      return {
+        container: {
+          backgroundColor: colors.secondary,
+          borderColor: colors.secondary
+        },
+        text: { color: colors.text },
+        pressed: { backgroundColor: colors.secondaryDark }
+      };
+    case "outlined":
+      return {
+        container: {
+          backgroundColor: "transparent",
+          borderColor: colors.borderMedium
+        },
+        text: { color: colors.primary },
+        pressed: {
+          backgroundColor: colors.primary,
+          borderColor: colors.primary
+        }
+      };
+    case "negative":
+      return {
+        container: {
+          backgroundColor: colors.error,
+          borderColor: colors.error
+        },
+        text: { color: colors.onPrimary },
+        pressed: { backgroundColor: colors.errorDark }
+      };
+    case "unstyled":
+      return {
+        container: {
+          backgroundColor: "transparent",
+          borderColor: "transparent",
+          borderWidth: 0,
+          paddingHorizontal: 0,
+          paddingVertical: 0
+        },
+        text: { color: colors.text },
+        pressed: {}
+      };
+  }
+}
+function getSizeStyles(size, theme) {
+  switch (size) {
+    case "sm":
+      return {
+        container: {
+          paddingVertical: rem(theme.spacing.xs),
+          paddingHorizontal: rem(theme.spacing.sm)
+        },
+        text: { fontSize: rem(theme.typography.fontSize.sm) }
+      };
+    case "md":
+      return {
+        container: {
+          paddingVertical: rem(theme.spacing.sm),
+          paddingHorizontal: rem(theme.spacing.md)
+        },
+        text: { fontSize: rem(theme.typography.fontSize.base) }
+      };
+    case "lg":
+      return {
+        container: {
+          paddingVertical: rem(theme.spacing.md),
+          paddingHorizontal: rem(theme.spacing.xl)
+        },
+        text: { fontSize: rem(theme.typography.fontSize.lg) }
+      };
+  }
+}
+function getRadiusStyle(rounded, radius) {
+  if (!rounded) return { borderRadius: rem(radius.md) };
+  if (rounded === "full") return { borderRadius: 9999 };
+  if (rounded === "none") return { borderRadius: 0 };
+  return { borderRadius: rem(radius[rounded]) };
+}
+var styles = StyleSheet.create({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    gap: 4
+  },
+  block: {
+    width: "100%"
+  },
+  disabled: {
+    opacity: 0.5
+  }
+});
+
+// src/components/Input/Input.tsx
+import { useState as useState2 } from "react";
+import {
+  View,
+  Text as Text2,
+  TextInput
+} from "react-native";
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+function rem2(value) {
+  return parseFloat(value) * 16;
+}
+function getKeyboardType(type) {
+  switch (type) {
+    case "email":
+      return "email-address";
+    case "number":
+      return "numeric";
+    case "tel":
+      return "phone-pad";
+    case "url":
+      return "url";
+    default:
+      return "default";
+  }
+}
+function GTInput({
+  value,
+  onChangeText,
+  onFocus,
+  onBlur,
+  type = "text",
+  size = "md",
+  rounded,
+  placeholder,
+  label,
+  helpText,
+  errorText,
+  disabled = false,
+  readonly = false,
+  required: required2 = false,
+  optionalLabel,
+  block = false,
+  maxLength: maxLength2,
+  prefix,
+  suffix,
+  accessibilityLabel
+}) {
+  const { theme } = useGrundtoneTheme();
+  const [isFocused, setIsFocused] = useState2(false);
+  const sp = (key) => rem2(theme.spacing[key]);
+  const fs = (key) => rem2(theme.typography.fontSize[key]);
+  const fw = (key) => `${theme.typography.fontWeight[key]}`;
+  const sizeStyles = getSizeStyles2(size, theme);
+  const radiusStyle = getRadiusStyle2(rounded, theme.radius);
+  const borderColor = errorText ? theme.colors.error : isFocused ? theme.colors.primary : theme.colors.borderMedium;
+  const inputStyle = {
+    borderWidth: 1,
+    ...sizeStyles,
+    ...radiusStyle,
+    borderColor,
+    backgroundColor: disabled || readonly ? theme.colors.surfaceAlt : theme.colors.background,
+    color: theme.colors.text,
+    fontFamily: theme.typography.fontFamily.base,
+    opacity: disabled ? 0.5 : 1,
+    ...block ? { width: "100%" } : void 0
+  };
+  const hasAffix = !!prefix || !!suffix;
+  const affixInputStyle = hasAffix ? {
+    ...inputStyle,
+    ...prefix ? {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderLeftWidth: 0
+    } : {},
+    ...suffix ? {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      borderRightWidth: 0
+    } : {},
+    flex: 1
+  } : inputStyle;
+  const affixStyle = {
+    justifyContent: "center",
+    paddingHorizontal: sp("md"),
+    backgroundColor: theme.colors.surface,
+    borderWidth: 1,
+    borderColor
+  };
+  function handleFocus() {
+    setIsFocused(true);
+    onFocus?.();
+  }
+  function handleBlur() {
+    setIsFocused(false);
+    onBlur?.();
+  }
+  const textInput = /* @__PURE__ */ jsx5(
+    TextInput,
+    {
+      style: hasAffix ? affixInputStyle : inputStyle,
+      value,
+      onChangeText,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      placeholder,
+      placeholderTextColor: theme.colors.textSecondary,
+      editable: !disabled && !readonly,
+      secureTextEntry: type === "password",
+      keyboardType: getKeyboardType(type),
+      maxLength: maxLength2,
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { disabled }
+    }
+  );
+  return /* @__PURE__ */ jsxs(View, { style: block ? { width: "100%" } : void 0, children: [
+    label ? /* @__PURE__ */ jsxs(
+      Text2,
+      {
+        style: {
+          marginBottom: sp("xs"),
+          color: theme.colors.text,
+          fontFamily: theme.typography.fontFamily.base,
+          fontSize: fs("sm"),
+          fontWeight: fw("medium")
+        },
+        children: [
+          label,
+          optionalLabel && !required2 ? /* @__PURE__ */ jsxs(
+            Text2,
+            {
+              style: {
+                color: theme.colors.textSecondary,
+                fontWeight: fw("normal")
+              },
+              children: [
+                " ",
+                optionalLabel
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    helpText && !errorText ? /* @__PURE__ */ jsx5(
+      Text2,
+      {
+        style: {
+          marginBottom: sp("xs"),
+          color: theme.colors.textSecondary,
+          fontFamily: theme.typography.fontFamily.base,
+          fontSize: fs("sm")
+        },
+        children: helpText
+      }
+    ) : null,
+    errorText ? /* @__PURE__ */ jsx5(
+      Text2,
+      {
+        style: {
+          marginBottom: sp("xs"),
+          color: theme.colors.error,
+          fontFamily: theme.typography.fontFamily.base,
+          fontSize: fs("sm"),
+          fontWeight: fw("semibold")
+        },
+        accessibilityRole: "alert",
+        children: errorText
+      }
+    ) : null,
+    hasAffix ? /* @__PURE__ */ jsxs(View, { style: { flexDirection: "row", alignItems: "stretch" }, children: [
+      prefix ? /* @__PURE__ */ jsx5(
+        View,
+        {
+          style: [
+            affixStyle,
+            radiusStyle,
+            { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
+          ],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: /* @__PURE__ */ jsx5(
+            Text2,
+            {
+              style: {
+                color: theme.colors.textSecondary,
+                fontFamily: theme.typography.fontFamily.base,
+                fontSize: fs("base")
+              },
+              children: prefix
+            }
+          )
+        }
+      ) : null,
+      textInput,
+      suffix ? /* @__PURE__ */ jsx5(
+        View,
+        {
+          style: [
+            affixStyle,
+            radiusStyle,
+            { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }
+          ],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: /* @__PURE__ */ jsx5(
+            Text2,
+            {
+              style: {
+                color: theme.colors.textSecondary,
+                fontFamily: theme.typography.fontFamily.base,
+                fontSize: fs("base")
+              },
+              children: suffix
+            }
+          )
+        }
+      ) : null
+    ] }) : textInput
+  ] });
+}
+function getSizeStyles2(size, theme) {
+  switch (size) {
+    case "sm":
+      return {
+        fontSize: rem2(theme.typography.fontSize.sm),
+        paddingVertical: rem2(theme.spacing.xs),
+        paddingHorizontal: rem2(theme.spacing.sm)
+      };
+    case "md":
+      return {
+        fontSize: rem2(theme.typography.fontSize.base),
+        paddingVertical: rem2(theme.spacing.sm),
+        paddingHorizontal: rem2(theme.spacing.md)
+      };
+    case "lg":
+      return {
+        fontSize: rem2(theme.typography.fontSize.lg),
+        paddingVertical: rem2(theme.spacing.md),
+        paddingHorizontal: rem2(theme.spacing.xl)
+      };
+  }
+}
+function getRadiusStyle2(rounded, radius) {
+  if (!rounded) return { borderRadius: rem2(radius.md) };
+  if (rounded === "full") return { borderRadius: 9999 };
+  if (rounded === "none") return { borderRadius: 0 };
+  return { borderRadius: rem2(radius[rounded]) };
+}
+
+// src/components/Toggle/Toggle.tsx
+import { useEffect as useEffect2, useRef } from "react";
+import {
+  View as View2,
+  Text as Text3,
+  Pressable as Pressable2,
+  Animated
+} from "react-native";
+import { TOGGLE_SIZES } from "@grundtone/core";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function rem3(value) {
+  return parseFloat(value) * 16;
+}
+function GTToggle({
+  value = false,
+  onValueChange,
+  label,
+  size = "md",
+  disabled = false,
+  accessibilityLabel
+}) {
+  const { theme } = useGrundtoneTheme();
+  const dims = TOGGLE_SIZES[size];
+  const thumbOffset = 2;
+  const thumbTravel = dims.width - dims.thumb - thumbOffset * 2;
+  const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+  useEffect2(() => {
+    Animated.timing(anim, {
+      toValue: value ? 1 : 0,
+      duration: 150,
+      useNativeDriver: false
+    }).start();
+  }, [value, anim]);
+  function handlePress() {
+    if (disabled) return;
+    onValueChange?.(!value);
+  }
+  const fieldStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: rem3(theme.spacing.sm),
+    opacity: disabled ? 0.5 : 1
+  };
+  const labelStyle = {
+    color: theme.colors.text,
+    fontFamily: theme.typography.fontFamily.base,
+    fontSize: rem3(theme.typography.fontSize.sm),
+    fontWeight: theme.typography.fontWeight.medium
+  };
+  const trackBg = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [theme.colors.borderMedium, theme.colors.primary]
+  });
+  const thumbTranslate = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, thumbTravel]
+  });
+  return /* @__PURE__ */ jsxs2(View2, { style: fieldStyle, children: [
+    label ? /* @__PURE__ */ jsx6(Text3, { style: labelStyle, children: label }) : null,
+    /* @__PURE__ */ jsx6(
+      Pressable2,
+      {
+        onPress: handlePress,
+        disabled,
+        accessibilityRole: "switch",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: { checked: value, disabled },
+        children: /* @__PURE__ */ jsx6(
+          Animated.View,
+          {
+            style: {
+              width: dims.width,
+              height: dims.height,
+              borderRadius: 9999,
+              backgroundColor: trackBg,
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx6(
+              Animated.View,
+              {
+                style: {
+                  position: "absolute",
+                  width: dims.thumb,
+                  height: dims.thumb,
+                  borderRadius: 9999,
+                  backgroundColor: theme.colors.background,
+                  left: thumbOffset,
+                  transform: [{ translateX: thumbTranslate }]
+                }
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/components/Alert/Alert.tsx
+import {
+  View as View3,
+  Text as Text4,
+  Pressable as Pressable3
+} from "react-native";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function rem4(value) {
+  return parseFloat(value) * 16;
+}
+function hexAlpha(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function GTAlert({
+  variant,
+  heading,
+  icon,
+  dismissible = false,
+  onDismiss,
+  accessibilityLabel,
+  children,
+  footer
+}) {
+  const { theme } = useGrundtoneTheme();
+  const borderColor = {
+    info: theme.colors.info,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    error: theme.colors.error
+  }[variant];
+  const containerStyle = {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: rem4(theme.spacing.md),
+    padding: rem4(theme.spacing.md),
+    borderRadius: rem4(theme.radius.lg),
+    borderWidth: 1,
+    borderColor,
+    backgroundColor: hexAlpha(borderColor, 0.12)
+  };
+  const iconStyle = {
+    alignSelf: "center"
+  };
+  const contentStyle = {
+    flex: 1
+  };
+  const headingStyle = {
+    fontWeight: theme.typography.fontWeight.semibold,
+    fontFamily: theme.typography.fontFamily.base,
+    fontSize: rem4(theme.typography.fontSize.sm),
+    color: theme.colors.text,
+    marginBottom: rem4(theme.spacing.xs)
+  };
+  const footerStyle = {
+    marginTop: rem4(theme.spacing.lg),
+    paddingTop: rem4(theme.spacing.lg),
+    borderTopWidth: 1,
+    borderTopColor: theme.colors.text,
+    opacity: 0.3
+  };
+  const closeStyle = {
+    opacity: 0.7
+  };
+  return /* @__PURE__ */ jsxs3(
+    View3,
+    {
+      style: containerStyle,
+      accessibilityRole: "alert",
+      accessibilityLabel,
+      children: [
+        icon ? /* @__PURE__ */ jsx7(View3, { style: iconStyle, children: /* @__PURE__ */ jsx7(GTIcon, { name: icon, size: "lg", color: theme.colors.text }) }) : null,
+        /* @__PURE__ */ jsxs3(View3, { style: contentStyle, children: [
+          heading ? /* @__PURE__ */ jsx7(Text4, { style: headingStyle, children: heading }) : null,
+          /* @__PURE__ */ jsx7(View3, { children }),
+          footer ? /* @__PURE__ */ jsx7(View3, { style: footerStyle, children: footer }) : null
+        ] }),
+        dismissible ? /* @__PURE__ */ jsx7(
+          Pressable3,
+          {
+            style: closeStyle,
+            onPress: onDismiss,
+            accessibilityLabel: "Close",
+            accessibilityRole: "button",
+            children: /* @__PURE__ */ jsx7(GTIcon, { name: "close", size: "xs", color: theme.colors.text })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/useField.ts
+import { useState as useState3, useCallback as useCallback2, useRef as useRef2 } from "react";
+function useField(options = {}) {
+  const { validators = [], validateOn = "blur", initialValue = "" } = options;
+  const [value, setValueState] = useState3(initialValue);
+  const [touched, setTouched] = useState3(false);
+  const [validationMessage, setValidationMessage] = useState3(void 0);
+  const valueRef = useRef2(value);
+  const runValidation = useCallback2(
+    (val) => {
+      for (const validator of validators) {
+        const result = validator(val);
+        if (!result.isValid) {
+          setValidationMessage(result.message);
+          return result;
+        }
+      }
+      setValidationMessage(void 0);
+      return { isValid: true };
+    },
+    [validators]
+  );
+  const validate = useCallback2(() => {
+    return runValidation(valueRef.current);
+  }, [runValidation]);
+  const setValue = useCallback2(
+    (v) => {
+      setValueState(v);
+      valueRef.current = v;
+      if (validateOn === "input") {
+        setTouched(true);
+        runValidation(v);
+      }
+    },
+    [validateOn, runValidation]
+  );
+  const onBlur = useCallback2(() => {
+    if (validateOn === "blur") {
+      setTouched(true);
+      runValidation(valueRef.current);
+    }
+  }, [validateOn, runValidation]);
+  const reset = useCallback2(() => {
+    setValueState(initialValue);
+    valueRef.current = initialValue;
+    setTouched(false);
+    setValidationMessage(void 0);
+  }, [initialValue]);
+  return {
+    value,
+    setValue,
+    errorText: touched ? validationMessage : void 0,
+    touched,
+    isValid: validationMessage === void 0,
+    validate,
+    reset,
+    fieldProps: {
+      value,
+      onChangeText: setValue,
+      onBlur
+    }
+  };
+}
+
+// src/useFormValidation.ts
+import { useMemo as useMemo2, useCallback as useCallback3 } from "react";
+function useFormValidation(fields) {
+  const fieldValues = Object.values(fields);
+  const isValid = useMemo2(
+    () => fieldValues.every((f) => f.isValid),
+    [fieldValues]
+  );
+  const validateAll = useCallback3(() => {
+    let allValid = true;
+    for (const field of Object.values(fields)) {
+      const result = field.validate();
+      if (!result.isValid) allValid = false;
+    }
+    return allValid;
+  }, [fields]);
+  const resetAll = useCallback3(() => {
+    for (const field of Object.values(fields)) {
+      field.reset();
+    }
+  }, [fields]);
+  return { isValid, validateAll, resetAll };
+}
+
+// src/index.ts
+import {
+  required,
+  email,
+  phone,
+  cpr,
+  cvr,
+  minLength,
+  maxLength,
+  pattern,
+  url,
+  composeValidators
+} from "@grundtone/utils";
+
+// src/branding.ts
+import { defaultBranding } from "@grundtone/core";
+import {
+  defaultBranding as defaultBranding2,
+  createBranding,
+  LOGO_VARIANT_SIZES
+} from "@grundtone/core";
+var defaultLogoSource = {
+  uri: defaultBranding.logos.primary
+};
+function getLogoSource(branding) {
+  if (!branding || branding.logos.primary === defaultBranding.logos.primary) {
+    return defaultLogoSource;
+  }
+  return { uri: branding.logos.primary };
+}
+export {
+  GTAlert,
+  GTButton,
+  GTIcon,
+  GTInput,
+  GTToggle,
+  GrundtoneThemeContext,
+  GrundtoneThemeProvider,
+  IconRegistryProvider,
+  LOGO_VARIANT_SIZES,
+  composeValidators,
+  cpr,
+  createBranding,
+  createTheme,
+  cvr,
+  defaultBranding2 as defaultBranding,
+  defaultLogoSource,
+  email,
+  getLogoSource,
+  maxLength,
+  minLength,
+  pattern,
+  phone,
+  required,
+  shadowToRN,
+  url,
+  useField,
+  useFormValidation,
+  useGrundtoneTheme,
+  useIconRegistry
+};
+//# sourceMappingURL=index.mjs.map