@lockin90/ui-native 0.0.0-stage → 1.0.1

package/lib/module/components/Timeline.js

@@ -0,0 +1,214 @@
+"use strict";
+
+import { View, Text, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, fonts, gradients, nativeShadows } from '@lockin90/tokens';
+import { Chip } from './Chip';
+import { Pulse } from './Pulse';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CHIP_TONE = {
+  done: 'high',
+  now: 'accent',
+  next: 'mid'
+};
+const DEFAULT_LABEL = {
+  done: 'Done',
+  now: 'In progress',
+  next: 'Next'
+};
+const DEFAULT_ITEMS = [{
+  status: 'done',
+  title: 'Model calibrated',
+  date: 'Shipped',
+  description: 'Energy & recovery model trained and validated against real wearable data.'
+}, {
+  status: 'done',
+  title: 'Wearables connected',
+  date: 'Shipped',
+  description: 'Oura, WHOOP, Apple Health and Garmin sync built end-to-end.'
+}, {
+  status: 'now',
+  title: 'Closed beta',
+  date: 'Today',
+  description: 'Polishing the experience with founding athletes right now.'
+}, {
+  status: 'next',
+  title: 'Public launch',
+  date: 'In 2 months',
+  description: 'Doors open to the waitlist first.'
+}];
+function Dot({
+  status
+}) {
+  if (status === 'done') {
+    return /*#__PURE__*/_jsx(LinearGradient, {
+      colors: gradients.mint.stops,
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 1,
+        y: 1
+      },
+      style: [styles.dot, styles.dotDone],
+      children: /*#__PURE__*/_jsx(Svg, {
+        width: 13,
+        height: 13,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "#0A0A12",
+        strokeWidth: 3,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /*#__PURE__*/_jsx(Path, {
+          d: "M20 6 9 17l-5-5"
+        })
+      })
+    });
+  }
+  if (status === 'now') {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.dot, styles.dotNow],
+      children: /*#__PURE__*/_jsx(Pulse, {})
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.dot, styles.dotNext]
+  });
+}
+
+/** Vertical milestone timeline — done → now → next, each with a time/date label
+ *  and a status chip. Native twin of the web Timeline (the "coming soon" component). */
+export function Timeline({
+  items = DEFAULT_ITEMS,
+  style,
+  ...rest
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: style,
+    ...rest,
+    children: items.map((it, i) => {
+      const status = it.status ?? 'next';
+      const last = i === items.length - 1;
+      return /*#__PURE__*/_jsxs(View, {
+        style: [styles.item, last && styles.itemLast],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.gutter,
+          children: [!last ? /*#__PURE__*/_jsx(View, {
+            style: [styles.line, status === 'done' && styles.lineDone]
+          }) : null, /*#__PURE__*/_jsx(Dot, {
+            status: status
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: [styles.body, status === 'next' && styles.bodyNext],
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.top,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.title,
+              children: it.title
+            }), it.date ? /*#__PURE__*/_jsx(Text, {
+              style: styles.date,
+              children: it.date.toUpperCase()
+            }) : null, /*#__PURE__*/_jsx(Chip, {
+              tone: CHIP_TONE[status],
+              dot: true,
+              label: it.statusLabel ?? DEFAULT_LABEL[status]
+            })]
+          }), it.description ? /*#__PURE__*/_jsx(Text, {
+            style: styles.desc,
+            children: it.description
+          }) : null]
+        })]
+      }, i);
+    })
+  });
+}
+
+/** Dot diameter and the vertical gap between consecutive items — the connecting
+ *  line spans from just below one dot (top: DOT_SIZE) to the next (bottom: -GAP). */
+const DOT_SIZE = 28;
+const GAP = 22;
+const styles = StyleSheet.create({
+  item: {
+    flexDirection: 'row',
+    paddingBottom: GAP
+  },
+  itemLast: {
+    paddingBottom: 0
+  },
+  gutter: {
+    width: 28,
+    alignItems: 'center'
+  },
+  dot: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.glass2
+  },
+  dotDone: {
+    borderColor: 'transparent',
+    ...nativeShadows.glowMint
+  },
+  dotNow: {
+    backgroundColor: 'rgba(124,92,255,0.14)',
+    borderColor: 'rgba(124,92,255,0.5)'
+  },
+  dotNext: {
+    backgroundColor: 'rgba(255,176,32,0.12)',
+    borderColor: 'rgba(255,176,32,0.4)'
+  },
+  // Runs from just below this dot (top: DOT_SIZE) down through the row gap to
+  // the next dot (bottom: -GAP), centered under the 28px dot (left = 13).
+  line: {
+    position: 'absolute',
+    top: DOT_SIZE,
+    bottom: -GAP,
+    left: 13,
+    width: 2,
+    backgroundColor: colors.border2
+  },
+  lineDone: {
+    backgroundColor: colors.mint
+  },
+  body: {
+    flex: 1,
+    paddingLeft: 16,
+    paddingTop: 1
+  },
+  bodyNext: {
+    opacity: 0.82
+  },
+  top: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    flexWrap: 'wrap',
+    marginBottom: 5
+  },
+  title: {
+    fontFamily: fonts.display,
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.text
+  },
+  date: {
+    fontFamily: fonts.mono,
+    fontSize: 11,
+    letterSpacing: 0.7,
+    color: colors.textFaint
+  },
+  desc: {
+    color: colors.textDim,
+    fontSize: 13.5,
+    lineHeight: 21,
+    marginTop: 4
+  }
+});
+//# sourceMappingURL=Timeline.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","StyleSheet","Svg","Path","LinearGradient","colors","fonts","gradients","nativeShadows","Chip","Pulse","jsx","_jsx","jsxs","_jsxs","CHIP_TONE","done","now","next","DEFAULT_LABEL","DEFAULT_ITEMS","status","title","date","description","Dot","mint","stops","start","x","y","end","style","styles","dot","dotDone","children","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","dotNow","dotNext","Timeline","items","rest","map","it","i","last","length","item","itemLast","gutter","line","lineDone","body","bodyNext","top","toUpperCase","tone","label","statusLabel","desc","DOT_SIZE","GAP","create","flexDirection","paddingBottom","alignItems","borderRadius","justifyContent","borderWidth","borderColor","border2","backgroundColor","glass2","glowMint","position","bottom","left","flex","paddingLeft","paddingTop","opacity","gap","flexWrap","marginBottom","fontFamily","display","fontSize","fontWeight","color","text","mono","letterSpacing","textFaint","textDim","lineHeight","marginTop"],"sourceRoot":"../../../src","sources":["components/Timeline.tsx"],"mappings":"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","ignoreList":[]}