@grundtone/react-native 2.0.1

package/dist/index.js

@@ -0,0 +1,928 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  GTAlert: () => GTAlert,
+  GTButton: () => GTButton,
+  GTIcon: () => GTIcon,
+  GTInput: () => GTInput,
+  GTToggle: () => GTToggle,
+  GrundtoneThemeContext: () => GrundtoneThemeContext,
+  GrundtoneThemeProvider: () => GrundtoneThemeProvider,
+  IconRegistryProvider: () => IconRegistryProvider,
+  LOGO_VARIANT_SIZES: () => import_core4.LOGO_VARIANT_SIZES,
+  composeValidators: () => import_utils2.composeValidators,
+  cpr: () => import_utils2.cpr,
+  createBranding: () => import_core4.createBranding,
+  createTheme: () => import_core5.createTheme,
+  cvr: () => import_utils2.cvr,
+  defaultBranding: () => import_core4.defaultBranding,
+  defaultLogoSource: () => defaultLogoSource,
+  email: () => import_utils2.email,
+  getLogoSource: () => getLogoSource,
+  maxLength: () => import_utils2.maxLength,
+  minLength: () => import_utils2.minLength,
+  pattern: () => import_utils2.pattern,
+  phone: () => import_utils2.phone,
+  required: () => import_utils2.required,
+  shadowToRN: () => shadowToRN,
+  url: () => import_utils2.url,
+  useField: () => useField,
+  useFormValidation: () => useFormValidation,
+  useGrundtoneTheme: () => useGrundtoneTheme,
+  useIconRegistry: () => useIconRegistry
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/ThemeContext.tsx
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_utils = require("@grundtone/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var GrundtoneThemeContext = (0, import_react.createContext)(void 0);
+function getSystemIsDark() {
+  return import_react_native.Appearance.getColorScheme() === "dark";
+}
+function GrundtoneThemeProvider({
+  light,
+  dark,
+  defaultMode = "auto",
+  mode: controlledMode,
+  children
+}) {
+  const [internalMode, setInternalMode] = (0, import_react.useState)(defaultMode);
+  const [systemIsDark, setSystemIsDark] = (0, import_react.useState)(getSystemIsDark);
+  (0, import_react.useEffect)(() => {
+    const sub = import_react_native.Appearance.addChangeListener(() => {
+      setSystemIsDark(getSystemIsDark());
+    });
+    return () => sub.remove();
+  }, []);
+  const activeMode = controlledMode ?? internalMode;
+  const resolved = (0, import_utils.resolveThemeMode)(activeMode, systemIsDark);
+  const setMode = (0, import_react.useCallback)(
+    (newMode) => {
+      if (controlledMode === void 0) {
+        setInternalMode(newMode);
+      }
+    },
+    [controlledMode]
+  );
+  const theme = resolved === "dark" ? dark : light;
+  const isDark = resolved === "dark";
+  const value = (0, import_react.useMemo)(
+    () => ({
+      theme,
+      mode: activeMode,
+      isDark,
+      setMode
+    }),
+    [theme, activeMode, isDark, setMode]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GrundtoneThemeContext.Provider, { value, children });
+}
+
+// src/useGrundtoneTheme.ts
+var import_react2 = require("react");
+function useGrundtoneTheme() {
+  const context = (0, import_react2.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
+var import_core5 = require("@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
+var import_react_native_svg = require("react-native-svg");
+var import_core = require("@grundtone/core");
+
+// src/IconRegistryContext.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var IconRegistryContext = (0, import_react3.createContext)(null);
+function IconRegistryProvider({
+  registry,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IconRegistryContext.Provider, { value: registry, children });
+}
+function useIconRegistry() {
+  return (0, import_react3.useContext)(IconRegistryContext);
+}
+
+// src/components/Icon/Icon.tsx
+var import_jsx_runtime3 = require("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 ?? (0, import_core.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__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native_svg.SvgXml,
+    {
+      xml,
+      width: px,
+      height: px,
+      accessibilityLabel: label,
+      accessibilityRole: label ? "image" : void 0,
+      accessible: !!label
+    }
+  );
+}
+
+// src/components/Button/Button.tsx
+var import_react_native2 = require("react-native");
+var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native2.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__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.ActivityIndicator, { size: "small", color: spinnerColor }) : typeof children === "string" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native2.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 = import_react_native2.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
+var import_react4 = require("react");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime5 = require("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] = (0, import_react4.useState)(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__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_native3.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__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: block ? { width: "100%" } : void 0, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_react_native3.Text,
+      {
+        style: {
+          marginBottom: sp("xs"),
+          color: theme.colors.text,
+          fontFamily: theme.typography.fontFamily.base,
+          fontSize: fs("sm"),
+          fontWeight: fw("medium")
+        },
+        children: [
+          label,
+          optionalLabel && !required2 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            import_react_native3.Text,
+            {
+              style: {
+                color: theme.colors.textSecondary,
+                fontWeight: fw("normal")
+              },
+              children: [
+                " ",
+                optionalLabel
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) : null,
+    helpText && !errorText ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_native3.Text,
+      {
+        style: {
+          marginBottom: sp("xs"),
+          color: theme.colors.textSecondary,
+          fontFamily: theme.typography.fontFamily.base,
+          fontSize: fs("sm")
+        },
+        children: helpText
+      }
+    ) : null,
+    errorText ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_native3.Text,
+      {
+        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__ */ (0, import_jsx_runtime5.jsxs)(import_react_native3.View, { style: { flexDirection: "row", alignItems: "stretch" }, children: [
+      prefix ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_native3.View,
+        {
+          style: [
+            affixStyle,
+            radiusStyle,
+            { borderTopRightRadius: 0, borderBottomRightRadius: 0 }
+          ],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_react_native3.Text,
+            {
+              style: {
+                color: theme.colors.textSecondary,
+                fontFamily: theme.typography.fontFamily.base,
+                fontSize: fs("base")
+              },
+              children: prefix
+            }
+          )
+        }
+      ) : null,
+      textInput,
+      suffix ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_native3.View,
+        {
+          style: [
+            affixStyle,
+            radiusStyle,
+            { borderTopLeftRadius: 0, borderBottomLeftRadius: 0 }
+          ],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no-hide-descendants",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_react_native3.Text,
+            {
+              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
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
+var import_core2 = require("@grundtone/core");
+var import_jsx_runtime6 = require("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 = import_core2.TOGGLE_SIZES[size];
+  const thumbOffset = 2;
+  const thumbTravel = dims.width - dims.thumb - thumbOffset * 2;
+  const anim = (0, import_react5.useRef)(new import_react_native4.Animated.Value(value ? 1 : 0)).current;
+  (0, import_react5.useEffect)(() => {
+    import_react_native4.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__ */ (0, import_jsx_runtime6.jsxs)(import_react_native4.View, { style: fieldStyle, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.Text, { style: labelStyle, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_react_native4.Pressable,
+      {
+        onPress: handlePress,
+        disabled,
+        accessibilityRole: "switch",
+        accessibilityLabel: accessibilityLabel ?? label,
+        accessibilityState: { checked: value, disabled },
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_react_native4.Animated.View,
+          {
+            style: {
+              width: dims.width,
+              height: dims.height,
+              borderRadius: 9999,
+              backgroundColor: trackBg,
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              import_react_native4.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
+var import_react_native5 = require("react-native");
+var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsxs)(
+    import_react_native5.View,
+    {
+      style: containerStyle,
+      accessibilityRole: "alert",
+      accessibilityLabel,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native5.View, { style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GTIcon, { name: icon, size: "lg", color: theme.colors.text }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native5.View, { style: contentStyle, children: [
+          heading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native5.Text, { style: headingStyle, children: heading }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native5.View, { children }),
+          footer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native5.View, { style: footerStyle, children: footer }) : null
+        ] }),
+        dismissible ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          import_react_native5.Pressable,
+          {
+            style: closeStyle,
+            onPress: onDismiss,
+            accessibilityLabel: "Close",
+            accessibilityRole: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GTIcon, { name: "close", size: "xs", color: theme.colors.text })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/useField.ts
+var import_react6 = require("react");
+function useField(options = {}) {
+  const { validators = [], validateOn = "blur", initialValue = "" } = options;
+  const [value, setValueState] = (0, import_react6.useState)(initialValue);
+  const [touched, setTouched] = (0, import_react6.useState)(false);
+  const [validationMessage, setValidationMessage] = (0, import_react6.useState)(void 0);
+  const valueRef = (0, import_react6.useRef)(value);
+  const runValidation = (0, import_react6.useCallback)(
+    (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 = (0, import_react6.useCallback)(() => {
+    return runValidation(valueRef.current);
+  }, [runValidation]);
+  const setValue = (0, import_react6.useCallback)(
+    (v) => {
+      setValueState(v);
+      valueRef.current = v;
+      if (validateOn === "input") {
+        setTouched(true);
+        runValidation(v);
+      }
+    },
+    [validateOn, runValidation]
+  );
+  const onBlur = (0, import_react6.useCallback)(() => {
+    if (validateOn === "blur") {
+      setTouched(true);
+      runValidation(valueRef.current);
+    }
+  }, [validateOn, runValidation]);
+  const reset = (0, import_react6.useCallback)(() => {
+    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
+var import_react7 = require("react");
+function useFormValidation(fields) {
+  const fieldValues = Object.values(fields);
+  const isValid = (0, import_react7.useMemo)(
+    () => fieldValues.every((f) => f.isValid),
+    [fieldValues]
+  );
+  const validateAll = (0, import_react7.useCallback)(() => {
+    let allValid = true;
+    for (const field of Object.values(fields)) {
+      const result = field.validate();
+      if (!result.isValid) allValid = false;
+    }
+    return allValid;
+  }, [fields]);
+  const resetAll = (0, import_react7.useCallback)(() => {
+    for (const field of Object.values(fields)) {
+      field.reset();
+    }
+  }, [fields]);
+  return { isValid, validateAll, resetAll };
+}
+
+// src/index.ts
+var import_utils2 = require("@grundtone/utils");
+
+// src/branding.ts
+var import_core3 = require("@grundtone/core");
+var import_core4 = require("@grundtone/core");
+var defaultLogoSource = {
+  uri: import_core3.defaultBranding.logos.primary
+};
+function getLogoSource(branding) {
+  if (!branding || branding.logos.primary === import_core3.defaultBranding.logos.primary) {
+    return defaultLogoSource;
+  }
+  return { uri: branding.logos.primary };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GTAlert,
+  GTButton,
+  GTIcon,
+  GTInput,
+  GTToggle,
+  GrundtoneThemeContext,
+  GrundtoneThemeProvider,
+  IconRegistryProvider,
+  LOGO_VARIANT_SIZES,
+  composeValidators,
+  cpr,
+  createBranding,
+  createTheme,
+  cvr,
+  defaultBranding,
+  defaultLogoSource,
+  email,
+  getLogoSource,
+  maxLength,
+  minLength,
+  pattern,
+  phone,
+  required,
+  shadowToRN,
+  url,
+  useField,
+  useFormValidation,
+  useGrundtoneTheme,
+  useIconRegistry
+});
+//# sourceMappingURL=index.js.map