@zendir/ui 0.4.1 → 0.6.0

package/dist/style.css

@@ -1,194 +1,217 @@
-/**
- * Zendir UI — Leaflet theme (hybrid / purple-hue)
- * Use with GroundTrackMap when mapProvider="leaflet".
- * Keeps map controls on-brand and minimizes third-party branding on the frontend.
- */
-
-/* Container: match SDK background and radius. Inherit the active theme
- * font (set by <ThemeProvider />) instead of hard-coding Roboto, so
- * Leaflet text stays consistent with the rest of the app. */
-.zendir-ground-track-map .leaflet-container {
-  background: #0f1520;
-  font-family: var(--font-family-primary, 'Public Sans', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
-  cursor: grab;
-}
-
-/* Zoom controls: visible and above overlays so scroll/zoom work */
-.zendir-ground-track-map .leaflet-control-zoom {
-  z-index: 1000 !important;
-  border: 1px solid rgba(157, 112, 255, 0.35) !important;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
-}
-
-.zendir-ground-track-map .leaflet-control-zoom a,
-.zendir-ground-track-map .leaflet-control-zoom a:hover {
-  background: #181d2e !important;
-  color: #e4e0f0 !important;
-  width: 36px !important;
-  height: 36px !important;
-  line-height: 36px !important;
-  font-size: 20px !important;
-  font-weight: bold !important;
-  border: none !important;
-  cursor: pointer !important;
-}
-
-.zendir-ground-track-map .leaflet-control-zoom a:hover {
-  background: rgba(157, 112, 255, 0.15) !important;
-  color: #b794ff !important;
-}
-
-.zendir-ground-track-map .leaflet-control-zoom-in {
-  border-bottom: 1px solid rgba(157, 112, 255, 0.15) !important;
-}
-
-/* Attribution: minimal, no Leaflet branding on frontend */
-.zendir-ground-track-map .leaflet-control-attribution {
-  background: rgba(15, 21, 32, 0.85) !important;
-  color: rgba(148, 163, 184, 0.7) !important;
-  font-size: 10px !important;
-  padding: 2px 6px !important;
-  border-radius: 4px 0 0 0;
-  border: none;
-  margin: 0 !important;
-}
-
-/* Hide "Leaflet" link in attribution so only tile provider is shown */
-.zendir-ground-track-map .leaflet-control-attribution a[href*="leaflet"] {
-  display: none !important;
-}
-
-.zendir-ground-track-map .leaflet-control-attribution a {
-  color: rgba(157, 112, 255, 0.8) !important;
-}
-
-.zendir-ground-track-map .leaflet-control-attribution a:hover {
-  color: #b794ff !important;
-}
-
-/* Popup / tooltip styling */
-.zendir-ground-track-map .leaflet-popup-content-wrapper {
-  background: #181d2e;
-  border: 1px solid rgba(157, 112, 255, 0.2);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
-}
-
-.zendir-ground-track-map .leaflet-popup-tip {
-  background: #181d2e;
-}
-
-.zendir-ground-track-map .leaflet-popup-content {
-  margin: 8px 12px;
-  color: #e4e0f0;
-  font-size: 12px;
-}
-
-/* Ensure map is interactive (scroll zoom, drag) */
-.zendir-ground-track-map-leaflet .leaflet-container {
-  touch-action: none;
-}
-.zendir-ground-track-map .leaflet-pane,
-.zendir-ground-track-map .leaflet-tile-pane {
-  pointer-events: auto;
-}
-
-/* Dragging cursor */
-.zendir-ground-track-map .leaflet-grab {
-  cursor: grab;
-}
-
-.zendir-ground-track-map .leaflet-dragging .leaflet-grab {
-  cursor: grabbing;
-}
-
-/* ── Custom SVG div icons ──────────────────────────────────────────────────── */
-.zendir-sat-icon,
-.zendir-station-icon {
-  background: none !important;
-  border: none !important;
-  /* Let the inline SVG size itself naturally */
-  overflow: visible;
-  pointer-events: auto;
-  cursor: pointer;
-}
-
-.zendir-sat-icon:hover svg,
-.zendir-station-icon:hover svg {
-  filter: drop-shadow(0 0 6px currentColor);
-}
-
-/* Leaflet default icon reset (avoid blue pin override) */
-.zendir-sat-icon img,
-.zendir-station-icon img {
-  display: none !important;
-}
-
-/* Tooltip (rich HTML) */
-.zendir-leaflet-tooltip {
-  background: rgba(13, 19, 35, 0.95) !important;
-  border: 1px solid rgba(157, 112, 255, 0.35) !important;
-  border-radius: 6px !important;
-  color: #e4e0f0 !important;
-  font-size: 11px !important;
-  font-family: var(--font-family-primary, 'Public Sans', 'Roboto', 'Inter', system-ui, sans-serif) !important;
-  padding: 5px 9px !important;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
-  white-space: nowrap;
-  pointer-events: none;
-}
-
-.zendir-leaflet-tooltip::before {
-  border-top-color: rgba(157, 112, 255, 0.35) !important;
-}
-
-/* ── Pin icons ──────────────────────────────────────────────────────────────── */
-.zendir-pin-icon {
-  background: none !important;
-  border: none !important;
-  overflow: visible;
-  pointer-events: auto;
-  cursor: pointer;
-  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.zendir-pin-icon:hover {
-  transform: scale(1.15) translateY(-2px);
-  z-index: 1000 !important;
-}
-
-.zendir-pin-icon img {
-  display: none !important;
-}
-
-/* Pin tooltip */
-.zendir-pin-tooltip {
-  background: rgba(13, 19, 35, 0.95) !important;
-  border: 1px solid rgba(157, 112, 255, 0.35) !important;
-  border-radius: 6px !important;
-  color: #e4e0f0 !important;
-  font-size: 11px !important;
-  font-family: var(--font-family-primary, 'Public Sans', 'Roboto', 'Inter', system-ui, sans-serif) !important;
-  padding: 5px 9px !important;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
-  pointer-events: none;
-}
-
-.zendir-pin-tooltip::before {
-  border-top-color: rgba(157, 112, 255, 0.35) !important;
-}
-
-/* Crosshair cursor when pins are editable (click-to-add mode) */
-.zendir-pins-editable .leaflet-container {
-  cursor: crosshair;
-}
-
-.zendir-pins-editable .leaflet-marker-icon {
-  cursor: grab;
-}
-
-.zendir-pins-editable .leaflet-dragging .leaflet-marker-icon {
-  cursor: grabbing;
-}
+/**
+ * Zendir UI — Leaflet theme (hybrid / purple-hue)
+ * Use with GroundTrackMap when mapProvider="leaflet".
+ * Keeps map controls on-brand and minimizes third-party branding on the frontend.
+ */
+
+/* Container: match SDK background and radius. Inherit the active theme
+ * font (set by <ThemeProvider />) instead of hard-coding Roboto, so
+ * Leaflet text stays consistent with the rest of the app. */
+.zendir-ground-track-map .leaflet-container {
+  background: #0f1520;
+  font-family: var(
+    --font-family-primary,
+    "Public Sans",
+    "Roboto",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif
+  );
+  cursor: grab;
+}
+
+/* Zoom controls: visible and above overlays so scroll/zoom work */
+.zendir-ground-track-map .leaflet-control-zoom {
+  z-index: 1000 !important;
+  border: 1px solid rgba(157, 112, 255, 0.35) !important;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+}
+
+.zendir-ground-track-map .leaflet-control-zoom a,
+.zendir-ground-track-map .leaflet-control-zoom a:hover {
+  background: #181d2e !important;
+  color: #e4e0f0 !important;
+  width: 36px !important;
+  height: 36px !important;
+  line-height: 36px !important;
+  font-size: 20px !important;
+  font-weight: bold !important;
+  border: none !important;
+  cursor: pointer !important;
+}
+
+.zendir-ground-track-map .leaflet-control-zoom a:hover {
+  background: rgba(157, 112, 255, 0.15) !important;
+  color: #b794ff !important;
+}
+
+.zendir-ground-track-map .leaflet-control-zoom-in {
+  border-bottom: 1px solid rgba(157, 112, 255, 0.15) !important;
+}
+
+/* Attribution: minimal, no Leaflet branding on frontend */
+.zendir-ground-track-map .leaflet-control-attribution {
+  background: rgba(15, 21, 32, 0.85) !important;
+  color: rgba(148, 163, 184, 0.7) !important;
+  font-size: 10px !important;
+  padding: 2px 6px !important;
+  border-radius: 4px 0 0 0;
+  border: none;
+  margin: 0 !important;
+}
+
+/* Hide "Leaflet" link in attribution so only tile provider is shown */
+.zendir-ground-track-map .leaflet-control-attribution a[href*="leaflet"] {
+  display: none !important;
+}
+
+.zendir-ground-track-map .leaflet-control-attribution a {
+  color: rgba(157, 112, 255, 0.8) !important;
+}
+
+.zendir-ground-track-map .leaflet-control-attribution a:hover {
+  color: #b794ff !important;
+}
+
+/* Popup / tooltip styling */
+.zendir-ground-track-map .leaflet-popup-content-wrapper {
+  background: #181d2e;
+  border: 1px solid rgba(157, 112, 255, 0.2);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.zendir-ground-track-map .leaflet-popup-tip {
+  background: #181d2e;
+}
+
+.zendir-ground-track-map .leaflet-popup-content {
+  margin: 8px 12px;
+  color: #e4e0f0;
+  font-size: 12px;
+}
+
+/* Ensure map is interactive (scroll zoom, drag) */
+.zendir-ground-track-map-leaflet .leaflet-container {
+  touch-action: none;
+}
+.zendir-ground-track-map .leaflet-pane,
+.zendir-ground-track-map .leaflet-tile-pane {
+  pointer-events: auto;
+}
+
+/* Dragging cursor */
+.zendir-ground-track-map .leaflet-grab {
+  cursor: grab;
+}
+
+.zendir-ground-track-map .leaflet-dragging .leaflet-grab {
+  cursor: grabbing;
+}
+
+/* ── Custom SVG div icons ──────────────────────────────────────────────────── */
+.zendir-sat-icon,
+.zendir-station-icon {
+  background: none !important;
+  border: none !important;
+  /* Let the inline SVG size itself naturally */
+  overflow: visible;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.zendir-sat-icon:hover svg,
+.zendir-station-icon:hover svg {
+  filter: drop-shadow(0 0 6px currentColor);
+}
+
+/* Leaflet default icon reset (avoid blue pin override) */
+.zendir-sat-icon img,
+.zendir-station-icon img {
+  display: none !important;
+}
+
+/* Tooltip (rich HTML) */
+.zendir-leaflet-tooltip {
+  background: rgba(13, 19, 35, 0.95) !important;
+  border: 1px solid rgba(157, 112, 255, 0.35) !important;
+  border-radius: 6px !important;
+  color: #e4e0f0 !important;
+  font-size: 11px !important;
+  font-family: var(
+    --font-family-primary,
+    "Public Sans",
+    "Roboto",
+    "Inter",
+    system-ui,
+    sans-serif
+  ) !important;
+  padding: 5px 9px !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.zendir-leaflet-tooltip::before {
+  border-top-color: rgba(157, 112, 255, 0.35) !important;
+}
+
+/* ── Pin icons ──────────────────────────────────────────────────────────────── */
+.zendir-pin-icon {
+  background: none !important;
+  border: none !important;
+  overflow: visible;
+  pointer-events: auto;
+  cursor: pointer;
+  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.zendir-pin-icon:hover {
+  transform: scale(1.15) translateY(-2px);
+  z-index: 1000 !important;
+}
+
+.zendir-pin-icon img {
+  display: none !important;
+}
+
+/* Pin tooltip */
+.zendir-pin-tooltip {
+  background: rgba(13, 19, 35, 0.95) !important;
+  border: 1px solid rgba(157, 112, 255, 0.35) !important;
+  border-radius: 6px !important;
+  color: #e4e0f0 !important;
+  font-size: 11px !important;
+  font-family: var(
+    --font-family-primary,
+    "Public Sans",
+    "Roboto",
+    "Inter",
+    system-ui,
+    sans-serif
+  ) !important;
+  padding: 5px 9px !important;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
+  pointer-events: none;
+}
+
+.zendir-pin-tooltip::before {
+  border-top-color: rgba(157, 112, 255, 0.35) !important;
+}
+
+/* Crosshair cursor when pins are editable (click-to-add mode) */
+.zendir-pins-editable .leaflet-container {
+  cursor: crosshair;
+}
+
+.zendir-pins-editable .leaflet-marker-icon {
+  cursor: grab;
+}
+
+.zendir-pins-editable .leaflet-dragging .leaflet-marker-icon {
+  cursor: grabbing;
+}
+/*$vite$:1*/

package/dist/tokens/core.d.ts

@@ -0,0 +1,159 @@
+/**
+ * @zendir/ui - Design Tokens (core scalars)
+ *
+ * Exportable design tokens for use in CSS and JavaScript.
+ * Based on Astro UX Design System.
+ *
+ * These are the shared scalar primitives (spacing, radius, typography,
+ * shadows, animation) plus the base color reference table. Status colors
+ * are sourced from the Astro UXDS ramps in tokens/palettes so there is a
+ * single source of truth for severity values across the whole system.
+ */
+export declare const colors: {
+    readonly status: {
+        readonly critical: "#FF3838";
+        readonly serious: "#FFB302";
+        readonly caution: "#FCE83A";
+        readonly normal: "#56F000";
+        readonly standby: "#2DCCFF";
+        readonly off: "#A4ABB6";
+    };
+    readonly statusLightFill: {
+        readonly critical: "#FF2A04";
+        readonly serious: "#FFAF3D";
+        readonly caution: "#FAD800";
+        readonly normal: "#00E200";
+        readonly standby: "#64D9FF";
+        readonly off: "#7B8089";
+    };
+    readonly statusLightBorder: {
+        readonly critical: "#661102";
+        readonly serious: "#664618";
+        readonly caution: "#645600";
+        readonly normal: "#005A00";
+        readonly standby: "#285766";
+        readonly off: "#3C3E42";
+    };
+    readonly background: {
+        readonly dark: {
+            readonly base: "#101923";
+            readonly surface: "#1b2d3e";
+            readonly elevated: "#243647";
+            readonly overlay: "rgba(0, 0, 0, 0.7)";
+        };
+        readonly light: {
+            readonly base: "#f5f6f9";
+            readonly surface: "#ffffff";
+            readonly elevated: "#ffffff";
+            readonly overlay: "rgba(0, 0, 0, 0.5)";
+        };
+    };
+    readonly text: {
+        readonly dark: {
+            readonly primary: "#ffffff";
+            readonly secondary: "#9ea7ad";
+            readonly tertiary: "#6b7175";
+            readonly muted: "#52595f";
+        };
+        readonly light: {
+            readonly primary: "#1b2d3e";
+            readonly secondary: "#4c5a67";
+            readonly tertiary: "#7a8891";
+            readonly muted: "#a4adb5";
+        };
+    };
+    readonly accent: {
+        readonly primary: "#4dacff";
+        readonly secondary: "#3d8ddb";
+        readonly tertiary: "#2e6eb3";
+    };
+    readonly border: {
+        readonly dark: {
+            readonly default: "#3c4b5a";
+            readonly muted: "#2b3d4e";
+            readonly focus: "#4dacff";
+        };
+        readonly light: {
+            readonly default: "#c4c8cc";
+            readonly muted: "#e1e4e8";
+            readonly focus: "#4dacff";
+        };
+    };
+};
+export declare const spacing: {
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly md: "16px";
+    readonly lg: "24px";
+    readonly xl: "32px";
+    readonly xxl: "48px";
+};
+export declare const borderRadius: {
+    readonly none: "0";
+    readonly sm: "2px";
+    readonly md: "4px";
+    readonly lg: "8px";
+    readonly xl: "16px";
+    readonly full: "9999px";
+};
+/**
+ * Typography tokens following AstroUXDS Design System
+ * @see https://www.astrouxds.com/foundations/typography/
+ *
+ * Font weights per Astro spec: 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold)
+ * Note: Astro does NOT use 600 (semibold) - use 500 (medium) or 700 (bold) instead
+ */
+export declare const typography: {
+    readonly fontFamily: {
+        /** Heading font: Sora (Zendir Brand Standard) */
+        readonly heading: "\"Sora\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+        /** Primary font: Public Sans (Zendir Brand Standard) */
+        readonly primary: "\"Public Sans\", \"Roboto\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Helvetica Neue\", Arial, sans-serif";
+        /** Monospace font: Roboto Mono for data/code */
+        readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Consolas\", \"Liberation Mono\", monospace";
+    };
+    readonly fontSize: {
+        readonly micro: "0.5625rem";
+        readonly xxs: "0.625rem";
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly md: "1.125rem";
+        readonly lg: "1.25rem";
+        readonly xl: "1.5rem";
+        readonly xxl: "2.125rem";
+        readonly xxxl: "3rem";
+        readonly display: "3.75rem";
+    };
+    /**
+     * Font weights per AstroUXDS specification
+     * Only 300, 400, 500, 700 are officially supported
+     */
+    readonly fontWeight: {
+        readonly light: 300;
+        readonly normal: 400;
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly bold: 700;
+        /** @deprecated Use medium (500) instead - Astro spec only supports 300, 400, 500, 700 */
+        readonly semibold: 500;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+};
+export declare const shadows: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.3)";
+    readonly md: "0 2px 8px rgba(0, 0, 0, 0.3)";
+    readonly lg: "0 4px 16px rgba(0, 0, 0, 0.3)";
+    readonly xl: "0 8px 32px rgba(0, 0, 0, 0.4)";
+    readonly glow: "0 0 20px rgba(77, 172, 255, 0.4)";
+};
+export declare const animation: {
+    readonly fast: "150ms ease";
+    readonly normal: "250ms ease";
+    readonly slow: "400ms ease";
+};