@lockin90/ui-native 0.0.0-stage → 1.0.0

package/lib/module/components/Card.js

@@ -0,0 +1,138 @@
+"use strict";
+
+import { View, StyleSheet } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, nativeShadows } from '@lockin90/tokens';
+import { OptionalBlurView } from '../internal/optionalBlur';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Glass panel. Native has no backdrop-filter, so glass is approximated with a
+ *  translucent fill + hairline border. Set `blur` for a real frosted surface
+ *  (via the optional `expo-blur` peer) that matches the web glass more closely. */
+export function Card({
+  lit,
+  padLg,
+  pad,
+  flat,
+  blur,
+  tone,
+  variant,
+  style,
+  children,
+  ...rest
+}) {
+  const composed = [styles.card, padLg && styles.padLg, pad === 'none' && styles.padNone, pad === 'sm' && styles.padSm, pad === 'md' && styles.padMd, pad === 'lg' && styles.padLg, flat && styles.flat, tone === 'warn' && styles.toneWarn, tone === 'danger' && styles.toneDanger, variant === 'dashed' && styles.dashed, variant === 'ghost' && styles.ghost];
+  if (blur && OptionalBlurView) {
+    return /*#__PURE__*/_jsxs(OptionalBlurView, {
+      intensity: 24,
+      tint: "dark",
+      style: [composed, styles.cardBlur, style],
+      ...rest,
+      children: [lit && /*#__PURE__*/_jsx(LitHairline, {}), children]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [composed, style],
+    ...rest,
+    children: [lit && /*#__PURE__*/_jsx(LitHairline, {}), children]
+  });
+}
+
+// The web `.lk-card.lk-lit::before` hairline, natively: a 1px gradient strip
+// inset by the corner radius, fading to zero-alpha at both ends (the previous
+// plain-View implementation had no fill — invisible — and the blur branch drew
+// a hard-ended full-opacity flux line that read as a solid top border).
+// Zero-alpha endpoints are color-matched (not 'transparent') so iOS doesn't
+// blend the fade through gray.
+const LIT_STOPS = ['rgba(124,92,255,0)', 'rgba(124,92,255,0.7)', 'rgba(34,211,238,0.7)', 'rgba(34,211,238,0)'];
+function LitHairline() {
+  return /*#__PURE__*/_jsx(LinearGradient, {
+    colors: LIT_STOPS,
+    start: {
+      x: 0,
+      y: 0
+    },
+    end: {
+      x: 1,
+      y: 0
+    },
+    style: styles.lit,
+    pointerEvents: "none"
+  });
+}
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: colors.glass,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: radii.md,
+    // Clip children (edge-to-edge rows, the `lit` hairline) to the rounded
+    // corners so their borders/fills never bleed past the card radius.
+    overflow: 'hidden',
+    padding: 22,
+    ...nativeShadows.elev1
+  },
+  padLg: {
+    padding: 30
+  },
+  padNone: {
+    padding: 0
+  },
+  padSm: {
+    padding: 16
+  },
+  padMd: {
+    padding: 22
+  },
+  flat: {
+    shadowOpacity: 0,
+    elevation: 0
+  },
+  // tone — tinted border + subtle bg. The literals are the flattened web
+  // `color-mix(in srgb, var(--warn|--bad) 42%, transparent)` border and
+  // `color-mix(in srgb, var(--warn|--bad) 7|8%, var(--glass))` fill
+  // (#FFB020 / #FF4D6D mixed into rgba(255,255,255,0.045)).
+  toneWarn: {
+    borderColor: 'rgba(255,176,32,0.42)',
+    backgroundColor: 'rgba(255,206,115,0.11)'
+  },
+  toneDanger: {
+    borderColor: 'rgba(255,77,109,0.42)',
+    backgroundColor: 'rgba(255,138,159,0.12)'
+  },
+  // dashed — add/connect action card (hover accent is web-only; text color
+  // doesn't cascade natively, so children set their own `colors.textDim`)
+  dashed: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    backgroundColor: 'transparent',
+    borderWidth: 2,
+    borderStyle: 'dashed',
+    borderColor: colors.border2,
+    shadowOpacity: 0,
+    elevation: 0
+  },
+  // ghost — borderless transparent surface
+  ghost: {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    shadowOpacity: 0,
+    elevation: 0
+  },
+  // when blurred, drop most of the opaque fill so the frost shows through, and
+  // clip the blur to the card radius (iOS needs overflow:hidden for this)
+  cardBlur: {
+    backgroundColor: 'rgba(255,255,255,0.02)',
+    overflow: 'hidden'
+  },
+  // web parity: `inset: 0 var(--r) auto var(--r); height: 1px` — the straight
+  // hairline stays inside the top edge, clear of the rounded corners.
+  lit: {
+    position: 'absolute',
+    top: 0,
+    left: radii.md,
+    right: radii.md,
+    height: 1
+  }
+});
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","LinearGradient","colors","radii","nativeShadows","OptionalBlurView","jsx","_jsx","jsxs","_jsxs","Card","lit","padLg","pad","flat","blur","tone","variant","style","children","rest","composed","styles","card","padNone","padSm","padMd","toneWarn","toneDanger","dashed","ghost","intensity","tint","cardBlur","LitHairline","LIT_STOPS","start","x","y","end","pointerEvents","create","backgroundColor","glass","borderWidth","borderColor","border","borderRadius","md","overflow","padding","elev1","shadowOpacity","elevation","alignItems","justifyContent","gap","borderStyle","border2","position","top","left","right","height"],"sourceRoot":"../../../src","sources":["components/Card.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/CharCounter.js

@@ -0,0 +1,102 @@
+"use strict";
+
+import { View, Text, StyleSheet } from 'react-native';
+import { colors, fonts } from '@lockin90/tokens';
+
+/** Length status — drives the fill + count color. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const clamp = (x, lo, hi) => Math.max(lo, Math.min(hi, x));
+
+/** Resolve the length status from value/max and the warn threshold. */
+const statusOf = (value, max, warnAt) => {
+  if (value > max) return 'over';
+  if (value >= warnAt * max) return 'warn';
+  return 'ok';
+};
+const defaultFormat = (value, max) => `${value} / ${max}`;
+
+/** Fill color per status: ok → mint, warn → zone-mid (amber), over → bad (red). */
+const FILL_COLOR = {
+  ok: colors.mint,
+  warn: colors.zoneMid,
+  over: colors.bad
+};
+
+/** Count text color per status: ok → faint, warn → amber, over → red. */
+const COUNT_COLOR = {
+  ok: colors.textFaint,
+  warn: colors.warn,
+  over: colors.bad
+};
+
+/**
+ * CharCounter — an input-aware character-count feedback row.
+ *
+ * A thin fill bar (fraction = value/max) + a "value / max" mono readout that
+ * turns warn (approaching max) then over (exceeds max). For SEO meta fields,
+ * post titles, bio fields — any length-limited input.
+ *
+ * Distinct from Meter (generic value-in-range) and BarFill (raw fraction): this
+ * is specifically the count/limit form-field adornment with an over-limit state
+ * and an "x / max" readout. Mirrors the .charbar from the CMS editors.
+ */
+export function CharCounter({
+  value,
+  max,
+  warnAt = 0.85,
+  showBar = true,
+  showCount = true,
+  format = defaultFormat,
+  style,
+  ...rest
+}) {
+  const safeMax = max || 1;
+  const frac = clamp(value / safeMax, 0, 1);
+  const status = statusOf(value, max, warnAt);
+  const fillWidth = `${frac * 100}%`;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, style],
+    ...rest,
+    children: [showBar && /*#__PURE__*/_jsx(View, {
+      style: styles.track,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.fill, {
+          width: fillWidth,
+          backgroundColor: FILL_COLOR[status]
+        }]
+      })
+    }), showCount && /*#__PURE__*/_jsx(Text, {
+      style: [styles.ct, {
+        color: COUNT_COLOR[status]
+      }],
+      numberOfLines: 1,
+      children: format(value, max)
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 9,
+    marginTop: 6
+  },
+  track: {
+    flex: 1,
+    height: 4,
+    borderRadius: 999,
+    backgroundColor: 'rgba(255,255,255,0.07)',
+    overflow: 'hidden'
+  },
+  fill: {
+    height: '100%',
+    borderRadius: 999
+  },
+  ct: {
+    flexShrink: 0,
+    fontFamily: fonts.mono,
+    fontSize: 9.5,
+    color: colors.textFaint
+  }
+});
+//# sourceMappingURL=CharCounter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","Text","StyleSheet","colors","fonts","jsx","_jsx","jsxs","_jsxs","clamp","x","lo","hi","Math","max","min","statusOf","value","warnAt","defaultFormat","FILL_COLOR","ok","mint","warn","zoneMid","over","bad","COUNT_COLOR","textFaint","CharCounter","showBar","showCount","format","style","rest","safeMax","frac","status","fillWidth","styles","root","children","track","fill","width","backgroundColor","ct","color","numberOfLines","create","flexDirection","alignItems","gap","marginTop","flex","height","borderRadius","overflow","flexShrink","fontFamily","mono","fontSize"],"sourceRoot":"../../../src","sources":["components/CharCounter.tsx"],"mappings":"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","ignoreList":[]}