@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-WS56BL3D.js

@@ -0,0 +1 @@
+

package/dist/chunk-WSW6ZFAQ.js

@@ -0,0 +1,98 @@
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import * as React from 'react';
+import { Animated, Easing, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function StreamFade({ children, inline = false, style }) {
+  const theme = useLoamTheme();
+  const opacity = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, [opacity, theme]);
+  const Comp = inline ? Animated.Text : Animated.View;
+  return /* @__PURE__ */ jsx(Comp, { style: [{ opacity }, style], children });
+}
+function Caret() {
+  const theme = useLoamTheme();
+  const opacity = React.useRef(new Animated.Value(1)).current;
+  const blink = theme.duration[500];
+  React.useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        // A hard on/off blink: hold, then flip in ~1ms. Half lit, half dark.
+        // The hold is the 500ms duration step, so the cycle is a round second.
+        Animated.timing(opacity, {
+          toValue: 0,
+          duration: 1,
+          delay: blink,
+          useNativeDriver: true
+        }),
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 1,
+          delay: blink,
+          useNativeDriver: true
+        })
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity, blink]);
+  return /* @__PURE__ */ jsx(
+    Animated.Text,
+    {
+      "aria-hidden": true,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { opacity },
+      children: "\u258D"
+    }
+  );
+}
+function StreamingText({
+  text,
+  children,
+  streaming = false,
+  motion = "full",
+  style
+}) {
+  const { styles } = useStyles(sheet);
+  const resolved = useResolvedMotion(motion);
+  const animate = resolved === "full";
+  const content = text ?? (typeof children === "string" ? children : void 0);
+  const prevRef = React.useRef("");
+  React.useEffect(() => {
+    if (content !== void 0) prevRef.current = content;
+  });
+  const rootStyle = [styles.root, style];
+  if (!animate || content === void 0) {
+    return /* @__PURE__ */ jsx(Text, { style: rootStyle, "aria-busy": streaming || void 0, children: content ?? children });
+  }
+  const prev = prevRef.current;
+  const settled = prev && content.startsWith(prev) ? prev : "";
+  const tail = content.slice(settled.length);
+  return /* @__PURE__ */ jsxs(Text, { style: rootStyle, "aria-busy": streaming || void 0, children: [
+    settled,
+    tail ? /* @__PURE__ */ jsx(StreamFade, { inline: true, children: tail }, settled.length) : null,
+    streaming ? /* @__PURE__ */ jsx(Caret, {}) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Body copy at full ink — AA on the surface in both modes; the transient fade
+  // never leaves it dimmed, so the accessible text is always full-contrast.
+  root: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing,
+    color: theme.color.text
+  }
+}));
+
+export { Caret, StreamFade, StreamingText };