@lockin90/ui-native 0.0.0-stage → 1.0.0

package/lib/module/components/Toolbar.js

@@ -0,0 +1,306 @@
+"use strict";
+
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import Svg, { Path, Circle, Rect } from 'react-native-svg';
+import { colors, radii, fonts } from '@lockin90/tokens';
+
+/* expo-document-picker is an optional peer dependency. Resolve it lazily so the
+ * kit never hard-depends on it: when installed, tapping the Dropzone opens the
+ * OS file picker and forwards results via `onFiles`; when absent, only the
+ * `onPress` hook fires (graceful fallback — mirrors the CopyButton/expo-clipboard
+ * pattern). RN has no OS file-drag-drop, so tap-to-pick is the native analogue. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let documentPicker = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  documentPicker = require('expo-document-picker');
+} catch {
+  documentPicker = null;
+}
+
+/* ============================================================================
+   Toolbar — a rich-text formatting bar: a horizontal group of ~30px icon
+   Pressables in a glass strip, with thin vertical divider Views between groups.
+   Active buttons take an accent (violet) tint. Mirrors the web `Toolbar`.
+   ========================================================================== */
+
+/** Shared stroke props for the inline default-set glyphs. */
+const stroke = {
+  fill: 'none',
+  strokeWidth: 1.8,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round'
+};
+
+/** Default sample set: bold, italic | list, link, image — mirrors the web set. */
+const DEFAULT_ITEMS = [{
+  label: 'Bold',
+  active: true,
+  icon: /*#__PURE__*/_jsx(Text, {
+    style: {
+      fontSize: 14,
+      color: colors.textDim,
+      fontFamily: fonts.display,
+      fontWeight: '700'
+    },
+    children: "B"
+  })
+}, {
+  label: 'Italic',
+  icon: /*#__PURE__*/_jsx(Text, {
+    style: {
+      fontSize: 14,
+      color: colors.textDim,
+      fontFamily: fonts.display,
+      fontStyle: 'italic'
+    },
+    children: "I"
+  })
+}, {
+  divider: true,
+  icon: null
+}, {
+  label: 'Bulleted list',
+  icon: /*#__PURE__*/_jsxs(Svg, {
+    width: 15,
+    height: 15,
+    viewBox: "0 0 24 24",
+    stroke: colors.textDim,
+    ...stroke,
+    children: [/*#__PURE__*/_jsx(Path, {
+      d: "M8 6h12M8 12h12M8 18h12"
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: 4,
+      cy: 6,
+      r: 1.4,
+      fill: colors.textDim,
+      stroke: "none"
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: 4,
+      cy: 12,
+      r: 1.4,
+      fill: colors.textDim,
+      stroke: "none"
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: 4,
+      cy: 18,
+      r: 1.4,
+      fill: colors.textDim,
+      stroke: "none"
+    })]
+  })
+}, {
+  label: 'Link',
+  icon: /*#__PURE__*/_jsxs(Svg, {
+    width: 15,
+    height: 15,
+    viewBox: "0 0 24 24",
+    stroke: colors.textDim,
+    ...stroke,
+    children: [/*#__PURE__*/_jsx(Path, {
+      d: "M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1"
+    }), /*#__PURE__*/_jsx(Path, {
+      d: "M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1"
+    })]
+  })
+}, {
+  label: 'Image',
+  icon: /*#__PURE__*/_jsxs(Svg, {
+    width: 15,
+    height: 15,
+    viewBox: "0 0 24 24",
+    stroke: colors.textDim,
+    ...stroke,
+    children: [/*#__PURE__*/_jsx(Rect, {
+      x: 3,
+      y: 4,
+      width: 18,
+      height: 16,
+      rx: 2
+    }), /*#__PURE__*/_jsx(Circle, {
+      cx: 8.5,
+      cy: 9.5,
+      r: 1.6
+    }), /*#__PURE__*/_jsx(Path, {
+      d: "m4 18 5-5 4 4 3-3 4 4"
+    })]
+  })
+}];
+
+/**
+ * Horizontal icon-button group for rich-text formatting.
+ *
+ * Native has no `currentColor` inheritance, so each item glyph must set its own
+ * color: the default-set svgs use an explicit token color (`colors.textDim`) so
+ * they stay visible on the dark glass bar. Pass an already-colored glyph (or the
+ * shared `Icon`) for production use — for an active item, color it `colors.text`
+ * or `colors.accent` to match the accent tint.
+ */
+export function Toolbar({
+  items = DEFAULT_ITEMS,
+  style
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.bar, style],
+    accessibilityRole: "toolbar",
+    children: items.map((item, i) => item.divider ? /*#__PURE__*/_jsx(View, {
+      style: styles.divider
+    }, i) : /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: item.label,
+      accessibilityState: {
+        selected: item.active
+      },
+      onPress: item.onPress,
+      style: ({
+        pressed
+      }) => [styles.btn, item.active && styles.btnOn, pressed && !item.active && styles.btnPressed],
+      children: item.icon
+    }, i))
+  });
+}
+
+/* ============================================================================
+   Dropzone — a large dashed-border file-drop area: centered round icon badge +
+   label + hint. Native can't receive OS file *drops*, so the box is a Pressable;
+   when the optional `expo-document-picker` peer is present, tapping opens the OS
+   picker and forwards results via `onFiles` (else just `onPress`). Mirrors the
+   web `Dropzone` (where tapping opens the file dialog).
+   ========================================================================== */
+
+const DEFAULT_DZ_ICON = /*#__PURE__*/_jsxs(Svg, {
+  width: 22,
+  height: 22,
+  viewBox: "0 0 24 24",
+  stroke: colors.accent2,
+  ...stroke,
+  children: [/*#__PURE__*/_jsx(Path, {
+    d: "M12 16V4M8 8l4-4 4 4"
+  }), /*#__PURE__*/_jsx(Path, {
+    d: "M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"
+  })]
+});
+
+/** Dashed-border drop area — tap to trigger a picker (no native file drop). */
+export function Dropzone({
+  label = 'Drop files here or click to upload',
+  hint = 'PNG, JPG up to 10MB',
+  icon = DEFAULT_DZ_ICON,
+  onPress,
+  onFiles,
+  style
+}) {
+  const pick = async () => {
+    onPress?.();
+    if (typeof documentPicker?.getDocumentAsync !== 'function') return;
+    try {
+      const res = await documentPicker.getDocumentAsync({
+        multiple: true,
+        copyToCacheDirectory: true
+      });
+      if (!res || res.canceled) return;
+      // expo-document-picker v12+ → { canceled, assets }; older → { type:'success', … }
+      const files = res.assets ?? (res.type === 'success' ? [res] : []);
+      if (files.length) onFiles?.(files);
+    } catch {
+      /* user dismissed or picker unavailable — no-op */
+    }
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    onPress: pick,
+    style: ({
+      pressed
+    }) => [styles.dropzone, pressed && styles.dropzoneActive, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.dzIco,
+      children: icon
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.dzLabel,
+      children: label
+    }), /*#__PURE__*/_jsx(Text, {
+      style: styles.dzHint,
+      children: hint
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  // Toolbar
+  bar: {
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 3,
+    padding: 4,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass2
+  },
+  btn: {
+    width: 30,
+    height: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 7,
+    borderWidth: 1,
+    borderColor: 'transparent'
+  },
+  btnPressed: {
+    backgroundColor: colors.glass2
+  },
+  btnOn: {
+    backgroundColor: 'rgba(124, 92, 255, 0.16)',
+    borderColor: 'rgba(124, 92, 255, 0.4)'
+  },
+  divider: {
+    width: 1,
+    height: 22,
+    marginHorizontal: 4,
+    marginVertical: 2,
+    backgroundColor: colors.border2
+  },
+  // Dropzone
+  dropzone: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+    minHeight: 168,
+    padding: 28,
+    borderRadius: radii.md,
+    borderWidth: 1.5,
+    borderStyle: 'dashed',
+    borderColor: colors.border2,
+    backgroundColor: 'rgba(124, 92, 255, 0.04)'
+  },
+  dropzoneActive: {
+    borderColor: colors.accent2,
+    backgroundColor: 'rgba(34, 211, 238, 0.06)'
+  },
+  dzIco: {
+    width: 46,
+    height: 46,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 23,
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass
+  },
+  dzLabel: {
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.text,
+    textAlign: 'center'
+  },
+  dzHint: {
+    fontFamily: fonts.ui,
+    fontSize: 12,
+    color: colors.textFaint,
+    textAlign: 'center'
+  }
+});
+//# sourceMappingURL=Toolbar.js.map

package/lib/module/components/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","Pressable","StyleSheet","Svg","Path","Circle","Rect","colors","radii","fonts","jsx","_jsx","jsxs","_jsxs","documentPicker","require","stroke","fill","strokeWidth","strokeLinecap","strokeLinejoin","DEFAULT_ITEMS","label","active","icon","style","fontSize","color","textDim","fontFamily","display","fontWeight","children","fontStyle","divider","width","height","viewBox","d","cx","cy","r","x","y","rx","Toolbar","items","styles","bar","accessibilityRole","map","item","i","accessibilityLabel","accessibilityState","selected","onPress","pressed","btn","btnOn","btnPressed","DEFAULT_DZ_ICON","accent2","Dropzone","hint","onFiles","pick","getDocumentAsync","res","multiple","copyToCacheDirectory","canceled","files","assets","type","length","dropzone","dropzoneActive","dzIco","dzLabel","dzHint","create","alignSelf","flexDirection","flexWrap","alignItems","gap","padding","borderRadius","sm","borderWidth","borderColor","border2","backgroundColor","glass2","justifyContent","marginHorizontal","marginVertical","minHeight","md","borderStyle","glass","ui","text","textAlign","textFaint"],"sourceRoot":"../../../src","sources":["components/Toolbar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Tooltip.js

@@ -0,0 +1,241 @@
+"use strict";
+
+import { useRef, useState } from 'react';
+import { View, Text, Pressable, StyleSheet, Modal, Dimensions } from 'react-native';
+import { colors, radii, fonts, nativeShadows } from '@lockin90/tokens';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  width: SW,
+  height: SH
+} = Dimensions.get('window');
+const EST_W = 160;
+const EST_H = 32;
+const GAP = 8;
+/** arrow square side (px) — its rotated diamond pokes ARROW/2 past the edge */
+const ARROW = 8;
+/** keep the arrow at least this far from the bubble's corners (cross axis) */
+const ARROW_INSET = 12;
+
+/** Which edge the arrow straddles + which two borders form its outward V, for the
+ *  resolved placement. After `rotate(45deg)`, the kept border pair matches the web
+ *  `.lk-tip-<placement>::after` rules so the diamond points at the trigger. */
+function arrowEdgeStyle(p) {
+  switch (p) {
+    case 'bottom':
+      // bubble below trigger → arrow on top edge, points up
+      return {
+        top: -ARROW / 2,
+        borderTopWidth: 1,
+        borderLeftWidth: 1
+      };
+    case 'left':
+      // bubble left of trigger → arrow on right edge, points right
+      return {
+        right: -ARROW / 2,
+        borderTopWidth: 1,
+        borderRightWidth: 1
+      };
+    case 'right':
+      // bubble right of trigger → arrow on left edge, points left
+      return {
+        left: -ARROW / 2,
+        borderBottomWidth: 1,
+        borderLeftWidth: 1
+      };
+    case 'top': // bubble above trigger → arrow on bottom edge, points down
+    default:
+      return {
+        bottom: -ARROW / 2,
+        borderRightWidth: 1,
+        borderBottomWidth: 1
+      };
+  }
+}
+
+/** Press-to-show tooltip (native has no hover) — wraps a trigger and toggles a
+ *  glassy bubble positioned above/below/beside it in a transparent Modal,
+ *  anchored to the measured trigger and clamped on-screen. Tapping again (or the
+ *  backdrop) hides it. Mirrors the web `Tooltip` prop API + bubble styling. */
+export function Tooltip({
+  content = 'Tooltip',
+  placement = 'top',
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState(null);
+  const [size, setSize] = useState({
+    pw: EST_W,
+    ph: EST_H
+  });
+  const triggerRef = useRef(null);
+  const triggerNode = children ?? /*#__PURE__*/_jsx(View, {
+    style: styles.badge,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.badgeText,
+      children: "?"
+    })
+  });
+  const openBubble = () => {
+    triggerRef.current?.measureInWindow((x, y, w, h) => setAnchor({
+      x,
+      y,
+      w,
+      h
+    }));
+    setOpen(true);
+  };
+  const {
+    pw,
+    ph
+  } = size;
+  let top = 0;
+  let left = 0;
+  // the side the bubble ACTUALLY landed on (drives the arrow) — `top` flips to
+  // `bottom` when there's no room above, so it can differ from `placement`.
+  let resolved = placement;
+  if (anchor) {
+    switch (placement) {
+      case 'bottom':
+        top = anchor.y + anchor.h + GAP;
+        left = anchor.x + anchor.w / 2 - pw / 2;
+        break;
+      case 'left':
+        top = anchor.y + anchor.h / 2 - ph / 2;
+        left = anchor.x - GAP - pw;
+        break;
+      case 'right':
+        top = anchor.y + anchor.h / 2 - ph / 2;
+        left = anchor.x + anchor.w + GAP;
+        break;
+      case 'top':
+      default:
+        {
+          // place above; fall back below when there's no room above
+          const above = anchor.y - GAP - ph;
+          const fitsAbove = above > 0;
+          top = fitsAbove ? above : anchor.y + anchor.h + GAP;
+          left = anchor.x + anchor.w / 2 - pw / 2;
+          resolved = fitsAbove ? 'top' : 'bottom';
+          break;
+        }
+    }
+    top = Math.max(8, Math.min(top, SH - ph - 8));
+    left = Math.max(8, Math.min(left, SW - pw - 8));
+  }
+
+  // arrow geometry — a rotated square straddling the edge that faces the trigger,
+  // tracking the trigger's center along the cross axis (clamped inside the bubble),
+  // mirroring the web `.lk-tip-bubble::after` diamond pointer.
+  const arrowEdge = arrowEdgeStyle(resolved);
+  let arrowCross = {};
+  if (anchor) {
+    if (resolved === 'top' || resolved === 'bottom') {
+      const cx = anchor.x + anchor.w / 2 - left; // trigger center, relative to bubble
+      const clamped = Math.max(ARROW_INSET, Math.min(cx, pw - ARROW_INSET));
+      arrowCross = {
+        left: clamped - ARROW / 2
+      };
+    } else {
+      const cy = anchor.y + anchor.h / 2 - top;
+      const clamped = Math.max(ARROW_INSET, Math.min(cy, ph - ARROW_INSET));
+      arrowCross = {
+        top: clamped - ARROW / 2
+      };
+    }
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      ref: triggerRef,
+      accessibilityRole: "button",
+      onPress: () => open ? setOpen(false) : openBubble(),
+      children: triggerNode
+    }), /*#__PURE__*/_jsxs(Modal, {
+      visible: open,
+      transparent: true,
+      animationType: "fade",
+      onRequestClose: () => setOpen(false),
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: styles.backdrop,
+        onPress: () => setOpen(false)
+      }), anchor != null && /*#__PURE__*/_jsxs(View, {
+        style: [styles.bubble, {
+          top,
+          left
+        }],
+        pointerEvents: "none",
+        onLayout: e => {
+          const {
+            width,
+            height
+          } = e.nativeEvent.layout;
+          if (width !== pw || height !== ph) setSize({
+            pw: width,
+            ph: height
+          });
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.arrow, arrowEdge, arrowCross]
+        }), typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
+          style: styles.text,
+          children: content
+        }) : content]
+      })]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    alignSelf: 'flex-start'
+  },
+  badge: {
+    width: 16,
+    height: 16,
+    borderRadius: radii.pill,
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  badgeText: {
+    fontFamily: fonts.ui,
+    fontSize: 11,
+    fontWeight: '600',
+    color: colors.textDim
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject
+  },
+  bubble: {
+    position: 'absolute',
+    maxWidth: 220,
+    paddingVertical: 6,
+    paddingHorizontal: 9,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.bg1,
+    ...nativeShadows.elev1
+  },
+  text: {
+    fontFamily: fonts.ui,
+    fontSize: 12,
+    lineHeight: 16,
+    color: colors.text
+  },
+  // rotated square sharing the bubble surface + border; its inner half overlaps
+  // (and hides) the bubble's edge border, leaving the outward-facing V — the same
+  // technique as the web `::after` diamond pointer.
+  arrow: {
+    position: 'absolute',
+    width: ARROW,
+    height: ARROW,
+    backgroundColor: colors.bg1,
+    borderColor: colors.border2,
+    transform: [{
+      rotate: '45deg'
+    }]
+  }
+});
+//# sourceMappingURL=Tooltip.js.map

package/lib/module/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useRef","useState","View","Text","Pressable","StyleSheet","Modal","Dimensions","colors","radii","fonts","nativeShadows","jsx","_jsx","jsxs","_jsxs","width","SW","height","SH","get","EST_W","EST_H","GAP","ARROW","ARROW_INSET","arrowEdgeStyle","p","top","borderTopWidth","borderLeftWidth","right","borderRightWidth","left","borderBottomWidth","bottom","Tooltip","content","placement","children","open","setOpen","anchor","setAnchor","size","setSize","pw","ph","triggerRef","triggerNode","style","styles","badge","badgeText","openBubble","current","measureInWindow","x","y","w","h","resolved","above","fitsAbove","Math","max","min","arrowEdge","arrowCross","cx","clamped","cy","root","ref","accessibilityRole","onPress","visible","transparent","animationType","onRequestClose","backdrop","bubble","pointerEvents","onLayout","e","nativeEvent","layout","arrow","text","create","alignSelf","borderRadius","pill","borderWidth","borderColor","border2","backgroundColor","glass2","alignItems","justifyContent","fontFamily","ui","fontSize","fontWeight","color","textDim","absoluteFillObject","position","maxWidth","paddingVertical","paddingHorizontal","sm","bg1","elev1","lineHeight","transform","rotate"],"sourceRoot":"../../../src","sources":["components/Tooltip.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/TypingIndicator.js

@@ -0,0 +1,108 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DOT_COUNT = 3;
+
+/**
+ * TypingIndicator — a small left-aligned glass bubble (an incoming-message
+ * look) holding three dots that bounce/pulse in a staggered loop to signal
+ * someone composing. Mirrors the web `@lockin90/ui` `TypingIndicator` and the
+ * `DotsLoader` animation convention (1.2s-ish cycle, 0.16s stagger, -4px
+ * bounce + 0.7→1 scale + 0.5→1 opacity) using Animated loops. An optional
+ * `label` renders as small dim text before the dots.
+ */
+export function TypingIndicator({
+  label,
+  style
+}) {
+  // one driver per dot; 0 = resting (down/dim), 1 = peak (up/bright)
+  const valsRef = useRef([]);
+  if (valsRef.current.length !== DOT_COUNT) {
+    valsRef.current = Array.from({
+      length: DOT_COUNT
+    }, () => new Animated.Value(0));
+  }
+  const vals = valsRef.current;
+  useEffect(() => {
+    const loops = vals.map((v, i) => Animated.loop(Animated.sequence([Animated.delay(i * 160),
+    // staggered start (matches web 0/.16/.32s)
+    Animated.timing(v, {
+      toValue: 1,
+      duration: 360,
+      easing: Easing.out(Easing.quad),
+      useNativeDriver: true
+    }), Animated.timing(v, {
+      toValue: 0,
+      duration: 480,
+      easing: Easing.in(Easing.quad),
+      useNativeDriver: true
+    }), Animated.delay(Math.max(0, (DOT_COUNT - 1 - i) * 160)) // pad so cycles realign
+    ])));
+    loops.forEach(l => l.start());
+    return () => loops.forEach(l => l.stop());
+  }, [vals]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.bubble, style],
+    accessibilityRole: "progressbar",
+    accessibilityLabel: label ? `${label}…` : 'Typing…',
+    children: [label != null && /*#__PURE__*/_jsx(Text, {
+      style: styles.label,
+      children: label
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.dots,
+      children: vals.map((v, i) => /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          width: 6,
+          height: 6,
+          borderRadius: 3,
+          backgroundColor: colors.textDim,
+          opacity: v.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0.5, 1]
+          }),
+          transform: [{
+            translateY: v.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, -4]
+            })
+          }, {
+            scale: v.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0.7, 1]
+            })
+          }]
+        }
+      }, i))
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  bubble: {
+    alignSelf: 'flex-start',
+    maxWidth: '82%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingVertical: 9,
+    paddingHorizontal: 14,
+    borderRadius: radii.pill,
+    backgroundColor: colors.glass2,
+    borderWidth: 1,
+    borderColor: colors.border2
+  },
+  label: {
+    fontFamily: fonts.ui,
+    fontSize: 12,
+    lineHeight: 14,
+    color: colors.textDim
+  },
+  dots: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4
+  }
+});
+//# sourceMappingURL=TypingIndicator.js.map