@lockin90/ui-native 0.0.0-stage → 1.0.1

package/lib/module/components/Input.js

@@ -0,0 +1,138 @@
+"use strict";
+
+import { useState } from 'react';
+import { View, Text, TextInput, StyleSheet } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Dark glassy text input — mono label, faint unit suffix, accent focus border. */
+export function Input({
+  label,
+  unit,
+  invalid = false,
+  inputSize = 'md',
+  leading,
+  variant = 'default',
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const [focused, setFocused] = useState(false);
+  const sm = inputSize === 'sm';
+  const numeral = variant === 'numeral';
+  const borderColor = invalid ? colors.zoneLow : focused ? colors.accent : colors.border2;
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.wrap,
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      style: styles.label,
+      children: label.toUpperCase()
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: [styles.field, sm && styles.fieldSm, numeral && styles.fieldNumeral, {
+        borderColor
+      }],
+      children: [leading ? /*#__PURE__*/_jsx(View, {
+        style: styles.lead,
+        children: leading
+      }) : null, /*#__PURE__*/_jsx(TextInput, {
+        style: [styles.input, sm && styles.inputSm, numeral && styles.inputNumeral, style],
+        placeholderTextColor: colors.textFaint,
+        onFocus: e => {
+          setFocused(true);
+          onFocus?.(e);
+        },
+        onBlur: e => {
+          setFocused(false);
+          onBlur?.(e);
+        },
+        ...rest
+      }), unit ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.unit, sm && styles.unitSm, numeral && styles.unitNumeral],
+        children: unit
+      }) : null]
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  wrap: {
+    gap: 6,
+    minWidth: 0
+  },
+  label: {
+    fontFamily: fonts.mono,
+    fontSize: 10,
+    fontWeight: '500',
+    letterSpacing: 1.2,
+    color: colors.textFaint
+  },
+  field: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    minWidth: 0,
+    paddingVertical: 9,
+    paddingHorizontal: 12,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    backgroundColor: colors.glass2
+  },
+  fieldSm: {
+    paddingVertical: 6,
+    paddingHorizontal: 10
+  },
+  // design `.strow .sv` — glass-2 fill (already the field default), border-2
+  // (already default), 9px radius, roomier centered padding.
+  fieldNumeral: {
+    justifyContent: 'center',
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    borderRadius: 9
+  },
+  lead: {
+    flexShrink: 0
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    color: colors.text,
+    fontFamily: fonts.ui,
+    fontSize: 14,
+    // Center the value/placeholder: drop the explicit lineHeight (it top/bottom-biases
+    // the glyph in a single-line TextInput) + Android font-padding/vertical-align props.
+    textAlignVertical: 'center',
+    includeFontPadding: false
+  },
+  inputSm: {
+    fontSize: 12.5
+  },
+  // design `.strow .sv` — 20px bold display-font numeral, centered, tabular.
+  // Content-hugging (not flex:1) so it groups tightly with the unit suffix
+  // instead of stretching to the field's full width.
+  inputNumeral: {
+    flex: 0,
+    minWidth: 20,
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 20,
+    textAlign: 'center',
+    fontVariant: ['tabular-nums']
+  },
+  unit: {
+    flexShrink: 0,
+    fontFamily: fonts.mono,
+    fontSize: 11,
+    color: colors.textFaint
+  },
+  unitSm: {
+    fontSize: 10
+  },
+  // design `.strow .sv small` — dim, sits right after the numeral
+  unitNumeral: {
+    fontFamily: fonts.ui,
+    fontSize: 11,
+    fontWeight: '400',
+    color: colors.textDim,
+    marginLeft: 1
+  }
+});
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useState","View","Text","TextInput","StyleSheet","colors","radii","fonts","jsx","_jsx","jsxs","_jsxs","Input","label","unit","invalid","inputSize","leading","variant","style","onFocus","onBlur","rest","focused","setFocused","sm","numeral","borderColor","zoneLow","accent","border2","styles","wrap","children","toUpperCase","field","fieldSm","fieldNumeral","lead","input","inputSm","inputNumeral","placeholderTextColor","textFaint","e","unitSm","unitNumeral","create","gap","minWidth","fontFamily","mono","fontSize","fontWeight","letterSpacing","color","flexDirection","alignItems","paddingVertical","paddingHorizontal","borderRadius","borderWidth","backgroundColor","glass2","justifyContent","flexShrink","flex","padding","text","ui","textAlignVertical","includeFontPadding","display","textAlign","fontVariant","textDim","marginLeft"],"sourceRoot":"../../../src","sources":["components/Input.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/InsightCard.js

@@ -0,0 +1,115 @@
+"use strict";
+
+import { View, Text, StyleSheet } from 'react-native';
+import { colors, fonts } from '@lockin90/tokens';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { Sparkline } from './Sparkline';
+import { Chip } from './Chip';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Tone → accent color for the icon + sparkline (matches the mockup). */
+const TONE_COLOR = {
+  default: colors.textDim,
+  positive: colors.ok,
+  negative: colors.bad,
+  accent: colors.accent
+};
+
+/**
+ * InsightCard — a glass panel surfacing a detected pattern: a leading icon +
+ * title row, the insight prose, a row of small stat Chips (p-value / n /
+ * confidence), and an optional tone-tinted Sparkline. Composed from Card + Icon
+ * + Sparkline + Chip; `tone` drives the icon and sparkline accent. Mirrors the
+ * web `@lockin90/ui` InsightCard and the `.insight` cards in the design mockup.
+ */
+export function InsightCard({
+  title,
+  body,
+  data,
+  stats,
+  tone = 'default',
+  accentColor,
+  sparkFill = true,
+  icon = 'sparkle',
+  style
+}) {
+  const color = accentColor ?? TONE_COLOR[tone];
+  return /*#__PURE__*/_jsx(Card, {
+    style: style,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.row,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.main,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.head,
+          children: [/*#__PURE__*/_jsx(Icon, {
+            name: icon,
+            size: 18,
+            color: color
+          }), title ? /*#__PURE__*/_jsx(Text, {
+            style: styles.title,
+            children: title
+          }) : null]
+        }), typeof body === 'string' ? /*#__PURE__*/_jsx(Text, {
+          style: styles.body,
+          children: body
+        }) : body, stats && stats.length > 0 ? /*#__PURE__*/_jsx(View, {
+          style: styles.meta,
+          children: stats.map((s, i) => /*#__PURE__*/_jsx(Chip, {
+            label: `${s.label} = ${s.value}`
+          }, `${s.label}-${i}`))
+        }) : null]
+      }), data && data.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.right,
+        children: /*#__PURE__*/_jsx(Sparkline, {
+          data: data,
+          color: color,
+          width: 120,
+          height: 56,
+          fill: sparkFill
+        })
+      }) : null]
+    })
+  });
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 18
+  },
+  main: {
+    flex: 1,
+    minWidth: 0
+  },
+  head: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    marginBottom: 7
+  },
+  title: {
+    flex: 1,
+    fontFamily: fonts.display,
+    fontSize: 17,
+    fontWeight: '700',
+    letterSpacing: -0.2,
+    color: colors.text
+  },
+  body: {
+    fontSize: 13.5,
+    lineHeight: 21,
+    color: colors.textDim
+  },
+  meta: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 12
+  },
+  right: {
+    alignItems: 'flex-end'
+  }
+});
+//# sourceMappingURL=InsightCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","StyleSheet","colors","fonts","Card","Icon","Sparkline","Chip","jsx","_jsx","jsxs","_jsxs","TONE_COLOR","default","textDim","positive","ok","negative","bad","accent","InsightCard","title","body","data","stats","tone","accentColor","sparkFill","icon","style","color","children","styles","row","main","head","name","size","length","meta","map","s","i","label","value","right","width","height","fill","create","flexDirection","alignItems","gap","flex","minWidth","marginBottom","fontFamily","display","fontSize","fontWeight","letterSpacing","text","lineHeight","flexWrap","marginTop"],"sourceRoot":"../../../src","sources":["components/InsightCard.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/KeyValue.js

@@ -0,0 +1,89 @@
+"use strict";
+
+import { View, Text, StyleSheet } from 'react-native';
+import { colors, fonts } from '@lockin90/tokens';
+
+/** A single label↔value row in a {@link KeyValue} list. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_ROWS = [{
+  key: 'Plan',
+  value: 'Pro'
+}, {
+  key: 'MRR',
+  value: '$29.00'
+}, {
+  key: 'Member since',
+  value: 'Jan 2026'
+}];
+
+/** Definition list of key↔value rows — used in detail panels & settings.
+ *  spread = key (mono faint) left / value right with hairline borders between
+ *  rows; inline = key then value side by side with a small gap. */
+export function KeyValue({
+  rows = DEFAULT_ROWS,
+  align = 'spread',
+  style,
+  ...rest
+}) {
+  const spread = align === 'spread';
+  const last = rows.length - 1;
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.list, style],
+    ...rest,
+    children: rows.map((row, i) => /*#__PURE__*/_jsxs(View, {
+      style: [spread ? styles.rowSpread : styles.rowInline, spread && i === 0 && styles.rowSpreadFirst, spread && i !== last && styles.rowSpreadBorder],
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.key,
+        children: row.key
+      }), typeof row.value === 'string' || typeof row.value === 'number' ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.val, spread && styles.valSpread],
+        children: row.value
+      }) : /*#__PURE__*/_jsx(View, {
+        style: spread && styles.valSpread,
+        children: row.value
+      })]
+    }, `${row.key}-${i}`))
+  });
+}
+const styles = StyleSheet.create({
+  list: {
+    flexDirection: 'column'
+  },
+  rowSpread: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    justifyContent: 'space-between',
+    gap: 16,
+    paddingVertical: 9
+  },
+  rowSpreadFirst: {
+    paddingTop: 0
+  },
+  rowSpreadBorder: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.border
+  },
+  rowInline: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: 8,
+    paddingVertical: 3
+  },
+  key: {
+    fontFamily: fonts.mono,
+    fontSize: 11.5,
+    fontWeight: '500',
+    letterSpacing: 0.46,
+    color: colors.textFaint
+  },
+  val: {
+    fontFamily: fonts.ui,
+    fontSize: 13,
+    color: colors.text
+  },
+  valSpread: {
+    flexShrink: 1,
+    textAlign: 'right'
+  }
+});
+//# sourceMappingURL=KeyValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","StyleSheet","colors","fonts","jsx","_jsx","jsxs","_jsxs","DEFAULT_ROWS","key","value","KeyValue","rows","align","style","rest","spread","last","length","styles","list","children","map","row","i","rowSpread","rowInline","rowSpreadFirst","rowSpreadBorder","val","valSpread","create","flexDirection","alignItems","justifyContent","gap","paddingVertical","paddingTop","borderBottomWidth","borderBottomColor","border","fontFamily","mono","fontSize","fontWeight","letterSpacing","color","textFaint","ui","text","flexShrink","textAlign"],"sourceRoot":"../../../src","sources":["components/KeyValue.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/LeaderboardRow.js

@@ -0,0 +1,136 @@
+"use strict";
+
+import { View, Text, StyleSheet } from 'react-native';
+import { colors, radii, fonts } from '@lockin90/tokens';
+import { Avatar } from './Avatar';
+import { Icon } from './Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Podium tint per medal rank: gold (1) · silver (2) · bronze (3). */
+const MEDAL_COLOR = {
+  1: colors.warn,
+  // gold #FFB020
+  2: colors.textDim,
+  // silver
+  3: '#C77B3A' // bronze amber
+};
+
+/**
+ * LeaderboardRow — one ranked entry in a standings list: rank (display font) +
+ * avatar + name (+ optional sublabel) on the left, the ranked value on the
+ * right. Ranks 1–3 swap the number for a gold/silver/bronze crown glyph.
+ * `highlight` accent-tints the row to mark the current user ("you"). Mirrors
+ * the web `@lockin90/ui` `LeaderboardRow`. Composed from `Avatar` + `Icon`.
+ */
+export function LeaderboardRow({
+  rank,
+  name,
+  avatar,
+  value,
+  sublabel,
+  highlight,
+  divider = true,
+  style,
+  ...rest
+}) {
+  const medalColor = MEDAL_COLOR[rank];
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, divider && styles.divider, highlight && styles.highlight, style],
+    ...rest,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.rank,
+      children: medalColor ? /*#__PURE__*/_jsx(Icon, {
+        name: "star",
+        size: 20,
+        color: medalColor
+      }) : /*#__PURE__*/_jsx(Text, {
+        style: [styles.rankNum, highlight && styles.rankNumHighlight],
+        children: rank
+      })
+    }), /*#__PURE__*/_jsx(Avatar, {
+      name: name,
+      src: avatar,
+      size: 40
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.main,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.name,
+        numberOfLines: 1,
+        children: name
+      }), sublabel != null && /*#__PURE__*/_jsx(Text, {
+        style: styles.sub,
+        numberOfLines: 1,
+        children: sublabel
+      })]
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.value, highlight && styles.valueHighlight],
+      children: value
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    borderWidth: 1,
+    borderColor: 'transparent',
+    borderRadius: radii.md
+  },
+  divider: {
+    borderTopColor: colors.border
+  },
+  highlight: {
+    // accent tint ~12% + ~45% border — RN has no color-mix; use translucent accent.
+    backgroundColor: 'rgba(124,92,255,0.12)',
+    borderColor: 'rgba(124,92,255,0.45)'
+  },
+  rank: {
+    width: 28,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  rankNum: {
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 17,
+    letterSpacing: -0.3,
+    color: colors.textDim
+  },
+  rankNumHighlight: {
+    color: colors.accent
+  },
+  main: {
+    flex: 1,
+    minWidth: 0
+  },
+  name: {
+    fontFamily: fonts.ui,
+    fontSize: 14.5,
+    fontWeight: '600',
+    lineHeight: 18,
+    color: colors.text
+  },
+  sub: {
+    marginTop: 1,
+    fontFamily: fonts.ui,
+    fontSize: 12.5,
+    lineHeight: 16,
+    color: colors.textFaint
+  },
+  value: {
+    marginLeft: 'auto',
+    flexShrink: 0,
+    fontFamily: fonts.display,
+    fontWeight: '700',
+    fontSize: 16,
+    letterSpacing: -0.3,
+    color: colors.text
+  },
+  valueHighlight: {
+    color: colors.accent
+  }
+});
+//# sourceMappingURL=LeaderboardRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","StyleSheet","colors","radii","fonts","Avatar","Icon","jsx","_jsx","jsxs","_jsxs","MEDAL_COLOR","warn","textDim","LeaderboardRow","rank","name","avatar","value","sublabel","highlight","divider","style","rest","medalColor","styles","row","children","size","color","rankNum","rankNumHighlight","src","main","numberOfLines","sub","valueHighlight","create","flexDirection","alignItems","gap","paddingVertical","paddingHorizontal","borderWidth","borderColor","borderRadius","md","borderTopColor","border","backgroundColor","width","flexShrink","justifyContent","fontFamily","display","fontWeight","fontSize","letterSpacing","accent","flex","minWidth","ui","lineHeight","text","marginTop","textFaint","marginLeft"],"sourceRoot":"../../../src","sources":["components/LeaderboardRow.tsx"],"mappings":"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","ignoreList":[]}