@lockin90/ui-native 0.0.0-stage → 1.0.1

package/src/components/Toast.tsx

@@ -0,0 +1,138 @@
+import { type ReactNode } from 'react';
+import { View, Text, Pressable, StyleSheet, type ViewProps } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { colors, radii, fonts, nativeShadows } from '@lockin90/tokens';
+import { Icon, type IconName } from './Icon';
+
+export type ToastTone = 'default' | 'success' | 'warn' | 'danger';
+
+export interface ToastProps extends Omit<ViewProps, 'children'> {
+  /** tints the leading icon + the subtle left accent rail */
+  tone?: ToastTone;
+  /** bold first line */
+  title?: string;
+  /** optional dimmer second line */
+  message?: ReactNode;
+  /** override the default tone icon (pass any node, e.g. an <Icon />) */
+  icon?: ReactNode;
+  /** show a × button; called when it's pressed */
+  onDismiss?: () => void;
+}
+
+/** Per-tone icon color + left accent rail color. `default` keeps the neutral rail. */
+const TONE: Record<ToastTone, { icon: string; rail: string }> = {
+  default: { icon: colors.textDim, rail: colors.border2 },
+  success: { icon: colors.zoneHigh, rail: colors.zoneHigh },
+  warn: { icon: colors.zoneMid, rail: colors.zoneMid },
+  danger: { icon: colors.zoneLow, rail: colors.zoneLow },
+};
+
+/** Default glyph per tone — info for default/warn/danger, check for success. */
+const TONE_ICON: Record<ToastTone, IconName> = {
+  default: 'info',
+  success: 'check',
+  warn: 'info',
+  danger: 'info',
+};
+
+/** Compact floating notification card — tone-tinted icon + title/message + optional dismiss. */
+export function Toast({
+  tone = 'default',
+  title = 'Saved',
+  message,
+  icon,
+  onDismiss,
+  style,
+  ...rest
+}: ToastProps) {
+  const t = TONE[tone];
+  return (
+    <View
+      accessibilityRole="alert"
+      accessibilityLiveRegion="polite"
+      style={[styles.toast, style]}
+      {...rest}
+    >
+      <View style={[styles.rail, { backgroundColor: t.rail }]} pointerEvents="none" />
+      <View style={styles.icon}>
+        {icon ?? <Icon name={TONE_ICON[tone]} size={17} color={t.icon} />}
+      </View>
+      <View style={styles.body}>
+        <Text style={styles.title}>{title}</Text>
+        {message != null && (typeof message === 'string'
+          ? <Text style={styles.msg}>{message}</Text>
+          : message)}
+      </View>
+      {onDismiss && (
+        <Pressable
+          onPress={onDismiss}
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          hitSlop={6}
+          style={styles.x}
+        >
+          <Svg width={13} height={13} viewBox="0 0 24 24" fill="none" stroke={colors.textFaint} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+            <Path d="m6 6 12 12M18 6 6 18" />
+          </Svg>
+        </Pressable>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  toast: {
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 11,
+    maxWidth: 360,
+    paddingVertical: 11,
+    paddingHorizontal: 13,
+    borderRadius: radii.sm,
+    borderWidth: 1,
+    borderColor: colors.border2,
+    backgroundColor: colors.bg1,
+    overflow: 'hidden',
+    ...nativeShadows.elev2,
+  },
+  rail: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    width: 3,
+  },
+  icon: {
+    marginTop: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  body: {
+    flex: 1,
+    minWidth: 0,
+  },
+  title: {
+    fontFamily: fonts.ui,
+    fontSize: 13.5,
+    fontWeight: '600',
+    lineHeight: 18,
+    color: colors.text,
+  },
+  msg: {
+    marginTop: 2,
+    fontFamily: fonts.ui,
+    fontSize: 12.5,
+    lineHeight: 17.5,
+    color: colors.textDim,
+  },
+  x: {
+    marginTop: -2,
+    marginLeft: 2,
+    width: 20,
+    height: 20,
+    borderRadius: radii.sm,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/Toggle.tsx

@@ -0,0 +1,155 @@
+import { View, Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { hapticSelection } from '../internal/optionalHaptics';
+import { LinearGradient } from 'expo-linear-gradient';
+import { colors, radii, fonts, gradients } from '@lockin90/tokens';
+
+export type ToggleSize = 'sm' | 'md';
+
+export interface ToggleProps {
+  /** whether the switch is on (default false) */
+  checked?: boolean;
+  /** fired with the next checked state when toggled */
+  onChange?: (checked: boolean) => void;
+  /** optional text rendered beside the switch */
+  label?: string;
+  /** control scale (default 'md') */
+  size?: ToggleSize;
+  /** when true, the switch is non-interactive and dimmed */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** The design's dark ink for content sitting on a bright CTA gradient
+ *  (design `.switch[aria-checked="true"]::after` — #07080d). */
+const INK_ON_GRADIENT = '#07080D';
+
+/** On/off switch — the design `.switch`: OFF is a glass pill track (subtle
+ *  white fill + border-2) holding a solid text-dim knob; ON fills the TRACK
+ *  with the CTA gradient (violet→cyan) + accent glow and the knob goes dark
+ *  ink. Mirrors the web `.lk-toggle` 1:1 (lockin90-design settings screens).
+ *  An optional `label` is laid out in a row beside the switch. */
+export function Toggle({
+  checked = false,
+  onChange,
+  label,
+  size = 'md',
+  disabled = false,
+  style,
+}: ToggleProps) {
+  const dims = size === 'sm' ? SIZE.sm : SIZE.md;
+  // The track has a 1px border and `left`/`width` are border-box, but the absolute
+  // knob is positioned inside the border — so the travel must subtract BOTH borders,
+  // else the "on" knob overshoots by 2px and sits flush against the right edge.
+  const knobOffset = dims.track - TRACK_BORDER * 2 - dims.knob - dims.pad * 2;
+
+  // knob: solid text-dim when off, dark ink when on (design `.switch::after`)
+  const knob = (
+    <View
+      style={[
+        styles.knob,
+        {
+          width: dims.knob,
+          height: dims.knob,
+          borderRadius: dims.knob / 2,
+          // Vertically center regardless of track height/border (plain `top: pad`
+          // left the knob a hair high). Horizontal inset stays `pad`.
+          top: '50%',
+          marginTop: -dims.knob / 2,
+          left: dims.pad,
+          transform: [{ translateX: checked ? knobOffset : 0 }],
+          backgroundColor: checked ? INK_ON_GRADIENT : colors.textDim,
+        },
+      ]}
+    />
+  );
+
+  const track = (
+    <Pressable
+      accessibilityRole="switch"
+      accessibilityState={{ checked, disabled }}
+      disabled={disabled}
+      onPress={() => {
+        // selection tick when the app ships expo-haptics (silent no-op otherwise)
+        hapticSelection();
+        onChange?.(!checked);
+      }}
+      style={[
+        styles.track,
+        { width: dims.track, height: dims.height },
+        checked ? styles.trackOn : styles.trackOff,
+        disabled && styles.disabled,
+      ]}
+    >
+      {checked && (
+        <LinearGradient
+          colors={gradients.cta.stops as unknown as [string, string]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.trackFill}
+        />
+      )}
+      {knob}
+    </Pressable>
+  );
+
+  if (label == null) {
+    return <View style={style}>{track}</View>;
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="switch"
+      accessibilityState={{ checked, disabled }}
+      disabled={disabled}
+      onPress={() => onChange?.(!checked)}
+      style={[styles.row, disabled && styles.disabled, style]}
+    >
+      {track}
+      <Text style={styles.label}>{label}</Text>
+    </Pressable>
+  );
+}
+
+// Design sizes (mobile mock `.switch` / `.switch.sm`): md 42×24 knob 18,
+// sm 36×21 knob 15; knob inset 2px.
+const SIZE = {
+  md: { track: 42, height: 24, knob: 18, pad: 2 },
+  sm: { track: 36, height: 21, knob: 15, pad: 2 },
+} as const;
+
+/** Track border width (must match `trackOff`/`trackOn` borderWidth below). */
+const TRACK_BORDER = 1;
+
+const styles = StyleSheet.create({
+  track: {
+    position: 'relative',
+    borderRadius: radii.pill,
+    flexShrink: 0,
+    overflow: 'hidden',
+  },
+  trackOff: {
+    // design `.switch`: rgba(255,255,255,.06) fill + border-2 hairline
+    backgroundColor: 'rgba(255,255,255,0.06)',
+    borderWidth: 1,
+    borderColor: colors.border2,
+  },
+  // on — the TRACK fills with the CTA gradient + accent glow, border transparent
+  // (design `.switch[aria-checked="true"]`)
+  trackOn: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    boxShadow: '0 0 14px rgba(124,92,255,0.45)',
+  },
+  trackFill: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: radii.pill,
+  },
+  knob: {
+    position: 'absolute',
+    zIndex: 1,
+  },
+  row: { flexDirection: 'row', alignItems: 'center', gap: 10 },
+  label: { fontFamily: fonts.ui, fontSize: 14, fontWeight: '500', color: colors.text },
+  disabled: { opacity: 0.5 },
+});

package/src/components/Toolbar.tsx

@@ -0,0 +1,292 @@
+import { type ReactNode } from 'react';
+import { View, Text, Pressable, StyleSheet, type StyleProp, type ViewStyle } 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. */
+let documentPicker: {
+  getDocumentAsync?: (opts?: Record<string, unknown>) => Promise<unknown>;
+} | null = 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`.
+   ========================================================================== */
+
+export interface ToolbarItem {
+  /** glyph rendered inside the button (an svg element or shared Icon) */
+  icon: ReactNode;
+  /** accessible label */
+  label?: string;
+  /** pressed/active state — accent tint */
+  active?: boolean;
+  onPress?: () => void;
+  /** render a thin vertical separator instead of a button */
+  divider?: boolean;
+}
+
+export interface ToolbarProps {
+  /** the buttons (and dividers) to render; defaults to a sample formatting set */
+  items?: ToolbarItem[];
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Shared stroke props for the inline default-set glyphs. */
+const stroke = {
+  fill: 'none',
+  strokeWidth: 1.8,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const;
+
+/** Default sample set: bold, italic | list, link, image — mirrors the web set. */
+const DEFAULT_ITEMS: ToolbarItem[] = [
+  {
+    label: 'Bold',
+    active: true,
+    icon: (
+      <Text style={{ fontSize: 14, color: colors.textDim, fontFamily: fonts.display, fontWeight: '700' }}>
+        B
+      </Text>
+    ),
+  },
+  {
+    label: 'Italic',
+    icon: (
+      <Text style={{ fontSize: 14, color: colors.textDim, fontFamily: fonts.display, fontStyle: 'italic' }}>
+        I
+      </Text>
+    ),
+  },
+  { divider: true, icon: null },
+  {
+    label: 'Bulleted list',
+    icon: (
+      <Svg width={15} height={15} viewBox="0 0 24 24" stroke={colors.textDim} {...stroke}>
+        <Path d="M8 6h12M8 12h12M8 18h12" />
+        <Circle cx={4} cy={6} r={1.4} fill={colors.textDim} stroke="none" />
+        <Circle cx={4} cy={12} r={1.4} fill={colors.textDim} stroke="none" />
+        <Circle cx={4} cy={18} r={1.4} fill={colors.textDim} stroke="none" />
+      </Svg>
+    ),
+  },
+  {
+    label: 'Link',
+    icon: (
+      <Svg width={15} height={15} viewBox="0 0 24 24" stroke={colors.textDim} {...stroke}>
+        <Path d="M10 13a5 5 0 0 0 7 0l2-2a5 5 0 0 0-7-7l-1 1" />
+        <Path d="M14 11a5 5 0 0 0-7 0l-2 2a5 5 0 0 0 7 7l1-1" />
+      </Svg>
+    ),
+  },
+  {
+    label: 'Image',
+    icon: (
+      <Svg width={15} height={15} viewBox="0 0 24 24" stroke={colors.textDim} {...stroke}>
+        <Rect x={3} y={4} width={18} height={16} rx={2} />
+        <Circle cx={8.5} cy={9.5} r={1.6} />
+        <Path d="m4 18 5-5 4 4 3-3 4 4" />
+      </Svg>
+    ),
+  },
+];
+
+/**
+ * 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 }: ToolbarProps) {
+  return (
+    <View style={[styles.bar, style]} accessibilityRole="toolbar">
+      {items.map((item, i) =>
+        item.divider ? (
+          <View key={i} style={styles.divider} />
+        ) : (
+          <Pressable
+            key={i}
+            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,
+            ]}
+          >
+            {item.icon}
+          </Pressable>
+        ),
+      )}
+    </View>
+  );
+}
+
+/* ============================================================================
+   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).
+   ========================================================================== */
+
+export interface DropzoneProps {
+  /** primary prompt line */
+  label?: string;
+  /** secondary hint line (formats / size) */
+  hint?: string;
+  /** glyph rendered in the round badge; defaults to an upload icon */
+  icon?: ReactNode;
+  /**
+   * Fires on tap, before any picker opens. RN has no file-drop; when the optional
+   * `expo-document-picker` peer is installed the Dropzone opens the OS picker
+   * automatically, otherwise wire your own picker here.
+   */
+  onPress?: () => void;
+  /** receives the picked-file descriptors (from `expo-document-picker`, if present) */
+  onFiles?: (files: unknown[]) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_DZ_ICON: ReactNode = (
+  <Svg width={22} height={22} viewBox="0 0 24 24" stroke={colors.accent2} {...stroke}>
+    <Path d="M12 16V4M8 8l4-4 4 4" />
+    <Path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
+  </Svg>
+);
+
+/** 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,
+}: DropzoneProps) {
+  const pick = async () => {
+    onPress?.();
+    if (typeof documentPicker?.getDocumentAsync !== 'function') return;
+    try {
+      const res = (await documentPicker.getDocumentAsync({
+        multiple: true,
+        copyToCacheDirectory: true,
+      })) as { canceled?: boolean; assets?: unknown[]; type?: string } | undefined;
+      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 (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={pick}
+      style={({ pressed }) => [styles.dropzone, pressed && styles.dropzoneActive, style]}
+    >
+      <View style={styles.dzIco}>{icon}</View>
+      <Text style={styles.dzLabel}>{label}</Text>
+      <Text style={styles.dzHint}>{hint}</Text>
+    </Pressable>
+  );
+}
+
+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',
+  },
+});