@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/display/AstroIcon.js

@@ -1,442 +1,352 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { memo, useState, useRef, useEffect } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { isValidIconName, Icon } from "./Icon.js";
-const SIZE_MAP = {
-  "extra-small": 16,
-  "small": 24,
-  "normal": 32,
-  "large": 48
+import { Icon, isValidIconName } from "./Icon.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/display/AstroIcon.tsx
+/**
+* @zendir/ui - AstroIcon Component
+*
+* Wrapper around official @astrouxds/react RuxIcon component.
+* Provides all 400+ official Astro UXD icons with consistent API.
+*
+* SECURITY: Uses dynamic import with proper error handling.
+* FLEXIBILITY: Works with or without @astrouxds/react installed.
+*
+* @see https://www.astrouxds.com/components/icon-library/
+*
+* @example
+* ```tsx
+* import { AstroIcon } from '@zendir/ui/react';
+*
+* <AstroIcon name="satellite" />
+* <AstroIcon name="antenna" size="large" />
+* <AstroIcon name="thermal" color="#ff0000" />
+* ```
+*/
+var SIZE_MAP = {
+	"extra-small": 16,
+	small: 24,
+	normal: 32,
+	large: 48
 };
-const ICON_ALIASES = {
-  // === Orbit & Trajectory ===
-  "orbit": "360",
-  // Orbital path
-  "trajectory": "360",
-  // Flight path
-  "orbital": "360",
-  // Orbital mechanics
-  // === Ground Operations ===
-  "ground-station": "antenna",
-  // Ground station
-  "ground-control": "antenna",
-  // Mission control
-  "dish": "antenna",
-  // Antenna dish
-  "tracking-station": "antenna",
-  // Tracking facility
-  // === Communication ===
-  "uplink": "antenna-transmit",
-  // Command upload
-  "downlink": "antenna-receive",
-  // Data download
-  "command": "antenna-transmit",
-  // Send command
-  "telemetry": "antenna-receive",
-  // Receive telemetry
-  "comms": "netcom",
-  // Communications
-  "rf": "antenna",
-  // Radio frequency
-  "link": "netcom",
-  // Communication link
-  "signal": "antenna-transmit",
-  // Signal transmission
-  "data-link": "netcom",
-  // Data link
-  // === Satellite States ===
-  "satellite": "satellite-transmit",
-  // Default satellite (active)
-  "spacecraft": "satellite-transmit",
-  // Spacecraft
-  "vehicle": "satellite-transmit",
-  // Space vehicle
-  "sat": "satellite-transmit",
-  // Abbreviation
-  "sc": "satellite-transmit",
-  // Spacecraft abbreviation
-  // === Power Systems ===
-  "power": "propulsion-power",
-  // Power system
-  "battery": "battery-full",
-  // Battery status
-  "energy": "propulsion-power",
-  // Energy management
-  "solar-array": "solar",
-  // Solar arrays
-  "solar-panel": "solar",
-  // Solar panels
-  "photovoltaic": "solar",
-  // PV system
-  // === Propulsion ===
-  "thruster": "propulsion-power",
-  // Thruster
-  "engine": "propulsion-power",
-  // Engine
-  "burn": "propulsion-power",
-  // Burn/maneuver
-  "maneuver": "propulsion-power",
-  // Orbital maneuver
-  "delta-v": "propulsion-power",
-  // Delta-V
-  "rcs": "propulsion-power",
-  // Reaction control system
-  // === Thermal ===
-  "temperature": "thermal",
-  // Temperature
-  "heat": "thermal",
-  // Heat management
-  "cooling": "thermal",
-  // Cooling system
-  "heater": "thermal",
-  // Heater
-  // === Attitude & Control ===
-  "attitude": "explore",
-  // Attitude control
-  "pointing": "explore",
-  // Pointing direction
-  "orientation": "explore",
-  // Spacecraft orientation
-  "adcs": "explore",
-  // Attitude determination & control
-  "gyro": "explore",
-  // Gyroscope
-  "gyroscope": "explore",
-  // Gyroscope
-  // === Navigation ===
-  "gps": "gps-fixed",
-  // GPS/GNSS
-  "gnss": "gps-fixed",
-  // Global navigation
-  "position": "gps-fixed",
-  // Position
-  "location": "place",
-  // Location
-  "ephemeris": "timeline",
-  // Ephemeris data
-  // === Status & Health ===
-  "health": "favorite",
-  // System health
-  "status": "info",
-  // Status indicator
-  "nominal": "check-circle",
-  // Nominal/OK
-  "anomaly": "error",
-  // Anomaly detected
-  "fault": "error",
-  // Fault condition
-  "safe-mode": "warning",
-  // Safe mode
-  "emergency": "warning",
-  // Emergency
-  "critical": "error",
-  // Critical status
-  "caution": "warning",
-  // Caution
-  // === Time & Scheduling ===
-  "pass": "schedule",
-  // Satellite pass
-  "contact": "schedule",
-  // Ground contact
-  "access": "schedule",
-  // Access window
-  "window": "schedule",
-  // Time window
-  "aos": "schedule",
-  // Acquisition of signal
-  "los": "schedule",
-  // Loss of signal
-  "eclipse": "brightness-3",
-  // Eclipse period
-  "sunlight": "wb-sunny",
-  // In sunlight
-  "shadow": "brightness-3",
-  // In shadow
-  // === Subsystems ===
-  "subsystem": "developer-board",
-  // Generic subsystem
-  "computer": "memory",
-  // Onboard computer
-  "obc": "memory",
-  // Onboard computer
-  "cdh": "memory",
-  // Command & data handling
-  "flight-computer": "memory",
-  // Flight computer
-  "sensor": "settings-input-component",
-  // Sensor
-  "instrument": "settings-input-component",
-  // Instrument
-  // === Launch & Deployment ===
-  "launch": "flight-takeoff",
-  // Launch
-  "rocket": "flight-takeoff",
-  // Rocket
-  "liftoff": "flight-takeoff",
-  // Liftoff
-  "deployment": "open-in-new",
-  // Deployment
-  "deploy": "open-in-new",
-  // Deploy
-  "separation": "call-split",
-  // Stage separation
-  // === Operations ===
-  "ops": "build",
-  // Operations
-  "operations": "build",
-  // Operations
-  "control": "tune",
-  // Control
-  "automation": "autorenew",
-  // Automation
-  "sequence": "playlist-play",
-  // Command sequence
-  "procedure": "list",
-  // Procedure
-  // === Data & Storage ===
-  "storage": "sd-storage",
-  // Data storage
-  "memory": "memory",
-  // Memory
-  "recorder": "fiber-dvr",
-  // Data recorder
-  "playback": "play-arrow",
-  // Playback
-  "record": "fiber-manual-record",
-  // Recording
-  // === Monitoring ===
-  "monitor": "desktop-mac",
-  // Monitoring
-  "dashboard": "dashboard",
-  // Dashboard
-  "console": "desktop-windows",
-  // Console
-  "display": "tv",
-  // Display
-  // === Crew (if applicable) ===
-  "astronaut": "person",
-  // Astronaut
-  "crew": "group",
-  // Crew
-  "eva": "directions-walk"
-  // Extra-vehicular activity
+/**
+* Space Operations Icon Aliases
+* Maps common space terminology to existing Astro icons.
+* Provides better developer experience with intuitive naming.
+*/
+var ICON_ALIASES = {
+	orbit: "360",
+	trajectory: "360",
+	orbital: "360",
+	"ground-station": "antenna",
+	"ground-control": "antenna",
+	dish: "antenna",
+	"tracking-station": "antenna",
+	uplink: "antenna-transmit",
+	downlink: "antenna-receive",
+	command: "antenna-transmit",
+	telemetry: "antenna-receive",
+	comms: "netcom",
+	rf: "antenna",
+	link: "netcom",
+	signal: "antenna-transmit",
+	"data-link": "netcom",
+	satellite: "satellite-transmit",
+	spacecraft: "satellite-transmit",
+	vehicle: "satellite-transmit",
+	sat: "satellite-transmit",
+	sc: "satellite-transmit",
+	power: "propulsion-power",
+	battery: "battery-full",
+	energy: "propulsion-power",
+	"solar-array": "solar",
+	"solar-panel": "solar",
+	photovoltaic: "solar",
+	thruster: "propulsion-power",
+	engine: "propulsion-power",
+	burn: "propulsion-power",
+	maneuver: "propulsion-power",
+	"delta-v": "propulsion-power",
+	rcs: "propulsion-power",
+	temperature: "thermal",
+	heat: "thermal",
+	cooling: "thermal",
+	heater: "thermal",
+	attitude: "explore",
+	pointing: "explore",
+	orientation: "explore",
+	adcs: "explore",
+	gyro: "explore",
+	gyroscope: "explore",
+	gps: "gps-fixed",
+	gnss: "gps-fixed",
+	position: "gps-fixed",
+	location: "place",
+	ephemeris: "timeline",
+	health: "favorite",
+	status: "info",
+	nominal: "check-circle",
+	anomaly: "error",
+	fault: "error",
+	"safe-mode": "warning",
+	emergency: "warning",
+	critical: "error",
+	caution: "warning",
+	pass: "schedule",
+	contact: "schedule",
+	access: "schedule",
+	window: "schedule",
+	aos: "schedule",
+	los: "schedule",
+	eclipse: "brightness-3",
+	sunlight: "wb-sunny",
+	shadow: "brightness-3",
+	subsystem: "developer-board",
+	computer: "memory",
+	obc: "memory",
+	cdh: "memory",
+	"flight-computer": "memory",
+	sensor: "settings-input-component",
+	instrument: "settings-input-component",
+	launch: "flight-takeoff",
+	rocket: "flight-takeoff",
+	liftoff: "flight-takeoff",
+	deployment: "open-in-new",
+	deploy: "open-in-new",
+	separation: "call-split",
+	ops: "build",
+	operations: "build",
+	control: "tune",
+	automation: "autorenew",
+	sequence: "playlist-play",
+	procedure: "list",
+	storage: "sd-storage",
+	memory: "memory",
+	recorder: "fiber-dvr",
+	playback: "play-arrow",
+	record: "fiber-manual-record",
+	monitor: "desktop-mac",
+	dashboard: "dashboard",
+	console: "desktop-windows",
+	display: "tv",
+	astronaut: "person",
+	crew: "group",
+	eva: "directions-walk"
 };
+/**
+* Resolve icon alias to actual Astro icon name
+*/
 function resolveIconAlias(name) {
-  return ICON_ALIASES[name] || name;
+	return ICON_ALIASES[name] || name;
 }
-let loadState = "pending";
-let RuxIconComponent = null;
-const subscribers = /* @__PURE__ */ new Set();
+var loadState = "pending";
+var RuxIconComponent = null;
+var subscribers = /* @__PURE__ */ new Set();
 function subscribe(callback) {
-  subscribers.add(callback);
-  return () => subscribers.delete(callback);
+	subscribers.add(callback);
+	return () => subscribers.delete(callback);
 }
 function notifySubscribers() {
-  subscribers.forEach((cb) => cb());
+	subscribers.forEach((cb) => cb());
 }
+/**
+* Safely load RuxIcon from @astrouxds/react
+* Returns null if not available
+*/
 async function loadRuxIcon() {
-  if (loadState === "loaded") {
-    return RuxIconComponent;
-  }
-  if (loadState === "failed") {
-    return null;
-  }
-  if (loadState === "loading") {
-    return new Promise((resolve) => {
-      const unsub = subscribe(() => {
-        unsub();
-        resolve(RuxIconComponent);
-      });
-    });
-  }
-  loadState = "loading";
-  try {
-    const astroModule = await import("@astrouxds/react");
-    RuxIconComponent = astroModule.RuxIcon;
-    loadState = "loaded";
-    notifySubscribers();
-    return RuxIconComponent;
-  } catch (err) {
-    loadState = "failed";
-    notifySubscribers();
-    return null;
-  }
+	if (loadState === "loaded") return RuxIconComponent;
+	if (loadState === "failed") return null;
+	if (loadState === "loading") return new Promise((resolve) => {
+		const unsub = subscribe(() => {
+			unsub();
+			resolve(RuxIconComponent);
+		});
+	});
+	loadState = "loading";
+	try {
+		RuxIconComponent = (await import("@astrouxds/react")).RuxIcon;
+		loadState = "loaded";
+		notifySubscribers();
+		return RuxIconComponent;
+	} catch (err) {
+		loadState = "failed";
+		notifySubscribers();
+		return null;
+	}
 }
-function FallbackIcon({
-  name,
-  size,
-  color,
-  label,
-  className,
-  style,
-  onClick,
-  "data-testid": testId
-}) {
-  const { tokens } = useTheme();
-  const actualSize = typeof size === "number" ? size : SIZE_MAP[size || "normal"];
-  if (isValidIconName(name)) {
-    return /* @__PURE__ */ jsx(
-      Icon,
-      {
-        name,
-        size: actualSize,
-        color,
-        className,
-        "aria-label": label || name,
-        onClick,
-        style
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      role: "img",
-      "aria-label": label || name,
-      className,
-      "data-testid": testId,
-      onClick,
-      tabIndex: onClick ? 0 : void 0,
-      onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: actualSize,
-        height: actualSize,
-        fontSize: actualSize * 0.4,
-        fontFamily: tokens.typography.fontFamily.mono,
-        fontWeight: 700,
-        color: color || tokens.colors.status.off,
-        backgroundColor: tokens.colors.background.surface,
-        border: `1px solid ${tokens.colors.border.default}`,
-        borderRadius: 4,
-        cursor: onClick ? "pointer" : "default",
-        userSelect: "none",
-        ...style
-      },
-      title: `Icon: ${name} (install @astrouxds/react for official icons)`,
-      children: /* @__PURE__ */ jsxs(
-        "svg",
-        {
-          width: actualSize * 0.6,
-          height: actualSize * 0.6,
-          viewBox: "0 0 24 24",
-          fill: "currentColor",
-          children: [
-            /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }),
-            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" })
-          ]
-        }
-      )
-    }
-  );
+/**
+* Fallback icon component when @astrouxds/react is not installed.
+* Uses built-in Icon SVGs when the name matches, otherwise shows a generic placeholder.
+*/
+function FallbackIcon({ name, size, color, label, className, style, onClick, "data-testid": testId }) {
+	const { tokens } = useTheme();
+	const actualSize = typeof size === "number" ? size : SIZE_MAP[size || "normal"];
+	if (isValidIconName(name)) return /* @__PURE__ */ jsx(Icon, {
+		name,
+		size: actualSize,
+		color,
+		className,
+		"aria-label": label || name,
+		onClick,
+		style
+	});
+	return /* @__PURE__ */ jsx("span", {
+		role: "img",
+		"aria-label": label || name,
+		className,
+		"data-testid": testId,
+		onClick,
+		tabIndex: onClick ? 0 : void 0,
+		onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			width: actualSize,
+			height: actualSize,
+			fontSize: actualSize * .4,
+			fontFamily: tokens.typography.fontFamily.mono,
+			fontWeight: 700,
+			color: color || tokens.colors.status.off,
+			backgroundColor: tokens.colors.background.surface,
+			border: `1px solid ${tokens.colors.border.default}`,
+			borderRadius: 4,
+			cursor: onClick ? "pointer" : "default",
+			userSelect: "none",
+			...style
+		},
+		title: `Icon: ${name} (install @astrouxds/react for official icons)`,
+		children: /* @__PURE__ */ jsxs("svg", {
+			width: actualSize * .6,
+			height: actualSize * .6,
+			viewBox: "0 0 24 24",
+			fill: "currentColor",
+			children: [/* @__PURE__ */ jsx("rect", {
+				x: "3",
+				y: "3",
+				width: "18",
+				height: "18",
+				rx: "2",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}), /* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "2",
+				fill: "currentColor"
+			})]
+		})
+	});
 }
-const AstroIcon = memo(function AstroIcon2(props) {
-  const {
-    name,
-    size = "normal",
-    color,
-    label,
-    className,
-    style,
-    onClick,
-    "data-testid": testId
-  } = props;
-  const [, forceUpdate] = useState(0);
-  const [currentState, setCurrentState] = useState(loadState);
-  const mountedRef = useRef(true);
-  useEffect(() => {
-    mountedRef.current = true;
-    const unsubscribe = subscribe(() => {
-      if (mountedRef.current) {
-        setCurrentState(loadState);
-        forceUpdate((n) => n + 1);
-      }
-    });
-    if (loadState === "pending") {
-      loadRuxIcon();
-    }
-    return () => {
-      mountedRef.current = false;
-      unsubscribe();
-    };
-  }, []);
-  if (currentState === "pending" || currentState === "loading") {
-    const actualSize = typeof size === "number" ? size : SIZE_MAP[size];
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        style: {
-          display: "inline-block",
-          width: actualSize,
-          height: actualSize,
-          ...style
-        },
-        className,
-        "aria-hidden": "true"
-      }
-    );
-  }
-  const resolvedName = resolveIconAlias(name);
-  if (RuxIconComponent) {
-    const RuxIcon = RuxIconComponent;
-    const pixelSize = typeof size === "number" ? size : SIZE_MAP[size];
-    const getClosestAstroSize = (px) => {
-      if (px <= 18) return "extra-small";
-      if (px <= 28) return "small";
-      if (px <= 40) return "normal";
-      return "large";
-    };
-    const astroSize = typeof size === "number" ? getClosestAstroSize(size) : size;
-    const iconColor = color || "var(--color-status-off, #a4abb6)";
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        role: "img",
-        "aria-label": label || name,
-        style: {
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-          width: pixelSize,
-          height: pixelSize,
-          minWidth: pixelSize,
-          minHeight: pixelSize,
-          flexShrink: 0,
-          // Don't use overflow:hidden - it clips the icon SVG
-          ...style
-        },
-        className,
-        children: /* @__PURE__ */ jsx(
-          RuxIcon,
-          {
-            icon: resolvedName,
-            size: astroSize,
-            label: label || name,
-            "data-testid": testId,
-            onClick,
-            style: {
-              // Force the RuxIcon to respect our exact pixel size
-              "--iconDefaultSize": `${pixelSize}px`,
-              "--iconSize": `${pixelSize}px`,
-              "--size": `${pixelSize}px`,
-              color: iconColor,
-              width: `${pixelSize}px`,
-              height: `${pixelSize}px`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              ...onClick && { cursor: "pointer" }
-            }
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(FallbackIcon, { ...props, name: resolvedName });
+/**
+* AstroIcon - Official Astro UXD Icons
+*
+* Displays icons from the official Astro UX Design System.
+* Automatically uses @astrouxds/react if installed, otherwise shows fallback.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <AstroIcon name="satellite" />
+*
+* // With size
+* <AstroIcon name="antenna" size="large" />
+* <AstroIcon name="thermal" size={48} />
+*
+* // With color
+* <AstroIcon name="warning" color="var(--zendir-status-caution)" />
+*
+* // With click handler
+* <AstroIcon name="settings" onClick={() => openSettings()} />
+* ```
+*/
+var AstroIcon = memo(function AstroIcon(props) {
+	const { name, size = "normal", color, label, className, style, onClick, "data-testid": testId } = props;
+	const [, forceUpdate] = useState(0);
+	const [currentState, setCurrentState] = useState(loadState);
+	const mountedRef = useRef(true);
+	useEffect(() => {
+		mountedRef.current = true;
+		const unsubscribe = subscribe(() => {
+			if (mountedRef.current) {
+				setCurrentState(loadState);
+				forceUpdate((n) => n + 1);
+			}
+		});
+		if (loadState === "pending") loadRuxIcon();
+		return () => {
+			mountedRef.current = false;
+			unsubscribe();
+		};
+	}, []);
+	if (currentState === "pending" || currentState === "loading") {
+		const actualSize = typeof size === "number" ? size : SIZE_MAP[size];
+		return /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "inline-block",
+				width: actualSize,
+				height: actualSize,
+				...style
+			},
+			className,
+			"aria-hidden": "true"
+		});
+	}
+	const resolvedName = resolveIconAlias(name);
+	if (RuxIconComponent) {
+		const RuxIcon = RuxIconComponent;
+		const pixelSize = typeof size === "number" ? size : SIZE_MAP[size];
+		const getClosestAstroSize = (px) => {
+			if (px <= 18) return "extra-small";
+			if (px <= 28) return "small";
+			if (px <= 40) return "normal";
+			return "large";
+		};
+		const astroSize = typeof size === "number" ? getClosestAstroSize(size) : size;
+		const iconColor = color || "var(--zendir-status-off, #a4abb6)";
+		return /* @__PURE__ */ jsx("span", {
+			role: "img",
+			"aria-label": label || name,
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: pixelSize,
+				height: pixelSize,
+				minWidth: pixelSize,
+				minHeight: pixelSize,
+				flexShrink: 0,
+				...style
+			},
+			className,
+			children: /* @__PURE__ */ jsx(RuxIcon, {
+				icon: resolvedName,
+				size: astroSize,
+				label: label || name,
+				"data-testid": testId,
+				onClick,
+				style: {
+					"--iconDefaultSize": `${pixelSize}px`,
+					"--iconSize": `${pixelSize}px`,
+					"--size": `${pixelSize}px`,
+					color: iconColor,
+					width: `${pixelSize}px`,
+					height: `${pixelSize}px`,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					...onClick && { cursor: "pointer" }
+				}
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(FallbackIcon, {
+		...props,
+		name: resolvedName
+	});
 });
-export {
-  AstroIcon
-};
-//# sourceMappingURL=AstroIcon.js.map
+//#endregion
+export { AstroIcon, AstroIcon as default };
+
+//# sourceMappingURL=AstroIcon.js.map