@buoy-gg/shared-ui 7.0.26 → 7.0.28

package/lib/commonjs/ui/night/nightTheme.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.night = exports.NIGHT_LABEL_TRACKING = void 0;
+/**
+ * "Night" design tokens — the Everlights surface language, ported.
+ *
+ * A near-black, smooth, borderless-feeling system built to sit ON TOP of the
+ * shared ToolBackground star field: one `#050505` sheet the field shows
+ * through, `#0C0C0C` cards with hairline `#1A1A1C` borders, `#161618` rows
+ * inside them, uppercase section labels OUTSIDE the cards, and a single green
+ * accent that takes dark ink.
+ *
+ * Values are lifted 1:1 from the Everlights app's `constants/theme.ts`
+ * (`Palette` + `DarkColors`) and its modal tokens — that app is the design
+ * reference, so when in doubt match it, don't invent.
+ *
+ * THE ACCENT IS ONE SEAM: everything green reads `night.color.accent*`. The
+ * family is Buoy's brand green (`buoyColors.primary`, #20C997 — kept as
+ * literals so this module stays import-free); swapping it is a seven-line
+ * change here and nowhere else. `onAccent` stays black — this green wants
+ * dark ink.
+ *
+ * SCOPE: piloted on the dial menu's settings modal (JsModal `variant="night"`
+ * + DevToolsSettingsModal). If it sticks, convert the other tools to it.
+ */
+
+const night = exports.night = {
+  color: {
+    /** The sheet itself — also the inset track of a segmented control. */
+    bg: "#050505",
+    /** A card. */
+    surface: "#0C0C0C",
+    /** A row or control inside a card. */
+    surfaceElevated: "#161618",
+    /** Hairline card border. */
+    border: "#1A1A1C",
+    /** Hairline between rows inside a card. */
+    separator: "rgba(255, 255, 255, 0.08)",
+    /** Neutral fills, lightest → strongest. */
+    fill: "rgba(255, 255, 255, 0.06)",
+    fillSecondary: "rgba(255, 255, 255, 0.08)",
+    fillTertiary: "rgba(255, 255, 255, 0.12)",
+    /** Chip resting fill — dark glass, readable over the star field. */
+    buttonSurface: "rgba(8, 10, 14, 0.85)",
+    /** Secondary/destructive button plate. */
+    button: "#1C1C1C",
+    buttonPressed: "#2C2C2E",
+    text: "#ECEDEE",
+    textSecondary: "#9BA1A6",
+    textTertiary: "#636366",
+    /** Drag handles, input placeholders. */
+    placeholder: "rgba(255, 255, 255, 0.30)",
+    /** The one accent (Buoy brand green). See the header note — one seam. */
+    accent: "#20C997",
+    accentPressed: "#1BAB80",
+    accentSoft: "rgba(32, 201, 151, 0.12)",
+    accentFill: "rgba(32, 201, 151, 0.18)",
+    accentBorder: "rgba(32, 201, 151, 0.20)",
+    accentBorderStrong: "rgba(32, 201, 151, 0.35)",
+    /** Ink on a filled accent surface — the accent takes DARK ink. */
+    onAccent: "#000000",
+    danger: "#FF3B30",
+    dangerSoft: "rgba(255, 59, 48, 0.10)",
+    warning: "#FF8329",
+    warningSoft: "rgba(255, 131, 41, 0.12)",
+    info: "#1E6DFF",
+    infoSoft: "rgba(30, 109, 255, 0.12)",
+    /** Switch thumb at rest (Everlights moon gray). */
+    knob: "#D4D8DC"
+  },
+  radius: {
+    /** Sheets and dialogs. */
+    sheet: 16,
+    /** Cards. */
+    card: 14,
+    /** Inputs and code blocks. */
+    input: 12,
+    /** Rows and inner controls; also the segmented-control track. */
+    row: 10,
+    /** Segment thumb inside a radius-10 track. */
+    segment: 8,
+    /** Small badges. */
+    badge: 6,
+    /** Zone-style chips. */
+    chip: 20,
+    /** Fully rounded pills (buttons use height/2 instead). */
+    pill: 999
+  },
+  /** Screen/sheet horizontal margin. */
+  gutter: 16,
+  /** Section labels sit 4pt in from the card edge. */
+  labelInset: 4,
+  /** Vertical rhythm between labeled card groups. */
+  groupGap: 24,
+  /** Card interior padding. */
+  cardPad: 14,
+  /** Row padding inside an edge-to-edge card. */
+  rowPadH: 16,
+  rowPadV: 14,
+  font: {
+    /** Sheet/modal titles. */
+    title: 17,
+    /** Row labels and values. */
+    row: 15,
+    /** Body copy, chip labels. */
+    body: 14,
+    /** Segmented-control labels, captions, footnotes. */
+    caption: 13,
+    /** Uppercase section labels. */
+    label: 12,
+    /** Uppercase micro labels (START/END style). */
+    micro: 11
+  }
+};
+
+/** Section labels track wide open, Everlights-style. */
+const NIGHT_LABEL_TRACKING = exports.NIGHT_LABEL_TRACKING = 0.8;

package/lib/commonjs/ui/night/primitives.js

@@ -0,0 +1,498 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NightBadge = NightBadge;
+exports.NightButton = NightButton;
+exports.NightCard = NightCard;
+exports.NightChip = NightChip;
+exports.NightFootnote = NightFootnote;
+exports.NightRows = NightRows;
+exports.NightSectionLabel = NightSectionLabel;
+exports.NightSegmented = NightSegmented;
+exports.NightSeparator = NightSeparator;
+exports.NightSwitch = NightSwitch;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _nightTheme = require("./nightTheme.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Night primitives — the building blocks of the Everlights-style surface
+ * (see ./nightTheme for the tokens and where the look comes from).
+ *
+ * The shape they compose to:
+ *
+ *   NightSectionLabel   STORAGE                ← outside the card, uppercase
+ *   NightCard           ┌──────────────────┐
+ *     NightRows         │ row              │   ← hairline-separated children
+ *                       │ ────────────     │
+ *                       │ row              │
+ *                       └──────────────────┘
+ *   NightFootnote       Settings persist through…
+ *
+ * Controls: NightSwitch (the Everlights 56×32 toggle), NightChip (zone-style
+ * pill), NightButton (primary = filled accent w/ dark ink, everything else on
+ * the #1C1C1C plate), NightSegmented (the All/Day control with the accent
+ * underline), NightBadge (small status caps).
+ */
+
+/** Uppercase section label that sits ABOVE a NightCard. */
+function NightSectionLabel({
+  children,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.sectionLabel, style],
+    children: children
+  });
+}
+
+/** Explanatory line under a NightCard (or above a CTA, `centered`). */
+function NightFootnote({
+  children,
+  centered,
+  tone = "tertiary",
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.footnote, tone === "secondary" ? styles.footnoteSecondary : null, tone === "warning" ? styles.footnoteWarning : null, tone === "danger" ? styles.footnoteDanger : null, centered ? styles.footnoteCentered : null, style],
+    children: children
+  });
+}
+
+/** A card: `#0C0C0C`, radius 14, hairline border. `padded` = interior 14. */
+function NightCard({
+  children,
+  padded,
+  style
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.card, padded ? styles.cardPadded : null, style],
+    children: children
+  });
+}
+
+/** Hairline separator between rows, inset from the left like iOS. */
+function NightSeparator({
+  inset = _nightTheme.night.rowPadH
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.separator, {
+      marginLeft: inset
+    }]
+  });
+}
+
+/**
+ * Interleaves a hairline between consecutive children so rows never track
+ * their own position. Meant to live inside an unpadded NightCard.
+ */
+function NightRows({
+  children,
+  inset = _nightTheme.night.rowPadH
+}) {
+  const rows = _react.Children.toArray(children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: rows.map((row, index) =>
+    /*#__PURE__*/
+    // Children.toArray assigns stable synthetic keys for keyed children.
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      children: [index > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(NightSeparator, {
+        inset: inset
+      }) : null, row]
+    }, row.key ?? index))
+  });
+}
+
+// Everlights toggle geometry, verbatim.
+const TRACK_W = 56;
+const TRACK_H = 32;
+const THUMB = 22;
+const TRACK_PAD = 5;
+const TRAVEL = TRACK_W - THUMB - TRACK_PAD * 2;
+
+/**
+ * The Everlights 56×32 switch. The thumb slides on the native driver; the
+ * colors snap with the state change, which reads fine at this size.
+ */
+function NightSwitch({
+  value,
+  onValueChange,
+  disabled
+}) {
+  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(value ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(progress, {
+      toValue: value ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true
+    }).start();
+  }, [value, progress]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+    activeOpacity: 0.8,
+    disabled: disabled,
+    onPress: () => onValueChange(!value),
+    accessibilityRole: "switch",
+    accessibilityState: {
+      checked: value,
+      disabled
+    },
+    hitSlop: {
+      top: 8,
+      bottom: 8,
+      left: 8,
+      right: 8
+    },
+    style: [styles.switchTrack, value ? styles.switchTrackOn : null, disabled ? styles.switchDisabled : null],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.switchThumb, value ? styles.switchThumbOn : null, {
+        transform: [{
+          translateX: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, TRAVEL]
+          })
+        }]
+      }]
+    })
+  });
+}
+
+/**
+ * Zone-style pill chip. The fill never changes — selection is signaled by the
+ * border and label color only, exactly like the Everlights zone row.
+ */
+function NightChip({
+  label,
+  selected,
+  onPress,
+  disabled,
+  icon
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    activeOpacity: 0.7,
+    disabled: disabled || !onPress,
+    onPress: onPress,
+    style: [styles.chip, selected ? styles.chipSelected : null, disabled ? styles.chipDisabled : null],
+    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.chipText, selected ? styles.chipTextSelected : null],
+      children: label
+    })]
+  });
+}
+/**
+ * Everlights button. `primary` fills with the accent and takes DARK ink;
+ * every other variant sits on the `#1C1C1C` plate and differs only in label
+ * color. `lg` is the fully-rounded 50pt CTA.
+ */
+function NightButton({
+  label,
+  onPress,
+  variant = "secondary",
+  size = "lg",
+  icon,
+  disabled,
+  fullWidth = true
+}) {
+  const labelColor = variant === "primary" ? _nightTheme.night.color.onAccent : variant === "tertiary" ? _nightTheme.night.color.text : variant === "destructive" ? _nightTheme.night.color.danger : _nightTheme.night.color.accent;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    activeOpacity: 0.7,
+    disabled: disabled,
+    onPress: onPress,
+    style: [styles.button, size === "md" ? styles.buttonMd : styles.buttonLg, variant === "primary" ? styles.buttonPrimary : variant === "ghost" ? styles.buttonGhost : styles.buttonPlate, fullWidth ? styles.buttonFullWidth : null, disabled ? styles.buttonDisabled : null],
+    children: [icon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [size === "md" ? styles.buttonTextMd : styles.buttonTextLg, {
+        color: labelColor
+      }],
+      children: label
+    })]
+  });
+}
+/**
+ * Segmented control: `#050505` track, `#161618` thumb, and the accent
+ * underline glow beneath the active label (the Everlights All/Day tabs).
+ *
+ * THE shared tab control for night-theme tool headers — the dial settings
+ * and the network tool both mount this one. `size="sm"` is the compact
+ * variant for in-tool headers where the full-height control reads too tall.
+ */
+function NightSegmented({
+  tabs,
+  activeKey,
+  onChange,
+  size = "md"
+}) {
+  const small = size === "sm";
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.segmentTrack,
+    children: tabs.map(tab => {
+      const active = tab.key === activeKey;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        activeOpacity: 0.7,
+        accessibilityRole: "tab",
+        accessibilityState: {
+          selected: active
+        },
+        accessibilityLabel: tab.label,
+        onPress: () => onChange(tab.key),
+        style: [styles.segment, small ? styles.segmentSm : null, active ? styles.segmentActive : null],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.segmentText, small ? styles.segmentTextSm : null, active ? styles.segmentTextActive : null],
+          children: tab.label
+        }), active ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.segmentUnderline, small ? styles.segmentUnderlineSm : null]
+        }) : null]
+      }, tab.key);
+    })
+  });
+}
+/** Small uppercase status cap ("FILE SYSTEM", "CONNECTED"). */
+function NightBadge({
+  label,
+  tone = "neutral"
+}) {
+  const fill = tone === "accent" ? styles.badgeAccent : tone === "warning" ? styles.badgeWarning : tone === "danger" ? styles.badgeDanger : tone === "info" ? styles.badgeInfo : styles.badgeNeutral;
+  const ink = tone === "accent" ? styles.badgeTextAccent : tone === "warning" ? styles.badgeTextWarning : tone === "danger" ? styles.badgeTextDanger : tone === "info" ? styles.badgeTextInfo : styles.badgeTextNeutral;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.badge, fill],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.badgeText, ink],
+      children: label
+    })
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  sectionLabel: {
+    color: _nightTheme.night.color.textSecondary,
+    fontSize: _nightTheme.night.font.label,
+    fontWeight: "600",
+    letterSpacing: _nightTheme.NIGHT_LABEL_TRACKING,
+    textTransform: "uppercase",
+    marginBottom: 8,
+    marginLeft: _nightTheme.night.labelInset
+  },
+  footnote: {
+    color: _nightTheme.night.color.textTertiary,
+    fontSize: _nightTheme.night.font.caption,
+    fontWeight: "500",
+    lineHeight: _nightTheme.night.font.caption * 1.4,
+    marginTop: 8,
+    marginLeft: _nightTheme.night.labelInset
+  },
+  footnoteSecondary: {
+    color: _nightTheme.night.color.textSecondary
+  },
+  footnoteWarning: {
+    color: _nightTheme.night.color.warning
+  },
+  footnoteDanger: {
+    color: _nightTheme.night.color.danger
+  },
+  footnoteCentered: {
+    textAlign: "center",
+    marginLeft: 0
+  },
+  card: {
+    backgroundColor: _nightTheme.night.color.surface,
+    borderRadius: _nightTheme.night.radius.card,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    overflow: "hidden"
+  },
+  cardPadded: {
+    padding: _nightTheme.night.cardPad,
+    gap: 10
+  },
+  separator: {
+    height: _reactNative.StyleSheet.hairlineWidth,
+    backgroundColor: _nightTheme.night.color.separator
+  },
+  switchTrack: {
+    width: TRACK_W,
+    height: TRACK_H,
+    borderRadius: TRACK_H / 2,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.fillTertiary,
+    backgroundColor: _nightTheme.night.color.surfaceElevated,
+    paddingHorizontal: TRACK_PAD,
+    justifyContent: "center",
+    overflow: "hidden"
+  },
+  switchTrackOn: {
+    backgroundColor: _nightTheme.night.color.accentFill,
+    borderColor: _nightTheme.night.color.accentBorderStrong
+  },
+  switchDisabled: {
+    opacity: 0.4
+  },
+  switchThumb: {
+    width: THUMB,
+    height: THUMB,
+    borderRadius: THUMB / 2,
+    backgroundColor: _nightTheme.night.color.knob
+  },
+  switchThumbOn: {
+    backgroundColor: _nightTheme.night.color.accent
+  },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 14,
+    paddingVertical: 9,
+    borderRadius: _nightTheme.night.radius.chip,
+    borderWidth: 1.5,
+    backgroundColor: _nightTheme.night.color.buttonSurface,
+    borderColor: _nightTheme.night.color.fillTertiary
+  },
+  chipSelected: {
+    borderColor: _nightTheme.night.color.accentBorderStrong
+  },
+  chipDisabled: {
+    opacity: 0.4
+  },
+  chipText: {
+    fontSize: _nightTheme.night.font.body,
+    fontWeight: "500",
+    color: _nightTheme.night.color.textSecondary
+  },
+  chipTextSelected: {
+    color: _nightTheme.night.color.accent
+  },
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  },
+  buttonMd: {
+    height: 34,
+    paddingHorizontal: 16,
+    borderRadius: 17
+  },
+  buttonLg: {
+    height: 50,
+    paddingHorizontal: 20,
+    borderRadius: 25
+  },
+  buttonPrimary: {
+    backgroundColor: _nightTheme.night.color.accent
+  },
+  buttonPlate: {
+    backgroundColor: _nightTheme.night.color.button
+  },
+  buttonGhost: {
+    backgroundColor: "transparent"
+  },
+  buttonFullWidth: {
+    alignSelf: "stretch"
+  },
+  buttonDisabled: {
+    opacity: 0.4
+  },
+  buttonTextMd: {
+    fontSize: 15,
+    fontWeight: "600"
+  },
+  buttonTextLg: {
+    fontSize: 17,
+    fontWeight: "600"
+  },
+  segmentTrack: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: _nightTheme.night.color.bg,
+    borderRadius: _nightTheme.night.radius.row,
+    borderWidth: 1,
+    borderColor: _nightTheme.night.color.border,
+    padding: 3
+  },
+  segment: {
+    flex: 1,
+    paddingVertical: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: _nightTheme.night.radius.segment
+  },
+  segmentActive: {
+    backgroundColor: _nightTheme.night.color.surfaceElevated
+  },
+  segmentText: {
+    fontSize: _nightTheme.night.font.caption,
+    fontWeight: "500",
+    color: _nightTheme.night.color.textSecondary
+  },
+  segmentTextActive: {
+    fontWeight: "600",
+    color: _nightTheme.night.color.text
+  },
+  segmentUnderline: {
+    position: "absolute",
+    bottom: 2,
+    width: 24,
+    height: 2.5,
+    borderRadius: 1.25,
+    backgroundColor: _nightTheme.night.color.accent,
+    shadowColor: _nightTheme.night.color.accent,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 6
+  },
+  segmentSm: {
+    paddingVertical: 5
+  },
+  segmentTextSm: {
+    fontSize: 12
+  },
+  segmentUnderlineSm: {
+    bottom: 1.5,
+    width: 20,
+    height: 2,
+    borderRadius: 1
+  },
+  badge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: _nightTheme.night.radius.badge,
+    alignSelf: "flex-start"
+  },
+  badgeText: {
+    fontSize: _nightTheme.night.font.micro,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  },
+  badgeAccent: {
+    backgroundColor: _nightTheme.night.color.accentSoft
+  },
+  badgeTextAccent: {
+    color: _nightTheme.night.color.accent
+  },
+  badgeWarning: {
+    backgroundColor: _nightTheme.night.color.warningSoft
+  },
+  badgeTextWarning: {
+    color: _nightTheme.night.color.warning
+  },
+  badgeDanger: {
+    backgroundColor: _nightTheme.night.color.dangerSoft
+  },
+  badgeTextDanger: {
+    color: _nightTheme.night.color.danger
+  },
+  badgeInfo: {
+    backgroundColor: _nightTheme.night.color.infoSoft
+  },
+  badgeTextInfo: {
+    color: _nightTheme.night.color.info
+  },
+  badgeNeutral: {
+    backgroundColor: _nightTheme.night.color.fillSecondary
+  },
+  badgeTextNeutral: {
+    color: _nightTheme.night.color.textSecondary
+  }
+});