@lockin90/ui-native 0.0.0-stage → 1.0.0

package/lib/commonjs/components/MessageComposer.js

@@ -0,0 +1,212 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageComposer = MessageComposer;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _expoLinearGradient = require("expo-linear-gradient");
+var _tokens = require("@lockin90/tokens");
+var _Icon = require("./Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * MessageComposer — the DM/chat input bar: a glassy pill containing an
+ * optional E2EE lock, an attach button, a growing multiline text field, an
+ * emoji button and an accent-filled send button. Mirrors `.composer` from the
+ * coach/chat design. Pressing send fires `onSend` then clears.
+ */
+function MessageComposer({
+  onSend,
+  placeholder = 'Message…',
+  e2ee = false,
+  disabled = false,
+  style
+}) {
+  const [value, setValue] = (0, _react.useState)('');
+  const canSend = !disabled && value.trim().length > 0;
+  function send() {
+    const text = value.trim();
+    if (disabled || text.length === 0) return;
+    onSend(text);
+    setValue('');
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.bar, disabled && styles.barDisabled, style],
+    children: [e2ee ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.lock,
+      accessibilityLabel: "End-to-end encrypted",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: "lock",
+        size: 16,
+        color: _tokens.colors.zoneHigh
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: ({
+        pressed
+      }) => [styles.btn, pressed && !disabled && styles.btnPressed],
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: "Attach",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: "plus",
+        size: 18,
+        color: _tokens.colors.textDim
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.inputWrap,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: styles.input,
+        value: value,
+        onChangeText: setValue,
+        editable: !disabled,
+        multiline: true,
+        accessibilityLabel: "Message text"
+      }), value.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.placeholderWrap,
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.placeholderText,
+          numberOfLines: 1,
+          children: placeholder
+        })
+      }) : null]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: ({
+        pressed
+      }) => [styles.btn, pressed && !disabled && styles.btnPressed],
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: "Emoji",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: "sparkle",
+        size: 18,
+        color: _tokens.colors.textDim
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      onPress: send,
+      disabled: !canSend,
+      accessibilityRole: "button",
+      accessibilityLabel: "Send message",
+      children: ({
+        pressed
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoLinearGradient.LinearGradient, {
+        colors: _tokens.gradients.cta.stops,
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 1,
+          y: 1
+        },
+        style: [styles.send, !canSend && styles.sendDisabled, pressed && canSend && styles.sendPressed],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          name: "share",
+          size: 18,
+          color: "#0A0A12"
+        })
+      })
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  bar: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 10,
+    paddingVertical: 9,
+    paddingHorizontal: 12,
+    borderRadius: _tokens.radii.lg,
+    backgroundColor: _tokens.colors.glass2,
+    borderWidth: 1,
+    borderColor: _tokens.colors.border2
+  },
+  barDisabled: {
+    opacity: 0.8
+  },
+  lock: {
+    flexShrink: 0,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 16,
+    height: 16
+  },
+  btn: {
+    flexShrink: 0,
+    width: 38,
+    height: 38,
+    borderRadius: 19,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: _tokens.colors.border,
+    backgroundColor: _tokens.colors.glass
+  },
+  btnPressed: {
+    opacity: 0.7,
+    borderColor: _tokens.colors.border2
+  },
+  inputWrap: {
+    flex: 1,
+    minWidth: 0,
+    alignSelf: 'center',
+    position: 'relative',
+    justifyContent: 'center'
+  },
+  input: {
+    width: '100%',
+    minWidth: 0,
+    // match the send button's height at rest; grow only on multiline
+    minHeight: 42,
+    maxHeight: 120,
+    backgroundColor: _tokens.colors.glass,
+    borderWidth: 1,
+    borderColor: _tokens.colors.border,
+    borderRadius: _tokens.radii.pill,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    // center single-line text so the field isn't taller than the buttons
+    textAlignVertical: 'center',
+    color: _tokens.colors.text,
+    fontFamily: _tokens.fonts.ui,
+    fontSize: 13.5,
+    lineHeight: 18
+  },
+  // single-line, truncating placeholder overlay — the multiline TextInput's own
+  // placeholder wraps a long string (e.g. "Encrypted message…") onto 2 lines, making
+  // the pill taller than the buttons. Overlaying our own numberOfLines={1} text keeps
+  // the resting field exactly one line high; it's hidden the moment the user types.
+  placeholderWrap: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center'
+  },
+  placeholderText: {
+    color: _tokens.colors.textFaint,
+    fontFamily: _tokens.fonts.ui,
+    fontSize: 13.5
+  },
+  send: {
+    flexShrink: 0,
+    width: 42,
+    height: 42,
+    borderRadius: 21,
+    alignItems: 'center',
+    justifyContent: 'center',
+    ..._tokens.nativeShadows.glowAccent
+  },
+  sendDisabled: {
+    opacity: 0.4
+  },
+  sendPressed: {
+    transform: [{
+      translateY: -2
+    }]
+  }
+});
+//# sourceMappingURL=MessageComposer.js.map

package/lib/commonjs/components/MessageComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_expoLinearGradient","_tokens","_Icon","_jsxRuntime","MessageComposer","onSend","placeholder","e2ee","disabled","style","value","setValue","useState","canSend","trim","length","send","text","jsxs","View","styles","bar","barDisabled","children","jsx","lock","accessibilityLabel","Icon","name","size","color","colors","zoneHigh","Pressable","pressed","btn","btnPressed","accessibilityRole","textDim","inputWrap","TextInput","input","onChangeText","editable","multiline","placeholderWrap","pointerEvents","Text","placeholderText","numberOfLines","onPress","LinearGradient","gradients","cta","stops","start","x","y","end","sendDisabled","sendPressed","StyleSheet","create","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","borderRadius","radii","lg","backgroundColor","glass2","borderWidth","borderColor","border2","opacity","flexShrink","alignSelf","justifyContent","width","height","border","glass","flex","minWidth","position","minHeight","maxHeight","pill","textAlignVertical","fontFamily","fonts","ui","fontSize","lineHeight","left","right","top","bottom","textFaint","nativeShadows","glowAccent","transform","translateY"],"sourceRoot":"../../../src","sources":["components/MessageComposer.tsx"],"mappings":"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","ignoreList":[]}