@zendir/ui 0.1.0

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

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+import { StatusLevel } from '../utils';
+
+export interface ProgressProps {
+    /** Current value (0-max) */
+    value?: number;
+    /** Maximum value (default: 100) */
+    max?: number;
+    /** Hide the percentage label */
+    hideLabel?: boolean;
+    /** Show value as label instead of percentage */
+    showValue?: boolean;
+    /** Status-based coloring (overrides default) */
+    status?: StatusLevel;
+    /** Indeterminate mode (animated, no value) */
+    indeterminate?: boolean;
+    /** Height of the progress bar */
+    height?: number;
+    /** Custom label */
+    label?: string;
+    /** Show Astro UX status shape icon beneath the bar at the fill position (default: true) */
+    showStatusIcon?: boolean;
+    /** Custom className */
+    className?: string;
+}
+/**
+ * Progress - Pure React progress bar component
+ *
+ * Displays progress with visual bar and optional label.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={85} />
+ * <Progress value={42} max={50} hideLabel />
+ * <Progress indeterminate label="Loading..." />
+ * <Progress value={25} status="caution" />
+ * ```
+ */
+export declare const Progress: React.NamedExoticComponent<ProgressProps>;

package/dist/react/astro/Progress.js

@@ -0,0 +1,149 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { formatPercentage, classNames } from "../utils/index.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+function ProgressStatusShape({
+  status,
+  color,
+  size = 10
+}) {
+  const glow = `${color}50`;
+  switch (status) {
+    case "caution":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "10", height: "10", fill: color }) });
+    case "serious":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("polygon", { points: "6,1 11,6 6,11 1,6", fill: color }) });
+    case "critical":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("polygon", { points: "6,11 1,2 11,2", fill: color }) });
+    case "standby":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3.5", fill: "none", stroke: color, strokeWidth: "2" }) });
+    case "off":
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "3", fill: color }) });
+    case "normal":
+    default:
+      return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", width: size, height: size, style: { filter: `drop-shadow(0 0 3px ${glow})` }, children: /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "5", fill: color }) });
+  }
+}
+const Progress = memo(function Progress2({
+  value,
+  max = 100,
+  hideLabel = false,
+  showValue = false,
+  status,
+  indeterminate = false,
+  height = 8,
+  label,
+  showStatusIcon = true,
+  className = ""
+}) {
+  const { tokens } = useTheme();
+  const percentage = value !== void 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+  const effectiveStatus = status ?? (percentage >= 75 ? "normal" : percentage >= 50 ? "standby" : percentage >= 25 ? "caution" : percentage > 0 ? "serious" : "off");
+  const color = tokens.colors.status[effectiveStatus];
+  const displayLabel = label ?? (showValue && value !== void 0 ? `${value}/${max}` : formatPercentage(percentage, false, 0));
+  const iconSize = Math.max(10, height + 2);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-progress", className),
+      role: "progressbar",
+      "aria-valuenow": indeterminate ? void 0 : value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-label": label ?? `Progress: ${percentage.toFixed(0)}%`,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacing.xs,
+        width: "100%"
+      },
+      children: [
+        !hideLabel && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              fontSize: tokens.typography.fontSize.sm,
+              fontWeight: tokens.typography.fontWeight.medium,
+              color: tokens.colors.text.secondary
+            },
+            children: [
+              label && /* @__PURE__ */ jsx("span", { style: { color: tokens.colors.text.secondary }, children: label }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    marginLeft: "auto",
+                    fontVariantNumeric: "tabular-nums",
+                    color: tokens.colors.text.primary
+                  },
+                  children: !indeterminate && displayLabel
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "relative",
+                width: "100%",
+                height,
+                backgroundColor: tokens.colors.border.muted,
+                borderRadius: height / 2,
+                overflow: "hidden"
+              },
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    height: "100%",
+                    width: indeterminate ? "30%" : `${percentage}%`,
+                    backgroundColor: color,
+                    borderRadius: height / 2,
+                    transition: indeterminate ? "none" : "width 300ms ease-out",
+                    animation: indeterminate ? "progressIndeterminate 1.5s ease-in-out infinite" : "none",
+                    boxShadow: `0 0 ${height}px ${color}40`
+                  }
+                }
+              )
+            }
+          ),
+          showStatusIcon && !indeterminate && /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: height + 4,
+                left: `${percentage}%`,
+                transform: "translateX(-50%)",
+                lineHeight: 0,
+                transition: "left 300ms ease-out"
+              },
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx(ProgressStatusShape, { status: effectiveStatus, color, size: iconSize })
+            }
+          )
+        ] }),
+        showStatusIcon && !indeterminate && /* @__PURE__ */ jsx("div", { style: { height: iconSize + 2 } }),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes progressIndeterminate {
+          0% { left: -30%; }
+          100% { left: 100%; }
+        }
+      ` })
+      ]
+    }
+  );
+});
+export {
+  Progress
+};
+//# sourceMappingURL=Progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../src/react/astro/Progress.tsx"],"sourcesContent":["/**\n * @zendir/ui - Progress Component (Pure React)\n * \n * Progress bar following Astro UX Design System patterns.\n * \n * Features:\n * - Theme-integrated via useTheme()\n * - Determinate and indeterminate modes\n * - Optional label and value display\n * - Status-based coloring\n * - Smooth animations\n * - Accessible (progress role with aria attributes)\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, type StatusLevel, formatPercentage } from '../utils';\n\n/** Astro UX status shape per official spec: filled circle (normal), ring (standby), small circle (off), square (caution), diamond (serious), triangle (critical) */\nfunction ProgressStatusShape({\n  status,\n  color,\n  size = 10,\n}: {\n  status: StatusLevel;\n  color: string;\n  size?: number;\n}): React.ReactElement {\n  const glow = `${color}50`;\n\n  switch (status) {\n    case 'caution':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: `drop-shadow(0 0 3px ${glow})` }}>\n          <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} />\n        </svg>\n      );\n    case 'serious':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: `drop-shadow(0 0 3px ${glow})` }}>\n          <polygon points=\"6,1 11,6 6,11 1,6\" fill={color} />\n        </svg>\n      );\n    case 'critical':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: `drop-shadow(0 0 3px ${glow})` }}>\n          <polygon points=\"6,11 1,2 11,2\" fill={color} />\n        </svg>\n      );\n    case 'standby':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: `drop-shadow(0 0 3px ${glow})` }}>\n          <circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />\n        </svg>\n      );\n    case 'off':\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: `drop-shadow(0 0 3px ${glow})` }}>\n          <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\n        </svg>\n      );\n    case 'normal':\n    default:\n      return (\n        <svg viewBox=\"0 0 12 12\" width={size} height={size} style={{ filter: `drop-shadow(0 0 3px ${glow})` }}>\n          <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\n        </svg>\n      );\n  }\n}\n\nexport interface ProgressProps {\n  /** Current value (0-max) */\n  value?: number;\n  /** Maximum value (default: 100) */\n  max?: number;\n  /** Hide the percentage label */\n  hideLabel?: boolean;\n  /** Show value as label instead of percentage */\n  showValue?: boolean;\n  /** Status-based coloring (overrides default) */\n  status?: StatusLevel;\n  /** Indeterminate mode (animated, no value) */\n  indeterminate?: boolean;\n  /** Height of the progress bar */\n  height?: number;\n  /** Custom label */\n  label?: string;\n  /** Show Astro UX status shape icon beneath the bar at the fill position (default: true) */\n  showStatusIcon?: boolean;\n  /** Custom className */\n  className?: string;\n}\n\n/**\n * Progress - Pure React progress bar component\n * \n * Displays progress with visual bar and optional label.\n * \n * @example\n * ```tsx\n * <Progress value={85} />\n * <Progress value={42} max={50} hideLabel />\n * <Progress indeterminate label=\"Loading...\" />\n * <Progress value={25} status=\"caution\" />\n * ```\n */\nexport const Progress = memo(function Progress({\n  value,\n  max = 100,\n  hideLabel = false,\n  showValue = false,\n  status,\n  indeterminate = false,\n  height = 8,\n  label,\n  showStatusIcon = true,\n  className = '',\n}: ProgressProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const percentage = value !== undefined ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;\n  \n  // Auto-determine status based on value if not provided\n  const effectiveStatus: StatusLevel = status ?? (\n    percentage >= 75 ? 'normal' :\n    percentage >= 50 ? 'standby' :\n    percentage >= 25 ? 'caution' :\n    percentage > 0 ? 'serious' : 'off'\n  );\n  \n  // Get color from theme\n  const color = tokens.colors.status[effectiveStatus];\n  \n  const displayLabel = label ?? (\n    showValue && value !== undefined\n      ? `${value}/${max}`\n      : formatPercentage(percentage, false, 0)\n  );\n\n  const iconSize = Math.max(10, height + 2);\n\n  return (\n    <div\n      className={classNames('zendir-progress', className)}\n      role=\"progressbar\"\n      aria-valuenow={indeterminate ? undefined : value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      aria-label={label ?? `Progress: ${percentage.toFixed(0)}%`}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacing.xs,\n        width: '100%',\n      }}\n    >\n      {/* Label row */}\n      {!hideLabel && (\n        <div\n          style={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            fontSize: tokens.typography.fontSize.sm,\n            fontWeight: tokens.typography.fontWeight.medium,\n            color: tokens.colors.text.secondary,\n          }}\n        >\n          {label && <span style={{ color: tokens.colors.text.secondary }}>{label}</span>}\n          <span\n            style={{\n              marginLeft: 'auto',\n              fontVariantNumeric: 'tabular-nums',\n              color: tokens.colors.text.primary,\n            }}\n          >\n            {!indeterminate && displayLabel}\n          </span>\n        </div>\n      )}\n\n      {/* Progress track (relative wrapper for icon positioning) */}\n      <div style={{ position: 'relative', width: '100%' }}>\n        <div\n          style={{\n            position: 'relative',\n            width: '100%',\n            height,\n            backgroundColor: tokens.colors.border.muted,\n            borderRadius: height / 2,\n            overflow: 'hidden',\n          }}\n        >\n          {/* Progress fill */}\n          <div\n            style={{\n              position: 'absolute',\n              top: 0,\n              left: 0,\n              height: '100%',\n              width: indeterminate ? '30%' : `${percentage}%`,\n              backgroundColor: color,\n              borderRadius: height / 2,\n              transition: indeterminate ? 'none' : 'width 300ms ease-out',\n              animation: indeterminate ? 'progressIndeterminate 1.5s ease-in-out infinite' : 'none',\n              boxShadow: `0 0 ${height}px ${color}40`,\n            }}\n          />\n        </div>\n\n        {/* Status shape icon positioned beneath the fill edge */}\n        {showStatusIcon && !indeterminate && (\n          <div\n            style={{\n              position: 'absolute',\n              top: height + 4,\n              left: `${percentage}%`,\n              transform: 'translateX(-50%)',\n              lineHeight: 0,\n              transition: 'left 300ms ease-out',\n            }}\n            aria-hidden=\"true\"\n          >\n            <ProgressStatusShape status={effectiveStatus} color={color} size={iconSize} />\n          </div>\n        )}\n      </div>\n\n      {/* Reserve space for the icon so it doesn't overlap content below */}\n      {showStatusIcon && !indeterminate && (\n        <div style={{ height: iconSize + 2 }} />\n      )}\n\n      {/* Keyframe animation for indeterminate */}\n      <style>{`\n        @keyframes progressIndeterminate {\n          0% { left: -30%; }\n          100% { left: 100%; }\n        }\n      `}</style>\n    </div>\n  );\n});\n"],"names":["Progress"],"mappings":"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"}

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

@@ -0,0 +1,136 @@
+import { default as React } from 'react';
+
+export type SimulationState = 'stopped' | 'playing' | 'paused';
+export interface SimulationControlsProps {
+    /** Current simulation state */
+    state?: SimulationState;
+    /** Whether simulation is playing (alternative to state) */
+    isPlaying?: boolean;
+    /** Whether simulation is paused (used with isPlaying for 3-state) */
+    isPaused?: boolean;
+    /** Called when play is triggered */
+    onPlay?: () => void;
+    /** Called when pause is triggered */
+    onPause?: () => void;
+    /** Called when stop (reset) is triggered */
+    onStop?: () => void;
+    /** Called when step forward is triggered */
+    onStepForward?: () => void;
+    /** Called when step backward is triggered */
+    onStepBackward?: () => void;
+    /** Current simulation time */
+    currentTime?: Date | string;
+    /** Simulation epoch (t=0) */
+    epoch?: Date | string;
+    /** Current elapsed seconds from epoch */
+    elapsedSeconds?: number;
+    /** Show elapsed time display */
+    showElapsedTime?: boolean;
+    /** Show current time display */
+    showCurrentTime?: boolean;
+    /** Show date in time display */
+    showDate?: boolean;
+    /** Current time scale factor (1 = realtime) */
+    timeScale?: number;
+    /** Callback when time scale changes */
+    onTimeScaleChange?: (scale: number) => void;
+    /** Available time scale presets */
+    timeScalePresets?: number[];
+    /** Show time scale controls */
+    showTimeScale?: boolean;
+    /** Step size in seconds */
+    stepSize?: number;
+    /** Callback when step size changes */
+    onStepSizeChange?: (size: number) => void;
+    /** Available step size presets in seconds */
+    stepSizePresets?: number[];
+    /** Show step controls */
+    showStepControls?: boolean;
+    /** Compact display mode */
+    compact?: boolean;
+    /** Small size variant */
+    small?: boolean;
+    /** Custom className */
+    className?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show simulation status indicator */
+    showStatus?: boolean;
+    /** Custom label for simulation mode */
+    label?: string;
+}
+/**
+ * SimulationControls - Playback controls for space simulation
+ *
+ * Provides comprehensive simulation time control following Astro UX patterns.
+ * Designed for mission control and space operations applications.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SimulationControls
+ *   isPlaying={isPlaying}
+ *   onPlay={() => setIsPlaying(true)}
+ *   onPause={() => setIsPlaying(false)}
+ *   onStop={handleReset}
+ * />
+ *
+ * // Full featured
+ * <SimulationControls
+ *   isPlaying={isPlaying}
+ *   onPlay={handlePlay}
+ *   onPause={handlePause}
+ *   onStop={handleStop}
+ *   onStepForward={handleStepForward}
+ *   onStepBackward={handleStepBackward}
+ *   currentTime={simulationTime}
+ *   epoch={epoch}
+ *   elapsedSeconds={elapsed}
+ *   timeScale={timeScale}
+ *   onTimeScaleChange={setTimeScale}
+ *   showTimeScale
+ *   showStepControls
+ *   showElapsedTime
+ * />
+ *
+ * // In AppBar center slot
+ * <AppBar
+ *   appName="Mission Control"
+ *   centerSlot={
+ *     <SimulationControls
+ *       compact
+ *       isPlaying={isPlaying}
+ *       onPlay={handlePlay}
+ *       onPause={handlePause}
+ *       currentTime={simTime}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+export declare const SimulationControls: React.NamedExoticComponent<SimulationControlsProps>;
+/**
+ * MiniSimulationControls - Ultra-compact controls for AppBar
+ */
+export interface MiniSimulationControlsProps {
+    isPlaying?: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onStop?: () => void;
+    timeScale?: number;
+    onTimeScaleChange?: (scale: number) => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const MiniSimulationControls: React.NamedExoticComponent<MiniSimulationControlsProps>;
+/**
+ * SimulationControlsWithClock - Controls combined with MissionClock
+ */
+export interface SimulationControlsWithClockProps extends Omit<SimulationControlsProps, 'showCurrentTime' | 'showElapsedTime'> {
+    /** Clock format */
+    clockFormat?: '12h' | '24h';
+    /** Timezone label */
+    timezone?: string;
+}
+export declare const SimulationControlsWithClock: React.NamedExoticComponent<SimulationControlsWithClockProps>;
+export default SimulationControls;