@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-74FLKD24.js

@@ -1,237 +0,0 @@
-import { useColorTransition, useFieldValidation } from './chunk-7BUIKDD6.js';
-import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import * as React from 'react';
-import { Easing, Animated, TextInput, ActivityIndicator, View, Text } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var ROW_HEIGHT = 22;
-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,
-  editable = true,
-  onFocus,
-  onBlur,
-  onContentSizeChange,
-  style,
-  containerStyle,
-  labels: labelsProp,
-  ...rest
-}) {
-  const labels = useLabels("textarea", DEFAULT_LABELS, labelsProp);
-  const [focused, setFocused] = React.useState(false);
-  const disabled = editable === false;
-  const { styles } = useStyles(sheet, { disabled });
-  const theme = useLoamTheme("textarea");
-  const padV = 2 * theme.space.s3;
-  const minHeight = (autoGrow ? minRows : rows) * ROW_HEIGHT + padV;
-  const maxHeight = maxRows * ROW_HEIGHT + padV;
-  const [grownHeight, setGrownHeight] = React.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 tone = disabled ? { border: theme.color.border, fill: theme.color.surface3 } : isLoading ? { border: theme.focus.ringColor, fill: theme.color.surface } : invalid ? { border: theme.color.danger, fill: theme.color.dangerSoft } : valid ? { border: theme.color.good, fill: theme.color.goodSoft } : focused ? { border: theme.focus.ringColor, fill: theme.color.surface } : { border: theme.color.borderStrong, fill: theme.color.surface2 };
-  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
-  const borderColor = useColorTransition(tone.border, theme.duration.base, easing);
-  const backgroundColor = useColorTransition(tone.fill, theme.duration.base, easing);
-  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,
-        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,
-            placeholderTextColor: theme.color.text3,
-            "aria-invalid": invalid || void 0,
-            "aria-busy": isLoading || void 0,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            onContentSizeChange: handleContentSizeChange,
-            style: [styles.input, 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.goodOnSoft : theme.color.dangerOnSoft
-              }
-            )
-          }
-        ) : null
-      ]
-    }
-  );
-}
-function TextareaField({
-  label,
-  hint,
-  error: errorProp,
-  success: successProp,
-  validate,
-  containerStyle,
-  onBlur,
-  onChangeText,
-  ...textareaProps
-}) {
-  const { styles } = useStyles(fieldSheet);
-  const { error, success, ...handlers } = useFieldValidation({
-    validate,
-    error: errorProp,
-    success: successProp,
-    value: textareaProps.value,
-    onBlur,
-    onChangeText
-  });
-  const theme = useLoamTheme("textarea");
-  const labelId = React.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, children: label }) : null,
-      /* @__PURE__ */ jsx(
-        Textarea,
-        {
-          ...textareaProps,
-          ...handlers,
-          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", 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
-    ] })
-  );
-}
-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.s3,
-    paddingVertical: theme.space.s3,
-    variants: {
-      // Matches Input: no blanket `opacity` (which dimmed the value text on a
-      // `readonly` field — not WCAG-exempt — to ~2.2:1). The locked look reads
-      // from the `surface3` fill, plain `border` edge and `text2` value colour.
-      disabled: {
-        true: {},
-        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: {
-      // Solid value colour for the locked field — the locked look reads from the
-      // `surface3` fill and plain edge, not a dimmed ink. `text2` measures only
-      // 4.4:1 on `surface3` (WCAG fail), so the value keeps primary `text`.
-      disabled: {
-        true: { color: theme.color.text },
-        false: {}
-      }
-    }
-  }
-}));
-var fieldSheet = createStyleSheet((theme) => ({
-  field: { gap: theme.space.s2 },
-  label: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text2
-  },
-  hint: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[12],
-    color: theme.color.text3
-  },
-  errorRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
-  error: {
-    flexShrink: 1,
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[12],
-    color: theme.color.danger
-  }
-}));
-
-export { Textarea, TextareaField };

package/dist/chunk-CMTVNF3D.js

@@ -1,104 +0,0 @@
-import { haptics } from './chunk-NY2U3PBI.js';
-import * as React from 'react';
-import { StyleSheet, Animated, Pressable, Easing } from 'react-native';
-import { useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function Touchable({
-  children,
-  onPress,
-  scaleTo = 0.97,
-  ripple = true,
-  hapticOnPress = false,
-  disabled = false,
-  style,
-  accessibilityLabel
-}) {
-  const theme = useLoamTheme("interactions");
-  const scale = React.useRef(new Animated.Value(1)).current;
-  const highlight = React.useRef(new Animated.Value(0)).current;
-  const overlayOpacity = highlight.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.14]
-  });
-  const layerIn = theme.motion.hover;
-  const layerOut = theme.motion.exit;
-  const animateScale = !theme.reduceMotion;
-  const pressIn = () => {
-    if (animateScale) {
-      Animated.spring(scale, {
-        toValue: scaleTo,
-        useNativeDriver: true,
-        speed: 40,
-        bounciness: 6
-      }).start();
-    }
-    if (ripple) {
-      Animated.timing(highlight, {
-        toValue: 1,
-        duration: layerIn.duration,
-        easing: Easing.bezier(...layerIn.easing),
-        useNativeDriver: true
-      }).start();
-    }
-  };
-  const pressOut = () => {
-    if (animateScale) {
-      Animated.spring(scale, {
-        toValue: 1,
-        useNativeDriver: true,
-        speed: 40,
-        bounciness: 6
-      }).start();
-    }
-    if (ripple) {
-      Animated.timing(highlight, {
-        toValue: 0,
-        duration: layerOut.duration,
-        easing: Easing.bezier(...layerOut.easing),
-        useNativeDriver: true
-      }).start();
-    }
-  };
-  const handlePress = () => {
-    if (hapticOnPress) haptics.selection();
-    onPress?.();
-  };
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel,
-      accessibilityState: { disabled },
-      disabled,
-      onPress: disabled ? void 0 : handlePress,
-      onPressIn: disabled ? void 0 : pressIn,
-      onPressOut: disabled ? void 0 : pressOut,
-      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, style, { transform: [{ scale }] }], children: [
-        children,
-        ripple ? /* @__PURE__ */ jsx(
-          Animated.View,
-          {
-            style: [
-              StyleSheet.absoluteFillObject,
-              styles.highlight,
-              {
-                backgroundColor: theme.color.accent,
-                opacity: overlayOpacity,
-                pointerEvents: "none"
-              }
-            ]
-          }
-        ) : null
-      ] })
-    }
-  );
-}
-var styles = StyleSheet.create({
-  // Clips the highlight overlay to the container's own border radius.
-  base: { overflow: "hidden", position: "relative" },
-  // Kept subtle — the animated `opacity` tops out well below this ceiling.
-  highlight: { opacity: 0 }
-});
-
-export { Touchable };