@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-RGNY56L7.js

@@ -0,0 +1,282 @@
+import { IconTile } from './chunk-XBXUBBJZ.js';
+import { Alert } from './chunk-Z7I4ZSO6.js';
+import { Button } from './chunk-5DTKORLI.js';
+import { resolveTextRole } from './chunk-L4D5LHCH.js';
+import { Switch } from './chunk-VFDQAAIW.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
+import * as React from 'react';
+import { Animated, Text, View, Linking } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var DEFAULT_LABELS = {
+  allow: "Continue",
+  deny: "Not now",
+  deniedTitle: "Turned off in Settings",
+  openSettings: "Open Settings",
+  unavailableCapabilities: "Unavailable until the permission is re-enabled",
+  capabilityOff: (capability) => `${capability}, off`
+};
+function PermissionPrimer({
+  icon = "bell",
+  title,
+  description,
+  allowLabel,
+  onAllow,
+  denyLabel,
+  onDeny,
+  motion = "full",
+  tone = "accent",
+  size = "md",
+  variant = "soft",
+  labels: labelsProp,
+  platform
+}) {
+  const { styles } = useStyles(sheet);
+  const theme = useLoamTheme("permission");
+  const android = (platform ?? (isAndroidIdiom(theme) ? "android" : "ios")) === "android";
+  const labels = useLabels("permission", DEFAULT_LABELS, labelsProp);
+  const allow = allowLabel ?? labels.allow;
+  const deny = denyLabel ?? labels.deny;
+  const level = useResolvedMotion(motion, "permission");
+  const rise = React.useRef(new Animated.Value(level === "full" ? 0 : 1)).current;
+  React.useEffect(() => {
+    if (level !== "full") return;
+    const run = Animated.spring(rise, {
+      ...springConfig(theme, "ds"),
+      toValue: 1,
+      useNativeDriver: true
+    });
+    run.start();
+    return () => run.stop();
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      style: [
+        styles.primer,
+        size === "compact" && styles.primerCompact,
+        variant === "outline" && styles.primerOutline,
+        variant === "solid" && styles.primerSolid,
+        {
+          opacity: rise,
+          transform: [
+            {
+              translateY: rise.interpolate({
+                inputRange: [0, 1],
+                outputRange: [theme.space.s6, 0]
+              })
+            }
+          ]
+        }
+      ],
+      accessibilityRole: "alert",
+      children: [
+        /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            style: [
+              {
+                transform: [{ scale: rise.interpolate({ inputRange: [0, 1], outputRange: [0.9, 1] }) }]
+              }
+            ],
+            children: /* @__PURE__ */ jsx(IconTile, { icon, tone, size: size === "compact" ? "md" : "lg" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            accessibilityRole: "header",
+            style: [
+              styles.primerTitle,
+              // Android: the sans headline role (24 / 400) at regular weight.
+              android && {
+                ...resolveTextRole(theme, "headlineSmall", true),
+                fontFamily: theme.font.sans,
+                fontWeight: theme.fontWeight.regular
+              }
+            ],
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { style: styles.primerBody, children: description }),
+        /* @__PURE__ */ jsxs(View, { style: styles.primerActions, children: [
+          /* @__PURE__ */ jsx(Button, { size: "lg", variant: "primary", fullWidth: true, accessibilityLabel: allow, onPress: onAllow, children: allow }),
+          /* @__PURE__ */ jsx(Button, { size: "lg", variant: "ghost", fullWidth: true, accessibilityLabel: deny, onPress: onDeny, children: deny })
+        ] })
+      ]
+    }
+  );
+}
+function PermissionDenied({
+  icon = "lock",
+  title,
+  description,
+  settingsLabel,
+  onOpenSettings,
+  capabilities = [],
+  tone = "warn",
+  variant,
+  size,
+  labels: labelsProp
+}) {
+  const { styles } = useStyles(sheet);
+  const labels = useLabels("permission", DEFAULT_LABELS, labelsProp);
+  const titleText = title ?? labels.deniedTitle;
+  const settings = settingsLabel ?? labels.openSettings;
+  return /* @__PURE__ */ jsxs(View, { style: styles.deniedRoot, children: [
+    /* @__PURE__ */ jsx(
+      Alert,
+      {
+        tone,
+        variant,
+        size,
+        icon,
+        title: titleText,
+        description,
+        action: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: variant === "solid" ? "tonal" : "outline",
+            accessibilityLabel: settings,
+            onPress: onOpenSettings ?? (() => void Linking.openSettings?.()),
+            children: settings
+          }
+        )
+      }
+    ),
+    capabilities.length > 0 ? (
+      // Dimmed and inert: these rows show the cost of the denial, and must not
+      // look like something the user can flip on from here.
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          role: "group",
+          style: styles.capList,
+          accessibilityLabel: labels.unavailableCapabilities,
+          children: capabilities.map((c) => /* @__PURE__ */ jsxs(
+            View,
+            {
+              accessible: true,
+              accessibilityRole: "text",
+              accessibilityLabel: c.on ? c.label : labels.capabilityOff(c.label),
+              "aria-disabled": c.managed || void 0,
+              style: [styles.capRow, c.managed && styles.managed],
+              children: [
+                /* @__PURE__ */ jsx(Text, { style: styles.capLabel, children: c.label }),
+                /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    accessible: false,
+                    accessibilityElementsHidden: true,
+                    importantForAccessibility: "no-hide-descendants",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx(Switch, { decorative: true, value: c.on ?? false, disabled: c.managed })
+                  }
+                )
+              ]
+            },
+            c.id
+          ))
+        }
+      )
+    ) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // ---- primer ----
+  primer: {
+    paddingVertical: theme.space.s4,
+    paddingHorizontal: theme.space.s6,
+    borderRadius: theme.radius.lg,
+    backgroundColor: theme.color.surface,
+    alignItems: "center",
+    gap: theme.space[13],
+    // `shadow.lg` is the only thing lifting this card off the page, and high
+    // contrast zeroes it — `edge.neutral` takes over there, and is `transparent`
+    // before that so the primer keeps its borderless look.
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.neutral,
+    ...theme.shadow.lg
+  },
+  primerCompact: {
+    paddingVertical: theme.space.s2,
+    paddingHorizontal: theme.space.s4,
+    gap: theme.space.s2
+  },
+  primerOutline: { borderColor: theme.color.border, shadowOpacity: 0, elevation: 0 },
+  primerSolid: { backgroundColor: theme.color.surface2, shadowOpacity: 0, elevation: 0 },
+  primerTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.title3.fontSize,
+    color: theme.color.text,
+    textAlign: "center"
+  },
+  primerBody: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.fontSize * 1.5,
+    color: theme.color.text2,
+    textAlign: "center"
+  },
+  primerActions: { alignSelf: "stretch", gap: theme.space.s2 },
+  flowRoot: { gap: theme.space.s4 },
+  // ---- denied ----
+  deniedRoot: { gap: theme.space.s4 },
+  capList: {
+    borderRadius: theme.radius.lg,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface,
+    overflow: "hidden",
+    pointerEvents: "none"
+  },
+  capRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: theme.space[14],
+    borderBottomWidth: theme.borderWidth.base,
+    borderBottomColor: theme.color.border
+  },
+  capLabel: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text
+  },
+  managed: { opacity: theme.state.disabledOpacity }
+}));
+function permissionShowsDenied(status, denials, os) {
+  if (status === "blocked") return true;
+  if (status !== "denied") return false;
+  return os === "ios" || denials >= 2;
+}
+function PermissionFlow({
+  status,
+  denials = 0,
+  platform,
+  primer,
+  denied,
+  icon,
+  size,
+  variant,
+  action
+}) {
+  const theme = useLoamTheme("permission");
+  const { styles } = useStyles(sheet);
+  if (status === "granted") return null;
+  const os = platform ?? (isAndroidIdiom(theme) ? "android" : "ios");
+  const showsDenied = permissionShowsDenied(status, denials, os);
+  const shown = showsDenied ? /* @__PURE__ */ jsx(PermissionDenied, { icon, size, variant, ...denied }) : /* @__PURE__ */ jsx(PermissionPrimer, { platform: os, icon, size, variant, ...primer });
+  if (action === void 0 || action === null) return shown;
+  return /* @__PURE__ */ jsxs(View, { style: styles.flowRoot, children: [
+    shown,
+    action
+  ] });
+}
+
+export { PermissionDenied, PermissionFlow, PermissionPrimer, permissionShowsDenied };

package/dist/chunk-RIK6UX2K.js

@@ -0,0 +1,344 @@
+import { useInputPlatform, useColorTransition, useFieldValidation } from './chunk-KXLDK6HB.js';
+import { fieldSurfaceFill } from './chunk-43K3BLXV.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { NO_UA_FOCUS_RING } from './chunk-2YKVID2V.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import { useResolvedMotion } from './chunk-J64KGCGX.js';
+import * as React2 from 'react';
+import { Easing, Animated, TextInput, ActivityIndicator, View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function graphemeCount(text) {
+  const Seg = Intl.Segmenter;
+  if (Seg) {
+    let n = 0;
+    for (const _ of new Seg(void 0, { granularity: "grapheme" }).segment(text)) n++;
+    return n;
+  }
+  return Array.from(text).length;
+}
+var COUNT_ANNOUNCE_AT = [20, 10, 5, 0];
+var DEFAULT_COUNT_LABELS = {
+  left: (remaining) => `${remaining} character${remaining === 1 ? "" : "s"} left`,
+  tooMany: (over) => `${over} character${over === 1 ? "" : "s"} too many`
+};
+function useCharacterCount(value, limit, always = false, labelsProp) {
+  const labels = useLabels("characterCount", DEFAULT_COUNT_LABELS, labelsProp);
+  const count = graphemeCount(value);
+  const remaining = limit === void 0 ? Infinity : limit - count;
+  const over = remaining < 0;
+  const visible = limit !== void 0 && (always || count >= limit * 0.8 || remaining <= 20);
+  const text = limit === void 0 ? "" : over ? labels.tooMany(-remaining) : labels.left(remaining);
+  const lastRef = React2.useRef("");
+  const lastOverRef = React2.useRef(false);
+  if (limit !== void 0) {
+    const hit = COUNT_ANNOUNCE_AT.includes(remaining);
+    if (hit || over && !lastOverRef.current) {
+      lastRef.current = text;
+      lastOverRef.current = over;
+    } else if (!visible) {
+      lastRef.current = "";
+      lastOverRef.current = false;
+    }
+  }
+  return { count, remaining, visible, over, text, announcement: lastRef.current };
+}
+var ROW_HEIGHT = 22;
+var MIN_HEIGHT = 46;
+var DEFAULT_LABELS = {
+  validating: "Validating",
+  valid: "Valid",
+  invalid: "Invalid"
+};
+function Textarea({
+  error = false,
+  success = false,
+  loading = false,
+  rows = 3,
+  autoGrow = false,
+  minRows = 3,
+  maxRows = 10,
+  surface = "filled",
+  size = "lg",
+  disabled: disabledProp = false,
+  motion = "full",
+  editable: editableProp = true,
+  onFocus,
+  onBlur,
+  onContentSizeChange,
+  style,
+  containerStyle,
+  labels: labelsProp,
+  platform,
+  ...rest
+}) {
+  const labels = useLabels("textarea", DEFAULT_LABELS, labelsProp);
+  const [focused, setFocused] = React2.useState(false);
+  const disabled = disabledProp || editableProp === false;
+  const editable = !disabled;
+  const animateColour = useResolvedMotion(motion, "textarea") === "full";
+  const os = useInputPlatform(platform);
+  const { styles } = useStyles(sheet, { disabled, os });
+  const theme = useLoamTheme("textarea");
+  const tier = size === "lg" ? null : {
+    padH: theme.ctl.px[size],
+    padV: size === "md" ? theme.space[10] : size === "sm" ? theme.space.s2 : theme.space[6],
+    radius: theme.ctl.r[size],
+    fontSize: size === "md" ? theme.fontSize[16] : theme.fontSize[14]
+  };
+  const padV = 2 * (tier ? tier.padV : theme.space[10]);
+  const floor = tier ? theme.ctl[size] : MIN_HEIGHT;
+  const minHeight = Math.max(floor, (autoGrow ? minRows : rows) * ROW_HEIGHT + padV);
+  const maxHeight = maxRows * ROW_HEIGHT + padV;
+  const [grownHeight, setGrownHeight] = React2.useState(null);
+  const handleContentSizeChange = (e) => {
+    if (autoGrow) {
+      const next = Math.min(
+        Math.max(e.nativeEvent.contentSize.height + padV, minHeight),
+        maxHeight
+      );
+      setGrownHeight(next);
+    }
+    onContentSizeChange?.(e);
+  };
+  const isLoading = loading && !disabled;
+  const invalid = !isLoading && !disabled && error;
+  const valid = !isLoading && !disabled && !error && success;
+  const restFill = fieldSurfaceFill(theme, surface);
+  const tone = disabled ? { border: theme.color.borderStrong, fill: restFill } : isLoading ? { border: theme.focus.ringColor, fill: theme.color.surface } : invalid ? { border: theme.color.danger, fill: focused ? theme.color.surface : restFill } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: restFill };
+  const easing = React2.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const borderColor = useColorTransition(tone.border, theme.duration.base, easing, animateColour);
+  const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing, animateColour);
+  const handleFocus = (e) => {
+    setFocused(true);
+    onFocus?.(e);
+  };
+  const handleBlur = (e) => {
+    setFocused(false);
+    onBlur?.(e);
+  };
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      testID: "textarea-container",
+      style: [
+        styles.container,
+        tier && {
+          paddingHorizontal: tier.padH,
+          paddingVertical: tier.padV,
+          borderRadius: tier.radius
+        },
+        containerStyle,
+        { minHeight, borderColor, backgroundColor },
+        // `autoGrow`: cap the container and drive its height from the content.
+        // Until the first measurement lands it rests at the `minRows` floor.
+        autoGrow && { maxHeight, height: grownHeight ?? minHeight }
+      ],
+      accessibilityState: { disabled },
+      children: [
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ...rest,
+            multiline: true,
+            textAlignVertical: "top",
+            editable,
+            "aria-disabled": disabled || void 0,
+            placeholderTextColor: theme.color.text3,
+            "aria-invalid": invalid || void 0,
+            "aria-busy": isLoading || void 0,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onContentSizeChange: handleContentSizeChange,
+            style: [styles.input, tier && { fontSize: tier.fontSize }, NO_UA_FOCUS_RING, style]
+          }
+        ),
+        isLoading ? /* @__PURE__ */ jsx(
+          ActivityIndicator,
+          {
+            testID: "textarea-spinner",
+            size: "small",
+            color: theme.color.accent,
+            accessibilityLabel: labels.validating
+          }
+        ) : valid || invalid ? /* @__PURE__ */ jsx(
+          View,
+          {
+            testID: "textarea-status-icon",
+            accessibilityRole: "image",
+            accessibilityLabel: valid ? labels.valid : labels.invalid,
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: valid ? "check-circle" : "alert-triangle",
+                size: theme.icon.sm,
+                color: valid ? theme.color.good : theme.color.danger
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var DEFAULT_FIELD_LABELS = { ...DEFAULT_LABELS, errorPrefix: "Error: " };
+function TextareaField({
+  label,
+  hint,
+  error: errorProp,
+  success: successProp,
+  validate,
+  containerStyle,
+  onBlur,
+  onChangeText,
+  showCount = false,
+  maxLength,
+  labels: labelsProp,
+  ...textareaProps
+}) {
+  const os = useInputPlatform(textareaProps.platform);
+  const { styles } = useStyles(fieldSheet, { os });
+  const labels = useLabels("textareaField", DEFAULT_FIELD_LABELS, labelsProp);
+  const [own, setOwn] = React2.useState(textareaProps.defaultValue ?? "");
+  const text = textareaProps.value ?? own;
+  const counter = useCharacterCount(text, showCount ? maxLength : void 0);
+  const {
+    error: validated,
+    success,
+    ...handlers
+  } = useFieldValidation({
+    validate,
+    error: errorProp,
+    success: successProp,
+    value: textareaProps.value,
+    onBlur,
+    onChangeText: (next) => {
+      setOwn(next);
+      onChangeText?.(next);
+    }
+  });
+  const error = validated ?? (counter.over ? counter.text : void 0);
+  const theme = useLoamTheme("textarea");
+  const labelId = React2.useId();
+  return (
+    // Sizing lands here, not on the inner `Textarea`: a label and helper line that
+    // did not follow the field's width would read as a different control.
+    /* @__PURE__ */ jsxs(View, { style: [styles.field, containerStyle], children: [
+      label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: [styles.label, error ? styles.labelError : null], children: label }) : null,
+      /* @__PURE__ */ jsx(
+        Textarea,
+        {
+          ...textareaProps,
+          ...handlers,
+          maxLength: showCount ? void 0 : maxLength,
+          labels,
+          success,
+          "aria-labelledby": label ? labelId : textareaProps["aria-labelledby"],
+          error: Boolean(error)
+        }
+      ),
+      error ? (
+        // Colour, icon and text together; the alert role announces it when it appears.
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            accessibilityRole: "alert",
+            accessibilityLabel: `${labels.errorPrefix}${error}`,
+            style: styles.errorRow,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "alert-triangle", size: theme.icon.sm, color: theme.color.dangerOnSoft }),
+              /* @__PURE__ */ jsx(Text, { style: styles.error, children: error })
+            ]
+          }
+        )
+      ) : hint ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: hint }) : null,
+      showCount && maxLength !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        counter.visible && !(counter.over && !validated) ? /* @__PURE__ */ jsx(Text, { testID: "textarea-count", style: [styles.hint, counter.over && styles.countOver], children: counter.text }) : null,
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            role: "status",
+            accessibilityLiveRegion: "polite",
+            accessible: Boolean(counter.announcement),
+            accessibilityLabel: counter.announcement || void 0
+          }
+        )
+      ] }) : null
+    ] })
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // `borderColor` / `backgroundColor` are supplied at the use site as animated
+  // values, so the field can travel between states over `duration.base`.
+  container: {
+    // The reference draws a `1.5px` field edge — the static `w2` weight.
+    borderWidth: theme.borderWidth.thick,
+    borderRadius: theme.radius.md,
+    flexDirection: "row",
+    alignItems: "flex-start",
+    gap: theme.space.s2,
+    paddingHorizontal: theme.space[14],
+    paddingVertical: theme.space[10],
+    variants: {
+      // Matches Input (R5): the whole shell sits at `state.disabledOpacity`.
+      disabled: {
+        true: { opacity: theme.state.disabledOpacity },
+        false: {}
+      }
+    }
+  },
+  input: {
+    flex: 1,
+    // Same as `Input`: the `<textarea>` react-native-web renders carries a
+    // `min-width: auto` intrinsic floor, which would push the field out of a
+    // container narrower than that measure. Yoga already defaults to 0.
+    minWidth: 0,
+    padding: 0,
+    color: theme.color.text,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[16],
+    variants: {
+      // The value: 17 on iOS, 16 on Android (Final 02).
+      os: {
+        ios: { fontSize: theme.fontSize[17] },
+        android: { fontSize: theme.fontSize[16] }
+      },
+      // The value keeps primary `text`; the shell's opacity does the dimming.
+      disabled: {
+        true: { color: theme.color.text },
+        false: {}
+      }
+    }
+  }
+}));
+var fieldSheet = createStyleSheet((theme) => ({
+  field: { gap: theme.space[6] },
+  // R11, as Input: 13 / 600 on iOS, 14 / 500 on Android, in `text`.
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[13], fontWeight: theme.fontWeight.semibold },
+        android: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium }
+      }
+    }
+  },
+  labelError: { color: theme.color.dangerOnSoft },
+  hint: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.text3
+  },
+  countOver: { color: theme.color.dangerOnSoft },
+  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  error: {
+    flexShrink: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    color: theme.color.dangerOnSoft
+  }
+}));
+
+export { Textarea, TextareaField };