@zendir/ui 0.5.0 → 0.6.1

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

@@ -1 +1 @@
-{"version":3,"file":"Notification.js","sources":["../../../src/react/astro/Notification.tsx"],"sourcesContent":["/**\n * @zendir/ui - Notification Component (Pure React)\n * \n * Toast notification following Astro UX Design System patterns.\n * \n * Features:\n * - Theme-integrated via useTheme()\n * - Status-based styling (standby, normal, caution, critical)\n * - Auto-dismiss support\n * - Close button\n * - Entrance/exit animations\n * - Accessible (live region for screen readers)\n */\n\nimport React, { memo, useEffect, useState, useCallback, useRef } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames } from '../utils';\n\nexport type NotificationStatus = 'standby' | 'normal' | 'caution' | 'serious' | 'critical';\n\nexport interface NotificationProps {\n  /** Notification message */\n  message: string;\n  /** Status/severity of the notification */\n  status?: NotificationStatus;\n  /** Whether the notification is open/visible */\n  open?: boolean;\n  /** Auto-close after this many milliseconds */\n  closeAfter?: number;\n  /** Show close button */\n  closeable?: boolean;\n  /** Callback when notification is closed */\n  onClose?: () => void;\n  /** Custom className */\n  className?: string;\n  /** Child content (alternative to message prop) */\n  children?: React.ReactNode;\n}\n\n/**\n * AstroUXDS Status Symbol Icons with Dual-Coding\n * \n * Each status has a unique shape for accessibility:\n * - standby: Ring (info)\n * - normal: Circle (checkmark)\n * - caution: Square (warning)\n * - serious: Diamond (warning)\n * - critical: Triangle (error)\n */\nconst STATUS_ICONS: Record<NotificationStatus, React.ReactNode> = {\n  // Standby - Blue ring with info symbol\n  standby: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" opacity=\"0.2\" />\n      <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" />\n      <path d=\"M11 11h2v6h-2v-6zm0-4h2v2h-2V7z\" />\n    </svg>\n  ),\n  // Normal - Green Circle with checkmark\n  normal: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      <path d=\"M9 12.5l2 2 4-4\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  ),\n  // Caution - Yellow Square with warning\n  caution: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" />\n      <path d=\"M11 7h2v6h-2V7zm0 8h2v2h-2v-2z\" fill=\"#000\" />\n    </svg>\n  ),\n  // Serious - Orange Diamond with warning\n  serious: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <path d=\"M12 2l10 10-10 10L2 12z\" />\n      <path d=\"M11 8h2v6h-2V8zm0 8h2v2h-2v-2z\" fill=\"#000\" />\n    </svg>\n  ),\n  // Critical - Red Triangle with exclamation\n  critical: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\n      <path d=\"M12 2L2 20h20L12 2z\" />\n      <path d=\"M11 9h2v6h-2V9zm0 8h2v2h-2v-2z\" fill=\"#fff\" />\n    </svg>\n  ),\n};\n\n/**\n * Notification - Pure React toast notification\n * \n * Displays alerts with status-based coloring and optional auto-dismiss.\n * \n * @example\n * ```tsx\n * <Notification \n *   message=\"Telemetry received\" \n *   status=\"normal\" \n *   open={true}\n * />\n * <Notification \n *   message=\"Link quality degraded\" \n *   status=\"caution\" \n *   closeAfter={5000}\n *   onClose={() => {}}\n * />\n * ```\n */\nexport const Notification = memo(function Notification({\n  message,\n  status = 'standby',\n  open = true,\n  closeAfter,\n  closeable = true,\n  onClose,\n  className = '',\n  children,\n}: NotificationProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [isVisible, setIsVisible] = useState(open);\n  const [isExiting, setIsExiting] = useState(false);\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\n  const color = tokens.colors.status[status] || tokens.colors.status.standby;\n\n  // Cleanup on unmount\n  useEffect(() => {\n    return () => { clearTimeout(closeTimeoutRef.current); };\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setIsExiting(true);\n    closeTimeoutRef.current = setTimeout(() => {\n      setIsVisible(false);\n      onClose?.();\n    }, 200);\n  }, [onClose]);\n\n  useEffect(() => {\n    setIsVisible(open);\n    setIsExiting(false);\n  }, [open]);\n\n  useEffect(() => {\n    if (closeAfter && isVisible) {\n      const timer = setTimeout(handleClose, closeAfter);\n      return () => clearTimeout(timer);\n    }\n  }, [closeAfter, isVisible, handleClose]);\n\n  if (!isVisible) return null;\n\n  return (\n    <div\n      className={classNames('zendir-notification', className)}\n      role=\"alert\"\n      aria-live=\"polite\"\n      style={{\n        display: 'flex',\n        alignItems: 'flex-start',\n        gap: tokens.spacing.md,\n        padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\n        backgroundColor: isTransparentTheme ? 'transparent' : tokens.colors.background.surface,\n        ...(isTransparentTheme && { backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' as const }),\n        borderLeft: `4px solid ${color}`,\n        borderRadius: tokens.borderRadius.md,\n        boxShadow: tokens.shadows.lg,\n        maxWidth: 400,\n        animation: isExiting\n          ? 'notificationExit 200ms ease-out forwards'\n          : 'notificationEnter 200ms ease-out',\n      }}\n    >\n      {/* Status icon */}\n      <span style={{ color, flexShrink: 0, marginTop: 2 }}>\n        {STATUS_ICONS[status]}\n      </span>\n\n      {/* Content */}\n      <div style={{ \n        flex: 1, \n        fontSize: tokens.typography.fontSize.base, \n        lineHeight: tokens.typography.lineHeight.normal,\n        color: tokens.colors.text.primary,\n      }}>\n        {children ?? message}\n      </div>\n\n      {/* Close button */}\n      {closeable && (\n        <button\n          onClick={handleClose}\n          aria-label=\"Close notification\"\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            width: 24,\n            height: 24,\n            padding: 0,\n            background: 'transparent',\n            border: 'none',\n            borderRadius: tokens.borderRadius.sm,\n            color: tokens.colors.text.secondary,\n            cursor: 'pointer',\n            transition: tokens.animation.fast,\n            flexShrink: 0,\n          }}\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"16\" height=\"16\">\n            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n          </svg>\n        </button>\n      )}\n\n      {/* Animations — respects prefers-reduced-motion (WCAG 2.3.3) */}\n      <style>{`\n        @keyframes notificationEnter {\n          from {\n            opacity: 0;\n            transform: translateX(20px);\n          }\n          to {\n            opacity: 1;\n            transform: translateX(0);\n          }\n        }\n        @keyframes notificationExit {\n          from {\n            opacity: 1;\n            transform: translateX(0);\n          }\n          to {\n            opacity: 0;\n            transform: translateX(20px);\n          }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .zendir-notification {\n            animation: none !important;\n          }\n        }\n      `}</style>\n    </div>\n  );\n});\n"],"names":["Notification"],"mappings":"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"}
+{"version":3,"file":"Notification.js","names":[],"sources":["../../../src/react/astro/Notification.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Notification Component (Pure React)\r\n *\r\n * Toast notification following Astro UX Design System patterns.\r\n *\r\n * Features:\r\n * - Theme-integrated via useTheme()\r\n * - Status-based styling (standby, normal, caution, critical)\r\n * - Auto-dismiss support\r\n * - Close button\r\n * - Entrance/exit animations\r\n * - Accessible (live region for screen readers)\r\n */\r\n\r\nimport React, { memo, useEffect, useState, useCallback, useRef } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport { classNames } from \"../utils\";\r\n\r\nexport type NotificationStatus =\r\n  | \"standby\"\r\n  | \"normal\"\r\n  | \"caution\"\r\n  | \"serious\"\r\n  | \"critical\";\r\n\r\nexport interface NotificationProps {\r\n  /** Notification message */\r\n  message: string;\r\n  /** Status/severity of the notification */\r\n  status?: NotificationStatus;\r\n  /** Whether the notification is open/visible */\r\n  open?: boolean;\r\n  /** Auto-close after this many milliseconds */\r\n  closeAfter?: number;\r\n  /** Show close button */\r\n  closeable?: boolean;\r\n  /** Callback when notification is closed */\r\n  onClose?: () => void;\r\n  /** Custom className */\r\n  className?: string;\r\n  /** Child content (alternative to message prop) */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * AstroUXDS Status Symbol Icons with Dual-Coding\r\n *\r\n * Each status has a unique shape for accessibility:\r\n * - standby: Ring (info)\r\n * - normal: Circle (checkmark)\r\n * - caution: Square (warning)\r\n * - serious: Diamond (warning)\r\n * - critical: Triangle (error)\r\n */\r\nconst STATUS_ICONS: Record<NotificationStatus, React.ReactNode> = {\r\n  // Standby - Blue ring with info symbol\r\n  standby: (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" opacity=\"0.2\" />\r\n      <circle\r\n        cx=\"12\"\r\n        cy=\"12\"\r\n        r=\"10\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n      />\r\n      <path d=\"M11 11h2v6h-2v-6zm0-4h2v2h-2V7z\" />\r\n    </svg>\r\n  ),\r\n  // Normal - Green Circle with checkmark\r\n  normal: (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\r\n      <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n      <path\r\n        d=\"M9 12.5l2 2 4-4\"\r\n        fill=\"none\"\r\n        stroke=\"#fff\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      />\r\n    </svg>\r\n  ),\r\n  // Caution - Yellow Square with warning\r\n  caution: (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\r\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" />\r\n      <path d=\"M11 7h2v6h-2V7zm0 8h2v2h-2v-2z\" fill=\"#000\" />\r\n    </svg>\r\n  ),\r\n  // Serious - Orange Diamond with warning\r\n  serious: (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\r\n      <path d=\"M12 2l10 10-10 10L2 12z\" />\r\n      <path d=\"M11 8h2v6h-2V8zm0 8h2v2h-2v-2z\" fill=\"#000\" />\r\n    </svg>\r\n  ),\r\n  // Critical - Red Triangle with exclamation\r\n  critical: (\r\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"20\" height=\"20\">\r\n      <path d=\"M12 2L2 20h20L12 2z\" />\r\n      <path d=\"M11 9h2v6h-2V9zm0 8h2v2h-2v-2z\" fill=\"#fff\" />\r\n    </svg>\r\n  ),\r\n};\r\n\r\n/**\r\n * Notification - Pure React toast notification\r\n *\r\n * Displays alerts with status-based coloring and optional auto-dismiss.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Notification\r\n *   message=\"Telemetry received\"\r\n *   status=\"normal\"\r\n *   open={true}\r\n * />\r\n * <Notification\r\n *   message=\"Link quality degraded\"\r\n *   status=\"caution\"\r\n *   closeAfter={5000}\r\n *   onClose={() => {}}\r\n * />\r\n * ```\r\n */\r\nexport const Notification = memo(function Notification({\r\n  message,\r\n  status = \"standby\",\r\n  open = true,\r\n  closeAfter,\r\n  closeable = true,\r\n  onClose,\r\n  className = \"\",\r\n  children,\r\n}: NotificationProps): React.ReactElement | null {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme =\r\n    theme === \"transparent\" ||\r\n    theme === \"transparent-bold\" ||\r\n    theme === \"transparent-minimal\";\r\n  const [isVisible, setIsVisible] = useState(open);\r\n  const [isExiting, setIsExiting] = useState(false);\r\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout>>();\r\n  const color = tokens.colors.status[status] || tokens.colors.status.standby;\r\n\r\n  // Cleanup on unmount\r\n  useEffect(() => {\r\n    return () => {\r\n      clearTimeout(closeTimeoutRef.current);\r\n    };\r\n  }, []);\r\n\r\n  const handleClose = useCallback(() => {\r\n    setIsExiting(true);\r\n    closeTimeoutRef.current = setTimeout(() => {\r\n      setIsVisible(false);\r\n      onClose?.();\r\n    }, 200);\r\n  }, [onClose]);\r\n\r\n  useEffect(() => {\r\n    setIsVisible(open);\r\n    setIsExiting(false);\r\n  }, [open]);\r\n\r\n  useEffect(() => {\r\n    if (closeAfter && isVisible) {\r\n      const timer = setTimeout(handleClose, closeAfter);\r\n      return () => clearTimeout(timer);\r\n    }\r\n  }, [closeAfter, isVisible, handleClose]);\r\n\r\n  if (!isVisible) return null;\r\n\r\n  return (\r\n    <div\r\n      className={classNames(\"zendir-notification\", className)}\r\n      role=\"alert\"\r\n      aria-live=\"polite\"\r\n      style={{\r\n        display: \"flex\",\r\n        alignItems: \"flex-start\",\r\n        gap: tokens.spacing.md,\r\n        padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\r\n        backgroundColor: isTransparentTheme\r\n          ? \"transparent\"\r\n          : tokens.colors.background.surface,\r\n        ...(isTransparentTheme && {\r\n          backdropFilter: \"blur(12px)\",\r\n          WebkitBackdropFilter: \"blur(12px)\" as const,\r\n        }),\r\n        borderLeft: `4px solid ${color}`,\r\n        borderRadius: tokens.borderRadius.md,\r\n        boxShadow: tokens.shadows.lg,\r\n        maxWidth: 400,\r\n        animation: isExiting\r\n          ? \"notificationExit 200ms ease-out forwards\"\r\n          : \"notificationEnter 200ms ease-out\",\r\n      }}\r\n    >\r\n      {/* Status icon */}\r\n      <span style={{ color, flexShrink: 0, marginTop: 2 }}>\r\n        {STATUS_ICONS[status]}\r\n      </span>\r\n\r\n      {/* Content */}\r\n      <div\r\n        style={{\r\n          flex: 1,\r\n          fontSize: tokens.typography.fontSize.base,\r\n          lineHeight: tokens.typography.lineHeight.normal,\r\n          color: tokens.colors.text.primary,\r\n        }}\r\n      >\r\n        {children ?? message}\r\n      </div>\r\n\r\n      {/* Close button */}\r\n      {closeable && (\r\n        <button\r\n          onClick={handleClose}\r\n          aria-label=\"Close notification\"\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            width: 24,\r\n            height: 24,\r\n            padding: 0,\r\n            background: \"transparent\",\r\n            border: \"none\",\r\n            borderRadius: tokens.borderRadius.sm,\r\n            color: tokens.colors.text.secondary,\r\n            cursor: \"pointer\",\r\n            transition: tokens.animation.fast,\r\n            flexShrink: 0,\r\n          }}\r\n        >\r\n          <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" width=\"16\" height=\"16\">\r\n            <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\r\n          </svg>\r\n        </button>\r\n      )}\r\n\r\n      {/* Animations — respects prefers-reduced-motion (WCAG 2.3.3) */}\r\n      <style>{`\r\n        @keyframes notificationEnter {\r\n          from {\r\n            opacity: 0;\r\n            transform: translateX(20px);\r\n          }\r\n          to {\r\n            opacity: 1;\r\n            transform: translateX(0);\r\n          }\r\n        }\r\n        @keyframes notificationExit {\r\n          from {\r\n            opacity: 1;\r\n            transform: translateX(0);\r\n          }\r\n          to {\r\n            opacity: 0;\r\n            transform: translateX(20px);\r\n          }\r\n        }\r\n        @media (prefers-reduced-motion: reduce) {\r\n          .zendir-notification {\r\n            animation: none !important;\r\n          }\r\n        }\r\n      `}</style>\r\n    </div>\r\n  );\r\n});\r\n"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { StatusLevel } from '../utils';
-
 export interface ProgressProps {
     /** Current value (0-max) */
     value?: number;

package/dist/react/astro/Progress.js

@@ -1,149 +1,207 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
-import { formatPercentage, classNames } from "../utils/index.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 }) });
-  }
+import { classNames, formatPercentage } from "../utils/index.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/astro/Progress.tsx
+/**
+* @zendir/ui - Progress Component (Pure React)
+*
+* Progress bar following Astro UX Design System patterns.
+*
+* Features:
+* - Theme-integrated via useTheme()
+* - Determinate and indeterminate modes
+* - Optional label and value display
+* - Status-based coloring
+* - Smooth animations
+* - Accessible (progress role with aria attributes)
+*/
+/** Astro UX status shape per official spec: filled circle (normal), ring (standby), small circle (off), square (caution), diamond (serious), triangle (critical) */
+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
+			})
+		});
+		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: `
+/**
+* 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" />
+* ```
+*/
+var Progress = memo(function Progress({ 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
+//#endregion
+export { Progress };
+
+//# sourceMappingURL=Progress.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"Progress.js","names":[],"sources":["../../../src/react/astro/Progress.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Progress Component (Pure React)\r\n *\r\n * Progress bar following Astro UX Design System patterns.\r\n *\r\n * Features:\r\n * - Theme-integrated via useTheme()\r\n * - Determinate and indeterminate modes\r\n * - Optional label and value display\r\n * - Status-based coloring\r\n * - Smooth animations\r\n * - Accessible (progress role with aria attributes)\r\n */\r\n\r\nimport React, { memo } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport { classNames, type StatusLevel, formatPercentage } from \"../utils\";\r\n\r\n/** Astro UX status shape per official spec: filled circle (normal), ring (standby), small circle (off), square (caution), diamond (serious), triangle (critical) */\r\nfunction ProgressStatusShape({\r\n  status,\r\n  color,\r\n  size = 10,\r\n}: {\r\n  status: StatusLevel;\r\n  color: string;\r\n  size?: number;\r\n}): React.ReactElement {\r\n  const glow = `${color}50`;\r\n\r\n  switch (status) {\r\n    case \"caution\":\r\n      return (\r\n        <svg\r\n          viewBox=\"0 0 12 12\"\r\n          width={size}\r\n          height={size}\r\n          style={{ filter: `drop-shadow(0 0 3px ${glow})` }}\r\n        >\r\n          <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} />\r\n        </svg>\r\n      );\r\n    case \"serious\":\r\n      return (\r\n        <svg\r\n          viewBox=\"0 0 12 12\"\r\n          width={size}\r\n          height={size}\r\n          style={{ filter: `drop-shadow(0 0 3px ${glow})` }}\r\n        >\r\n          <polygon points=\"6,1 11,6 6,11 1,6\" fill={color} />\r\n        </svg>\r\n      );\r\n    case \"critical\":\r\n      return (\r\n        <svg\r\n          viewBox=\"0 0 12 12\"\r\n          width={size}\r\n          height={size}\r\n          style={{ filter: `drop-shadow(0 0 3px ${glow})` }}\r\n        >\r\n          <polygon points=\"6,11 1,2 11,2\" fill={color} />\r\n        </svg>\r\n      );\r\n    case \"standby\":\r\n      return (\r\n        <svg\r\n          viewBox=\"0 0 12 12\"\r\n          width={size}\r\n          height={size}\r\n          style={{ filter: `drop-shadow(0 0 3px ${glow})` }}\r\n        >\r\n          <circle\r\n            cx=\"6\"\r\n            cy=\"6\"\r\n            r=\"3.5\"\r\n            fill=\"none\"\r\n            stroke={color}\r\n            strokeWidth=\"2\"\r\n          />\r\n        </svg>\r\n      );\r\n    case \"off\":\r\n      return (\r\n        <svg\r\n          viewBox=\"0 0 12 12\"\r\n          width={size}\r\n          height={size}\r\n          style={{ filter: `drop-shadow(0 0 3px ${glow})` }}\r\n        >\r\n          <circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} />\r\n        </svg>\r\n      );\r\n    case \"normal\":\r\n    default:\r\n      return (\r\n        <svg\r\n          viewBox=\"0 0 12 12\"\r\n          width={size}\r\n          height={size}\r\n          style={{ filter: `drop-shadow(0 0 3px ${glow})` }}\r\n        >\r\n          <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\r\n        </svg>\r\n      );\r\n  }\r\n}\r\n\r\nexport interface ProgressProps {\r\n  /** Current value (0-max) */\r\n  value?: number;\r\n  /** Maximum value (default: 100) */\r\n  max?: number;\r\n  /** Hide the percentage label */\r\n  hideLabel?: boolean;\r\n  /** Show value as label instead of percentage */\r\n  showValue?: boolean;\r\n  /** Status-based coloring (overrides default) */\r\n  status?: StatusLevel;\r\n  /** Indeterminate mode (animated, no value) */\r\n  indeterminate?: boolean;\r\n  /** Height of the progress bar */\r\n  height?: number;\r\n  /** Custom label */\r\n  label?: string;\r\n  /** Show Astro UX status shape icon beneath the bar at the fill position (default: true) */\r\n  showStatusIcon?: boolean;\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Progress - Pure React progress bar component\r\n *\r\n * Displays progress with visual bar and optional label.\r\n *\r\n * @example\r\n * ```tsx\r\n * <Progress value={85} />\r\n * <Progress value={42} max={50} hideLabel />\r\n * <Progress indeterminate label=\"Loading...\" />\r\n * <Progress value={25} status=\"caution\" />\r\n * ```\r\n */\r\nexport const Progress = memo(function Progress({\r\n  value,\r\n  max = 100,\r\n  hideLabel = false,\r\n  showValue = false,\r\n  status,\r\n  indeterminate = false,\r\n  height = 8,\r\n  label,\r\n  showStatusIcon = true,\r\n  className = \"\",\r\n}: ProgressProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const percentage =\r\n    value !== undefined ? Math.min(100, Math.max(0, (value / max) * 100)) : 0;\r\n\r\n  // Auto-determine status based on value if not provided\r\n  const effectiveStatus: StatusLevel =\r\n    status ??\r\n    (percentage >= 75\r\n      ? \"normal\"\r\n      : percentage >= 50\r\n        ? \"standby\"\r\n        : percentage >= 25\r\n          ? \"caution\"\r\n          : percentage > 0\r\n            ? \"serious\"\r\n            : \"off\");\r\n\r\n  // Get color from theme\r\n  const color = tokens.colors.status[effectiveStatus];\r\n\r\n  const displayLabel =\r\n    label ??\r\n    (showValue && value !== undefined\r\n      ? `${value}/${max}`\r\n      : formatPercentage(percentage, false, 0));\r\n\r\n  const iconSize = Math.max(10, height + 2);\r\n\r\n  return (\r\n    <div\r\n      className={classNames(\"zendir-progress\", className)}\r\n      role=\"progressbar\"\r\n      aria-valuenow={indeterminate ? undefined : value}\r\n      aria-valuemin={0}\r\n      aria-valuemax={max}\r\n      aria-label={label ?? `Progress: ${percentage.toFixed(0)}%`}\r\n      style={{\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: tokens.spacing.xs,\r\n        width: \"100%\",\r\n      }}\r\n    >\r\n      {/* Label row */}\r\n      {!hideLabel && (\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            justifyContent: \"space-between\",\r\n            alignItems: \"center\",\r\n            fontSize: tokens.typography.fontSize.sm,\r\n            fontWeight: tokens.typography.fontWeight.medium,\r\n            color: tokens.colors.text.secondary,\r\n          }}\r\n        >\r\n          {label && (\r\n            <span style={{ color: tokens.colors.text.secondary }}>{label}</span>\r\n          )}\r\n          <span\r\n            style={{\r\n              marginLeft: \"auto\",\r\n              fontVariantNumeric: \"tabular-nums\",\r\n              color: tokens.colors.text.primary,\r\n            }}\r\n          >\r\n            {!indeterminate && displayLabel}\r\n          </span>\r\n        </div>\r\n      )}\r\n\r\n      {/* Progress track (relative wrapper for icon positioning) */}\r\n      <div style={{ position: \"relative\", width: \"100%\" }}>\r\n        <div\r\n          style={{\r\n            position: \"relative\",\r\n            width: \"100%\",\r\n            height,\r\n            backgroundColor: tokens.colors.border.muted,\r\n            borderRadius: height / 2,\r\n            overflow: \"hidden\",\r\n          }}\r\n        >\r\n          {/* Progress fill */}\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              top: 0,\r\n              left: 0,\r\n              height: \"100%\",\r\n              width: indeterminate ? \"30%\" : `${percentage}%`,\r\n              backgroundColor: color,\r\n              borderRadius: height / 2,\r\n              transition: indeterminate ? \"none\" : \"width 300ms ease-out\",\r\n              animation: indeterminate\r\n                ? \"progressIndeterminate 1.5s ease-in-out infinite\"\r\n                : \"none\",\r\n              boxShadow: `0 0 ${height}px ${color}40`,\r\n            }}\r\n          />\r\n        </div>\r\n\r\n        {/* Status shape icon positioned beneath the fill edge */}\r\n        {showStatusIcon && !indeterminate && (\r\n          <div\r\n            style={{\r\n              position: \"absolute\",\r\n              top: height + 4,\r\n              left: `${percentage}%`,\r\n              transform: \"translateX(-50%)\",\r\n              lineHeight: 0,\r\n              transition: \"left 300ms ease-out\",\r\n            }}\r\n            aria-hidden=\"true\"\r\n          >\r\n            <ProgressStatusShape\r\n              status={effectiveStatus}\r\n              color={color}\r\n              size={iconSize}\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {/* Reserve space for the icon so it doesn't overlap content below */}\r\n      {showStatusIcon && !indeterminate && (\r\n        <div style={{ height: iconSize + 2 }} />\r\n      )}\r\n\r\n      {/* Keyframe animation for indeterminate */}\r\n      <style>{`\r\n        @keyframes progressIndeterminate {\r\n          0% { left: -30%; }\r\n          100% { left: 100%; }\r\n        }\r\n      `}</style>\r\n    </div>\r\n  );\r\n});\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,SAAS,oBAAoB,EAC3B,QACA,OACA,OAAO,MAKc;CACrB,MAAM,OAAO,GAAG,MAAM;CAEtB,QAAQ,QAAR;EACE,KAAK,WACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EAAE,QAAQ,uBAAuB,KAAK,GAAG;aAEhD,oBAAC,QAAD;IAAM,GAAE;IAAI,GAAE;IAAI,OAAM;IAAK,QAAO;IAAK,MAAM;GAAQ,CAAA;EACpD,CAAA;EAET,KAAK,WACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EAAE,QAAQ,uBAAuB,KAAK,GAAG;aAEhD,oBAAC,WAAD;IAAS,QAAO;IAAoB,MAAM;GAAQ,CAAA;EAC/C,CAAA;EAET,KAAK,YACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EAAE,QAAQ,uBAAuB,KAAK,GAAG;aAEhD,oBAAC,WAAD;IAAS,QAAO;IAAgB,MAAM;GAAQ,CAAA;EAC3C,CAAA;EAET,KAAK,WACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EAAE,QAAQ,uBAAuB,KAAK,GAAG;aAEhD,oBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAQ;IACR,aAAY;GACb,CAAA;EACE,CAAA;EAET,KAAK,OACH,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EAAE,QAAQ,uBAAuB,KAAK,GAAG;aAEhD,oBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAI,MAAM;GAAQ,CAAA;EACvC,CAAA;EAGT,SACE,OACE,oBAAC,OAAD;GACE,SAAQ;GACR,OAAO;GACP,QAAQ;GACR,OAAO,EAAE,QAAQ,uBAAuB,KAAK,GAAG;aAEhD,oBAAC,UAAD;IAAQ,IAAG;IAAI,IAAG;IAAI,GAAE;IAAI,MAAM;GAAQ,CAAA;EACvC,CAAA;CAEX;AACF;;;;;;;;;;;;;;AAsCA,IAAa,WAAW,KAAK,SAAS,SAAS,EAC7C,OACA,MAAM,KACN,YAAY,OACZ,YAAY,OACZ,QACA,gBAAgB,OAChB,SAAS,GACT,OACA,iBAAiB,MACjB,YAAY,MACwB;CACpC,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,aACJ,UAAU,KAAA,IAAY,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC,IAAI;CAG1E,MAAM,kBACJ,WACC,cAAc,KACX,WACA,cAAc,KACZ,YACA,cAAc,KACZ,YACA,aAAa,IACX,YACA;CAGZ,MAAM,QAAQ,OAAO,OAAO,OAAO;CAEnC,MAAM,eACJ,UACC,aAAa,UAAU,KAAA,IACpB,GAAG,MAAM,GAAG,QACZ,iBAAiB,YAAY,OAAO,CAAC;CAE3C,MAAM,WAAW,KAAK,IAAI,IAAI,SAAS,CAAC;CAExC,OACE,qBAAC,OAAD;EACE,WAAW,WAAW,mBAAmB,SAAS;EAClD,MAAK;EACL,iBAAe,gBAAgB,KAAA,IAAY;EAC3C,iBAAe;EACf,iBAAe;EACf,cAAY,SAAS,aAAa,WAAW,QAAQ,CAAC,EAAE;EACxD,OAAO;GACL,SAAS;GACT,eAAe;GACf,KAAK,OAAO,QAAQ;GACpB,OAAO;EACT;YAZF;GAeG,CAAC,aACA,qBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,gBAAgB;KAChB,YAAY;KACZ,UAAU,OAAO,WAAW,SAAS;KACrC,YAAY,OAAO,WAAW,WAAW;KACzC,OAAO,OAAO,OAAO,KAAK;IAC5B;cARF,CAUG,SACC,oBAAC,QAAD;KAAM,OAAO,EAAE,OAAO,OAAO,OAAO,KAAK,UAAU;eAAI;IAAY,CAAA,GAErE,oBAAC,QAAD;KACE,OAAO;MACL,YAAY;MACZ,oBAAoB;MACpB,OAAO,OAAO,OAAO,KAAK;KAC5B;eAEC,CAAC,iBAAiB;IACf,CAAA,CACH;;GAIP,qBAAC,OAAD;IAAK,OAAO;KAAE,UAAU;KAAY,OAAO;IAAO;cAAlD,CACE,oBAAC,OAAD;KACE,OAAO;MACL,UAAU;MACV,OAAO;MACP;MACA,iBAAiB,OAAO,OAAO,OAAO;MACtC,cAAc,SAAS;MACvB,UAAU;KACZ;eAGA,oBAAC,OAAD,EACE,OAAO;MACL,UAAU;MACV,KAAK;MACL,MAAM;MACN,QAAQ;MACR,OAAO,gBAAgB,QAAQ,GAAG,WAAW;MAC7C,iBAAiB;MACjB,cAAc,SAAS;MACvB,YAAY,gBAAgB,SAAS;MACrC,WAAW,gBACP,oDACA;MACJ,WAAW,OAAO,OAAO,KAAK,MAAM;KACtC,EACD,CAAA;IACE,CAAA,GAGJ,kBAAkB,CAAC,iBAClB,oBAAC,OAAD;KACE,OAAO;MACL,UAAU;MACV,KAAK,SAAS;MACd,MAAM,GAAG,WAAW;MACpB,WAAW;MACX,YAAY;MACZ,YAAY;KACd;KACA,eAAY;eAEZ,oBAAC,qBAAD;MACE,QAAQ;MACD;MACP,MAAM;KACP,CAAA;IACE,CAAA,CAEJ;;GAGJ,kBAAkB,CAAC,iBAClB,oBAAC,OAAD,EAAK,OAAO,EAAE,QAAQ,WAAW,EAAE,EAAI,CAAA;GAIzC,oBAAC,SAAD,EAAA,UAAQ;;;;;QAKC,CAAA;EACN;;AAET,CAAC"}

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

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type SimulationState = 'stopped' | 'playing' | 'paused';
+export type SimulationState = "stopped" | "playing" | "paused";
 export interface SimulationControlsProps {
     /** Current simulation state */
     state?: SimulationState;
@@ -126,9 +125,9 @@ export declare const MiniSimulationControls: React.NamedExoticComponent<MiniSimu
 /**
  * SimulationControlsWithClock - Controls combined with MissionClock
  */
-export interface SimulationControlsWithClockProps extends Omit<SimulationControlsProps, 'showCurrentTime' | 'showElapsedTime'> {
+export interface SimulationControlsWithClockProps extends Omit<SimulationControlsProps, "showCurrentTime" | "showElapsedTime"> {
     /** Clock format */
-    clockFormat?: '12h' | '24h';
+    clockFormat?: "12h" | "24h";
     /** Timezone label */
     timezone?: string;
 }