@zendir/ui 0.1.0

package/dist/react/astro/GlobalStatusBar.d.ts

@@ -0,0 +1,42 @@
+import { default as React, ReactNode } from 'react';
+
+export interface GlobalStatusBarProps {
+    /** Application name */
+    appName?: string;
+    /** Application domain (organization/mission) */
+    appDomain?: string;
+    /** Application version */
+    appVersion?: string;
+    /** Username to display */
+    username?: string;
+    /** Left slot content (app switcher, etc.) */
+    leftSlot?: ReactNode;
+    /** Center slot content (typically clock) */
+    centerSlot?: ReactNode;
+    /** Right slot content (monitoring icons, controls) */
+    rightSlot?: ReactNode;
+    /** Additional children */
+    children?: ReactNode;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * GlobalStatusBar - Pure React global status bar
+ *
+ * Primary header component for space applications. Includes slots for:
+ * - App switcher (left)
+ * - Global clock (center)
+ * - Monitoring icons (right)
+ *
+ * @example
+ * ```tsx
+ * <GlobalStatusBar
+ *   appName="Mission Control"
+ *   appDomain="Zendir"
+ *   username="Demo User"
+ *   centerSlot={<MissionClock />}
+ *   rightSlot={<MonitoringIcons />}
+ * />
+ * ```
+ */
+export declare const GlobalStatusBar: React.NamedExoticComponent<GlobalStatusBarProps>;

package/dist/react/astro/GlobalStatusBar.js

@@ -0,0 +1,165 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { safeAccentText, classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const GlobalStatusBar = memo(function GlobalStatusBar2({
+  appName = "Zendir",
+  appDomain,
+  appVersion,
+  username,
+  leftSlot,
+  centerSlot,
+  rightSlot,
+  children,
+  className = ""
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: classNames("zendir-global-status-bar", className),
+      role: "banner",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        height: 56,
+        padding: `0 ${tokens.spacing.lg}`,
+        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+        ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
+        borderBottom: `1px solid ${tokens.colors.border.muted}`,
+        color: tokens.colors.text.primary,
+        fontFamily: tokens.typography.fontFamily.primary
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: tokens.spacing.lg,
+              flex: "1 1 0"
+            },
+            children: [
+              leftSlot,
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: tokens.spacing.sm }, children: [
+                appDomain && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: tokens.typography.fontSize.sm,
+                      fontWeight: tokens.typography.fontWeight.normal,
+                      color: tokens.colors.text.tertiary,
+                      textTransform: "uppercase",
+                      letterSpacing: tokens.typography.letterSpacing.wide
+                    },
+                    children: appDomain
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: tokens.typography.fontSize.xl,
+                      fontWeight: tokens.typography.fontWeight.semibold,
+                      letterSpacing: tokens.typography.letterSpacing.tight,
+                      color: tokens.colors.text.primary
+                    },
+                    children: appName
+                  }
+                ),
+                appVersion && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: tokens.typography.fontSize.xs,
+                      fontWeight: tokens.typography.fontWeight.normal,
+                      color: tokens.colors.text.tertiary
+                    },
+                    children: [
+                      "v",
+                      appVersion
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flex: "0 0 auto"
+            },
+            children: [
+              centerSlot,
+              children
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: tokens.spacing.lg,
+              flex: "1 1 0"
+            },
+            children: [
+              rightSlot,
+              username && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: tokens.spacing.sm,
+                    paddingLeft: tokens.spacing.lg,
+                    borderLeft: `1px solid ${tokens.colors.border.muted}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          width: 28,
+                          height: 28,
+                          borderRadius: tokens.borderRadius.full,
+                          backgroundColor: `${tokens.colors.accent.primary}20`,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          fontSize: tokens.typography.fontSize.sm,
+                          fontWeight: tokens.typography.fontWeight.semibold,
+                          color: safeAccentText(tokens.colors.accent.primary)
+                        },
+                        children: username.charAt(0).toUpperCase()
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { style: {
+                      fontSize: tokens.typography.fontSize.sm,
+                      fontWeight: tokens.typography.fontWeight.medium,
+                      color: tokens.colors.text.primary
+                    }, children: username })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  GlobalStatusBar
+};
+//# sourceMappingURL=GlobalStatusBar.js.map

package/dist/react/astro/GlobalStatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalStatusBar.js","sources":["../../../src/react/astro/GlobalStatusBar.tsx"],"sourcesContent":["/**\n * @zendir/ui - GlobalStatusBar Component (Pure React)\n * \n * Primary header component for space applications following Astro UX patterns.\n * \n * Features:\n * - Theme-integrated via useTheme()\n * - App identity (name, domain, version)\n * - Clock slot\n * - Monitoring icons slot\n * - Username display\n * - Responsive design\n */\n\nimport React, { memo, ReactNode } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, safeAccentText } from '../utils';\n\nexport interface GlobalStatusBarProps {\n  /** Application name */\n  appName?: string;\n  /** Application domain (organization/mission) */\n  appDomain?: string;\n  /** Application version */\n  appVersion?: string;\n  /** Username to display */\n  username?: string;\n  /** Left slot content (app switcher, etc.) */\n  leftSlot?: ReactNode;\n  /** Center slot content (typically clock) */\n  centerSlot?: ReactNode;\n  /** Right slot content (monitoring icons, controls) */\n  rightSlot?: ReactNode;\n  /** Additional children */\n  children?: ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\n/**\n * GlobalStatusBar - Pure React global status bar\n * \n * Primary header component for space applications. Includes slots for:\n * - App switcher (left)\n * - Global clock (center)\n * - Monitoring icons (right)\n * \n * @example\n * ```tsx\n * <GlobalStatusBar\n *   appName=\"Mission Control\"\n *   appDomain=\"Zendir\"\n *   username=\"Demo User\"\n *   centerSlot={<MissionClock />}\n *   rightSlot={<MonitoringIcons />}\n * />\n * ```\n */\nexport const GlobalStatusBar = memo(function GlobalStatusBar({\n  appName = 'Zendir',\n  appDomain,\n  appVersion,\n  username,\n  leftSlot,\n  centerSlot,\n  rightSlot,\n  children,\n  className = '',\n}: GlobalStatusBarProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  return (\n    <header\n      className={classNames('zendir-global-status-bar', className)}\n      role=\"banner\"\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        height: 56,\n        padding: `0 ${tokens.spacing.lg}`,\n        backgroundColor: isTransparentTheme ? 'transparent' : tokens.colors.background.surface,\n        ...(isTransparentTheme && { backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' as const }),\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        color: tokens.colors.text.primary,\n        fontFamily: tokens.typography.fontFamily.primary,\n      }}\n    >\n      {/* Left section: App identity */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: tokens.spacing.lg,\n          flex: '1 1 0',\n        }}\n      >\n        {leftSlot}\n        \n        <div style={{ display: 'flex', alignItems: 'baseline', gap: tokens.spacing.sm }}>\n          {appDomain && (\n            <span\n              style={{\n                fontSize: tokens.typography.fontSize.sm,\n                fontWeight: tokens.typography.fontWeight.normal,\n                color: tokens.colors.text.tertiary,\n                textTransform: 'uppercase',\n                letterSpacing: tokens.typography.letterSpacing.wide,\n              }}\n            >\n              {appDomain}\n            </span>\n          )}\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.xl,\n              fontWeight: tokens.typography.fontWeight.semibold,\n              letterSpacing: tokens.typography.letterSpacing.tight,\n              color: tokens.colors.text.primary,\n            }}\n          >\n            {appName}\n          </span>\n          {appVersion && (\n            <span\n              style={{\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.normal,\n                color: tokens.colors.text.tertiary,\n              }}\n            >\n              v{appVersion}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Center section: Clock */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flex: '0 0 auto',\n        }}\n      >\n        {centerSlot}\n        {children}\n      </div>\n\n      {/* Right section: Monitoring + User */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'flex-end',\n          gap: tokens.spacing.lg,\n          flex: '1 1 0',\n        }}\n      >\n        {rightSlot}\n        \n        {username && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: tokens.spacing.sm,\n              paddingLeft: tokens.spacing.lg,\n              borderLeft: `1px solid ${tokens.colors.border.muted}`,\n            }}\n          >\n            {/* User avatar */}\n            <div\n              style={{\n                width: 28,\n                height: 28,\n                borderRadius: tokens.borderRadius.full,\n                backgroundColor: `${tokens.colors.accent.primary}20`,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                fontSize: tokens.typography.fontSize.sm,\n                fontWeight: tokens.typography.fontWeight.semibold,\n                color: safeAccentText(tokens.colors.accent.primary),\n              }}\n            >\n              {username.charAt(0).toUpperCase()}\n            </div>\n            <span style={{ \n              fontSize: tokens.typography.fontSize.sm, \n              fontWeight: tokens.typography.fontWeight.medium,\n              color: tokens.colors.text.primary,\n            }}>\n              {username}\n            </span>\n          </div>\n        )}\n      </div>\n    </header>\n  );\n});\n"],"names":["GlobalStatusBar"],"mappings":"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"}

package/dist/react/astro/MissionClock.d.ts

@@ -0,0 +1,169 @@
+import { default as React } from 'react';
+
+export type ClockFormat = '12h' | '24h' | 'iso' | 'met';
+export type DateFormat = 'iso' | 'julian' | 'gregorian' | 'none';
+export type TimeSource = 'realtime' | 'simulation' | 'custom';
+/**
+ * Timer configuration for AOS/LOS countdown/up timers
+ */
+export interface TimerConfig {
+    /** Timer label (e.g., "AOS", "LOS", "MET") */
+    label: string;
+    /** Target timestamp (for countdown) or start timestamp (for countup) */
+    timestamp: Date;
+    /** Timer direction: 'countdown' counts to target, 'countup' counts from start */
+    direction: 'countdown' | 'countup';
+    /** Optional status color */
+    status?: 'normal' | 'caution' | 'critical' | 'standby';
+    /** Show days in timer format */
+    showDays?: boolean;
+}
+/**
+ * Simulation time configuration
+ */
+export interface SimulationTimeConfig {
+    /** Simulation epoch (t=0) as Date or ISO string */
+    epoch: Date | string;
+    /** Current simulation time offset in seconds from epoch */
+    elapsedSeconds?: number;
+    /** Time scale factor (1 = realtime, 2 = 2x speed, etc.) */
+    timeScale?: number;
+    /** Whether simulation is running */
+    isRunning?: boolean;
+    /** Callback to get current simulation time */
+    getCurrentTime?: () => Date;
+}
+export interface MissionClockProps {
+    /** Clock format */
+    format?: ClockFormat;
+    /** Timezone label to display */
+    timezone?: string;
+    /** Hide seconds */
+    hideSeconds?: boolean;
+    /** Small size variant */
+    small?: boolean;
+    /** Show date */
+    showDate?: boolean;
+    /** Date format (iso, julian, gregorian) */
+    dateFormat?: DateFormat;
+    /** Custom className */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** AOS timer - countdown/up to Acquisition of Signal */
+    aosTimer?: TimerConfig | Date;
+    /** LOS timer - countdown/up to Loss of Signal */
+    losTimer?: TimerConfig | Date;
+    /** Additional custom timers */
+    customTimers?: TimerConfig[];
+    /** Time source: realtime, simulation, or custom */
+    timeSource?: TimeSource;
+    /** Simulation time configuration (for timeSource='simulation') */
+    simulationConfig?: SimulationTimeConfig;
+    /** Custom time provider (for timeSource='custom') */
+    customTime?: Date | (() => Date);
+    /** Mission start time for MET display */
+    missionStart?: Date | string;
+    /** Show MET (Mission Elapsed Time) instead of wall clock */
+    showMET?: boolean;
+    /** Update interval in milliseconds (default: 1000) */
+    updateInterval?: number;
+    /** Compact mode - single line display */
+    compact?: boolean;
+    /** Show milliseconds */
+    showMilliseconds?: boolean;
+}
+/**
+ * MissionClock - Advanced mission time display for space operations
+ *
+ * Supports real-time clock, simulation time, MET (Mission Elapsed Time),
+ * and AOS/LOS timers following Astro UX Design System patterns.
+ *
+ * @example
+ * ```tsx
+ * // Basic clock
+ * <MissionClock format="24h" timezone="UTC" />
+ *
+ * // With AOS/LOS timers
+ * <MissionClock
+ *   format="24h"
+ *   aosTimer={{ label: 'AOS', timestamp: new Date('2024-03-15T10:30:00Z'), direction: 'countdown' }}
+ *   losTimer={{ label: 'LOS', timestamp: new Date('2024-03-15T10:45:00Z'), direction: 'countdown' }}
+ * />
+ *
+ * // Simulation time
+ * <MissionClock
+ *   timeSource="simulation"
+ *   simulationConfig={{
+ *     epoch: new Date('2026-01-01T00:00:00Z'),
+ *     elapsedSeconds: 3600,
+ *     timeScale: 1,
+ *   }}
+ * />
+ *
+ * // Mission Elapsed Time
+ * <MissionClock
+ *   showMET
+ *   missionStart={new Date('2026-01-01T00:00:00Z')}
+ * />
+ *
+ * // Julian day format
+ * <MissionClock showDate dateFormat="julian" />
+ * ```
+ */
+export declare const MissionClock: React.NamedExoticComponent<MissionClockProps>;
+/**
+ * SimpleTimer - Standalone countdown/up timer
+ */
+export interface SimpleTimerProps {
+    /** Timer label */
+    label: string;
+    /** Target/start timestamp */
+    timestamp: Date;
+    /** Timer direction */
+    direction?: 'countdown' | 'countup';
+    /** Status color */
+    status?: 'normal' | 'caution' | 'critical' | 'standby';
+    /** Show days */
+    showDays?: boolean;
+    /** Custom className */
+    className?: string;
+}
+export declare const SimpleTimer: React.NamedExoticComponent<SimpleTimerProps>;
+/**
+ * MissionElapsedTime - Dedicated MET display
+ */
+export interface MissionElapsedTimeProps {
+    /** Mission launch/start time */
+    launchTime: Date | string;
+    /** Show milliseconds */
+    showMilliseconds?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Small variant */
+    small?: boolean;
+}
+export declare const MissionElapsedTime: React.NamedExoticComponent<MissionElapsedTimeProps>;
+/**
+ * SimulationClock - Clock driven by simulation time
+ */
+export interface SimulationClockProps {
+    /** Simulation epoch */
+    epoch: Date | string;
+    /** Elapsed seconds from epoch */
+    elapsedSeconds?: number;
+    /** Time scale factor */
+    timeScale?: number;
+    /** Whether simulation is running */
+    isRunning?: boolean;
+    /** Show date */
+    showDate?: boolean;
+    /** Date format */
+    dateFormat?: DateFormat;
+    /** Custom className */
+    className?: string;
+    /** Small variant */
+    small?: boolean;
+}
+export declare const SimulationClock: React.NamedExoticComponent<SimulationClockProps>;
+export default MissionClock;