@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-K3TK3GIV.js

@@ -0,0 +1,219 @@
+import { alertToneColors, DismissButton } from './chunk-Z7I4ZSO6.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useFocusRing } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { Animated, Easing, View, Text, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  title: "There's a problem",
+  dismiss: "Dismiss"
+};
+function ErrorSummary({
+  errors,
+  title: titleProp,
+  onFocusField,
+  motion = "full",
+  dismissible = false,
+  onDismiss,
+  labels: labelsProp,
+  icon = "alert-circle",
+  tone = "danger",
+  variant = "soft",
+  action,
+  size = "md"
+}) {
+  const labels = useLabels("errorSummary", DEFAULT_LABELS, labelsProp);
+  const title = titleProp ?? labels.title;
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("error-summary");
+  const animated = motion === "full" && !theme.reduceMotion;
+  const progress = React.useRef(new Animated.Value(animated ? 0 : 1)).current;
+  const enterEasing = React.useMemo(
+    () => Easing.bezier(...theme.motion.enter.easing),
+    [theme.motion.enter.easing]
+  );
+  React.useEffect(() => {
+    if (!animated) {
+      progress.setValue(1);
+      return;
+    }
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: enterEasing,
+      useNativeDriver: true
+    }).start();
+  }, [animated, progress, enterEasing, theme.motion.enter.duration]);
+  if (errors.length === 0) return null;
+  const colors = alertToneColors(theme, tone);
+  const edge = theme.edge[tone];
+  const chipInk = {
+    danger: theme.color.dangerInk,
+    good: theme.color.goodInk,
+    warn: theme.color.warnInk,
+    info: theme.color.infoInk,
+    neutral: theme.color.surface
+  }[tone];
+  const compact = size === "sm";
+  const toned = tone !== "danger" || variant !== "soft";
+  const translateY = progress.interpolate({ inputRange: [0, 1], outputRange: [-4, 0] });
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: "alert",
+      accessibilityLabel: title,
+      style: [
+        styles.region,
+        toned && {
+          backgroundColor: variant === "outline" ? theme.color.surface : colors.tint,
+          borderColor: edge
+        },
+        { opacity: progress, transform: [{ translateY }] }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.header,
+              compact && styles.headerCompact,
+              toned && { borderBottomColor: edge }
+            ],
+            children: [
+              icon === false ? null : /* @__PURE__ */ jsx(View, { style: [styles.chip, toned && { backgroundColor: colors.border }], children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.sm, color: chipInk }) }),
+              /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+              dismissible || onDismiss != null ? /* @__PURE__ */ jsx(
+                DismissButton,
+                {
+                  label: labels.dismiss,
+                  onPress: () => onDismiss?.(),
+                  color: theme.color.text3
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(View, { style: [styles.list, compact && styles.listCompact], children: [
+          errors.map((err) => /* @__PURE__ */ jsx(
+            ErrorLink,
+            {
+              message: err.message,
+              label: err.label,
+              dot: toned ? colors.border : void 0,
+              onPress: () => onFocusField?.(err.fieldId)
+            },
+            err.fieldId
+          )),
+          action
+        ] })
+      ]
+    }
+  );
+}
+function ErrorLink({
+  message,
+  label,
+  dot,
+  onPress
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("error-summary");
+  const focusRing = useFocusRing(theme.radius.xs);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "link",
+      accessibilityLabel: label ? `${label}: ${message}` : message,
+      onPress,
+      onFocus: focusRing.handlers.onFocus,
+      onBlur: focusRing.handlers.onBlur,
+      hitSlop: { top: theme.space[6], bottom: theme.space[6] },
+      style: [styles.item, focusRing.style],
+      children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.dot, dot !== void 0 && { backgroundColor: dot }] }),
+        label ? /* @__PURE__ */ jsxs(Text, { style: styles.message, children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.link, children: label }),
+          ` \u2014 ${message}`
+        ] }) : /* @__PURE__ */ jsx(Text, { style: styles.link, children: message })
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // Danger tone via the soft tint + on-soft ink (clears AA), with the tone edge
+  // that carries the meaning under high contrast (where the tint collapses).
+  // r 12 (the alert corner); the header and the list each pad 16 / 12.
+  region: {
+    overflow: "hidden",
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.dangerSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.danger
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[10],
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s3,
+    // Divider: danger-edge between the header and the list.
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.edge.danger
+  },
+  headerCompact: { paddingVertical: theme.space.s2 },
+  listCompact: { paddingVertical: theme.space.s2, gap: theme.space.s1 },
+  // 26 danger icon chip.
+  chip: {
+    width: theme.ctl.xs,
+    height: theme.ctl.xs,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.danger,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  title: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.fontSize[14],
+    // Ink, as web: the chip carries the tone, the title stays readable.
+    color: theme.color.text
+  },
+  list: {
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space.s4,
+    paddingVertical: theme.space.s3
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space[10]
+  },
+  // 6 px danger dot, aligned to the first line.
+  dot: {
+    width: theme.space[6],
+    height: theme.space[6],
+    marginTop: theme.space[6],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.danger
+  },
+  link: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text,
+    textDecorationLine: "underline"
+  },
+  message: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  }
+}));
+
+export { ErrorSummary };