@buoy-gg/shared-ui 7.0.25 → 7.0.27

package/lib/typescript/module/ui/night/nightTheme.d.ts

@@ -0,0 +1,113 @@
+/**
+ * "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.
+ */
+export declare const night: {
+    readonly color: {
+        /** The sheet itself — also the inset track of a segmented control. */
+        readonly bg: "#050505";
+        /** A card. */
+        readonly surface: "#0C0C0C";
+        /** A row or control inside a card. */
+        readonly surfaceElevated: "#161618";
+        /** Hairline card border. */
+        readonly border: "#1A1A1C";
+        /** Hairline between rows inside a card. */
+        readonly separator: "rgba(255, 255, 255, 0.08)";
+        /** Neutral fills, lightest → strongest. */
+        readonly fill: "rgba(255, 255, 255, 0.06)";
+        readonly fillSecondary: "rgba(255, 255, 255, 0.08)";
+        readonly fillTertiary: "rgba(255, 255, 255, 0.12)";
+        /** Chip resting fill — dark glass, readable over the star field. */
+        readonly buttonSurface: "rgba(8, 10, 14, 0.85)";
+        /** Secondary/destructive button plate. */
+        readonly button: "#1C1C1C";
+        readonly buttonPressed: "#2C2C2E";
+        readonly text: "#ECEDEE";
+        readonly textSecondary: "#9BA1A6";
+        readonly textTertiary: "#636366";
+        /** Drag handles, input placeholders. */
+        readonly placeholder: "rgba(255, 255, 255, 0.30)";
+        /** The one accent (Buoy brand green). See the header note — one seam. */
+        readonly accent: "#20C997";
+        readonly accentPressed: "#1BAB80";
+        readonly accentSoft: "rgba(32, 201, 151, 0.12)";
+        readonly accentFill: "rgba(32, 201, 151, 0.18)";
+        readonly accentBorder: "rgba(32, 201, 151, 0.20)";
+        readonly accentBorderStrong: "rgba(32, 201, 151, 0.35)";
+        /** Ink on a filled accent surface — the accent takes DARK ink. */
+        readonly onAccent: "#000000";
+        readonly danger: "#FF3B30";
+        readonly dangerSoft: "rgba(255, 59, 48, 0.10)";
+        readonly warning: "#FF8329";
+        readonly warningSoft: "rgba(255, 131, 41, 0.12)";
+        readonly info: "#1E6DFF";
+        readonly infoSoft: "rgba(30, 109, 255, 0.12)";
+        /** Switch thumb at rest (Everlights moon gray). */
+        readonly knob: "#D4D8DC";
+    };
+    readonly radius: {
+        /** Sheets and dialogs. */
+        readonly sheet: 16;
+        /** Cards. */
+        readonly card: 14;
+        /** Inputs and code blocks. */
+        readonly input: 12;
+        /** Rows and inner controls; also the segmented-control track. */
+        readonly row: 10;
+        /** Segment thumb inside a radius-10 track. */
+        readonly segment: 8;
+        /** Small badges. */
+        readonly badge: 6;
+        /** Zone-style chips. */
+        readonly chip: 20;
+        /** Fully rounded pills (buttons use height/2 instead). */
+        readonly pill: 999;
+    };
+    /** Screen/sheet horizontal margin. */
+    readonly gutter: 16;
+    /** Section labels sit 4pt in from the card edge. */
+    readonly labelInset: 4;
+    /** Vertical rhythm between labeled card groups. */
+    readonly groupGap: 24;
+    /** Card interior padding. */
+    readonly cardPad: 14;
+    /** Row padding inside an edge-to-edge card. */
+    readonly rowPadH: 16;
+    readonly rowPadV: 14;
+    readonly font: {
+        /** Sheet/modal titles. */
+        readonly title: 17;
+        /** Row labels and values. */
+        readonly row: 15;
+        /** Body copy, chip labels. */
+        readonly body: 14;
+        /** Segmented-control labels, captions, footnotes. */
+        readonly caption: 13;
+        /** Uppercase section labels. */
+        readonly label: 12;
+        /** Uppercase micro labels (START/END style). */
+        readonly micro: 11;
+    };
+};
+/** Section labels track wide open, Everlights-style. */
+export declare const NIGHT_LABEL_TRACKING = 0.8;
+//# sourceMappingURL=nightTheme.d.ts.map

package/lib/typescript/module/ui/night/nightTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nightTheme.d.ts","sourceRoot":"","sources":["../../../../../src/ui/night/nightTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,KAAK;;QAEd,sEAAsE;;QAEtE,cAAc;;QAEd,sCAAsC;;QAEtC,4BAA4B;;QAE5B,2CAA2C;;QAG3C,2CAA2C;;;;QAK3C,oEAAoE;;QAEpE,0CAA0C;;;;;;QAO1C,wCAAwC;;QAGxC,yEAAyE;;;;;;;QAOzE,kEAAkE;;;;;;;;QAUlE,mDAAmD;;;;QAKnD,0BAA0B;;QAE1B,aAAa;;QAEb,8BAA8B;;QAE9B,iEAAiE;;QAEjE,8CAA8C;;QAE9C,oBAAoB;;QAEpB,wBAAwB;;QAExB,0DAA0D;;;IAI5D,sCAAsC;;IAEtC,oDAAoD;;IAEpD,mDAAmD;;IAEnD,6BAA6B;;IAE7B,+CAA+C;;;;QAK7C,0BAA0B;;QAE1B,6BAA6B;;QAE7B,8BAA8B;;QAE9B,qDAAqD;;QAErD,gCAAgC;;QAEhC,gDAAgD;;;CAG1C,CAAC;AAEX,wDAAwD;AACxD,eAAO,MAAM,oBAAoB,MAAM,CAAC"}

package/lib/typescript/module/ui/night/primitives.d.ts

@@ -0,0 +1,111 @@
+/**
+ * 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).
+ */
+import { type ReactNode } from "react";
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+/** Uppercase section label that sits ABOVE a NightCard. */
+export declare function NightSectionLabel({ children, style, }: {
+    children: string;
+    style?: StyleProp<TextStyle>;
+}): import("react").JSX.Element;
+/** Explanatory line under a NightCard (or above a CTA, `centered`). */
+export declare function NightFootnote({ children, centered, tone, style, }: {
+    children: ReactNode;
+    centered?: boolean;
+    tone?: "tertiary" | "secondary" | "warning" | "danger";
+    style?: StyleProp<TextStyle>;
+}): import("react").JSX.Element;
+/** A card: `#0C0C0C`, radius 14, hairline border. `padded` = interior 14. */
+export declare function NightCard({ children, padded, style, }: {
+    children: ReactNode;
+    padded?: boolean;
+    style?: StyleProp<ViewStyle>;
+}): import("react").JSX.Element;
+/** Hairline separator between rows, inset from the left like iOS. */
+export declare function NightSeparator({ inset }: {
+    inset?: number;
+}): import("react").JSX.Element;
+/**
+ * Interleaves a hairline between consecutive children so rows never track
+ * their own position. Meant to live inside an unpadded NightCard.
+ */
+export declare function NightRows({ children, inset, }: {
+    children: ReactNode;
+    inset?: number;
+}): import("react").JSX.Element;
+/**
+ * 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.
+ */
+export declare function NightSwitch({ value, onValueChange, disabled, }: {
+    value: boolean;
+    onValueChange: (next: boolean) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+/**
+ * Zone-style pill chip. The fill never changes — selection is signaled by the
+ * border and label color only, exactly like the Everlights zone row.
+ */
+export declare function NightChip({ label, selected, onPress, disabled, icon, }: {
+    label: string;
+    selected?: boolean;
+    onPress?: () => void;
+    disabled?: boolean;
+    icon?: ReactNode;
+}): import("react").JSX.Element;
+export type NightButtonVariant = "primary" | "secondary" | "tertiary" | "destructive" | "ghost";
+/**
+ * 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.
+ */
+export declare function NightButton({ label, onPress, variant, size, icon, disabled, fullWidth, }: {
+    label: string;
+    onPress: () => void;
+    variant?: NightButtonVariant;
+    size?: "md" | "lg";
+    icon?: ReactNode;
+    disabled?: boolean;
+    fullWidth?: boolean;
+}): import("react").JSX.Element;
+export interface NightTab {
+    key: string;
+    label: string;
+}
+/**
+ * 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.
+ */
+export declare function NightSegmented({ tabs, activeKey, onChange, size, }: {
+    tabs: NightTab[];
+    activeKey: string;
+    onChange: (key: string) => void;
+    size?: "md" | "sm";
+}): import("react").JSX.Element;
+export type NightBadgeTone = "accent" | "warning" | "danger" | "info" | "neutral";
+/** Small uppercase status cap ("FILE SYSTEM", "CONNECTED"). */
+export declare function NightBadge({ label, tone, }: {
+    label: string;
+    tone?: NightBadgeTone;
+}): import("react").JSX.Element;
+//# sourceMappingURL=primitives.d.ts.map

package/lib/typescript/module/ui/night/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../../src/ui/night/primitives.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/shared-ui",
-  "version": "7.0.25",
+  "version": "7.0.27",
   "description": "Shared UI components, hooks, and utilities",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -136,10 +136,10 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "^7.0.25"
+    "@buoy-gg/floating-tools-core": "^7.0.27"
   },
   "peerDependencies": {
-    "@buoy-gg/license": "7.0.25",
+    "@buoy-gg/license": "7.0.27",
     "@react-native-clipboard/clipboard": "*",
     "expo-clipboard": "*",
     "expo-file-system": "*",
@@ -167,7 +167,7 @@
     "expo-clipboard": "~7.1.5",
     "react-native-safe-area-context": "^5.6.2",
     "typescript": "~5.8.3",
-    "@buoy-gg/license": "^7.0.25"
+    "@buoy-gg/license": "^7.0.27"
   },
   "react-native-builder-bob": {
     "source": "src",