@zendir/ui 0.1.0

package/dist/react/core/ConfirmDialog.js

@@ -0,0 +1,315 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo, useRef, useId, useEffect, useState, useCallback, useContext, createContext } from "react";
+import { createPortal } from "react-dom";
+import { useTheme } from "../theme/ThemeProvider.js";
+const ConfirmDialog = memo(function ConfirmDialog2({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  status,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false
+}) {
+  const { tokens, theme } = useTheme();
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const dialogRef = useRef(null);
+  const confirmRef = useRef(null);
+  const previousActiveElement = useRef(null);
+  const titleId = useId();
+  const messageId = useId();
+  const CONFIRM_DIALOG_Z_INDEX = 2147483200;
+  useEffect(() => {
+    if (!open) return;
+    previousActiveElement.current = document.activeElement;
+    document.body.style.overflow = "hidden";
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const root = dialogRef.current;
+      if (!root) return;
+      const focusableElements = root.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      const focusable = Array.from(focusableElements).filter((el) => !el.hasAttribute("disabled"));
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    const focusTimer = window.setTimeout(() => {
+      var _a;
+      (_a = confirmRef.current) == null ? void 0 : _a.focus();
+    }, 0);
+    return () => {
+      var _a;
+      window.clearTimeout(focusTimer);
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+      (_a = previousActiveElement.current) == null ? void 0 : _a.focus();
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  if (typeof document === "undefined") return null;
+  const statusColors = {
+    normal: tokens.colors.status.normal,
+    caution: tokens.colors.status.caution,
+    serious: tokens.colors.status.serious,
+    critical: tokens.colors.status.critical
+  };
+  const accentColor = status ? statusColors[status] : tokens.colors.accent.primary;
+  const confirmBg = destructive ? tokens.colors.status.critical : tokens.colors.accent.primary;
+  const statusIcon = status && (() => {
+    const s = 32;
+    const innerIcon = /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: accentColor, strokeWidth: "2.5", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+    ] });
+    const baseStyle = {
+      width: s,
+      height: s,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    };
+    switch (status) {
+      case "critical":
+        return /* @__PURE__ */ jsx("div", { style: {
+          ...baseStyle,
+          backgroundColor: `${accentColor}20`,
+          border: `2px solid ${accentColor}`,
+          clipPath: "polygon(50% 0%, 0% 100%, 100% 100%)",
+          paddingTop: 8
+        }, children: innerIcon });
+      case "serious":
+        return /* @__PURE__ */ jsx("div", { style: {
+          ...baseStyle,
+          backgroundColor: `${accentColor}20`,
+          border: `2px solid ${accentColor}`,
+          transform: "rotate(45deg)"
+        }, children: /* @__PURE__ */ jsx("div", { style: { transform: "rotate(-45deg)" }, children: innerIcon }) });
+      case "caution":
+        return /* @__PURE__ */ jsx("div", { style: {
+          ...baseStyle,
+          backgroundColor: `${accentColor}20`,
+          border: `2px solid ${accentColor}`,
+          borderRadius: "4px"
+        }, children: innerIcon });
+      default:
+        return /* @__PURE__ */ jsx("div", { style: {
+          ...baseStyle,
+          backgroundColor: `${accentColor}20`,
+          border: `2px solid ${accentColor}`,
+          borderRadius: "50%"
+        }, children: innerIcon });
+    }
+  })();
+  return createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: CONFIRM_DIALOG_Z_INDEX,
+          backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}80` : `${tokens.colors.background.base}B3`,
+          backdropFilter: "blur(6px)",
+          WebkitBackdropFilter: "blur(6px)",
+          animation: `zendir-confirm-backdrop 200ms ${tokens.animation.easing.default}`
+        },
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dialogRef,
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": message ? messageId : void 0,
+        onClick: (e) => e.stopPropagation(),
+        style: {
+          position: "fixed",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          zIndex: CONFIRM_DIALOG_Z_INDEX + 1,
+          width: "100%",
+          maxWidth: "min(440px, calc(100vw - 32px))",
+          backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.9)" : tokens.colors.background.surface,
+          border: `1px solid ${tokens.colors.border.default}`,
+          borderRadius: tokens.borderRadius.lg,
+          boxShadow: tokens.shadows.xl,
+          fontFamily: tokens.typography.fontFamily.primary,
+          animation: `zendir-confirm-enter 250ms ${tokens.animation.easing.default}`,
+          overflow: "hidden",
+          ...isTransparentTheme ? {
+            backdropFilter: "blur(20px)",
+            WebkitBackdropFilter: "blur(20px)"
+          } : {}
+        },
+        children: [
+          status && /* @__PURE__ */ jsx("div", { style: {
+            height: 3,
+            backgroundColor: accentColor,
+            width: "100%"
+          } }),
+          /* @__PURE__ */ jsx("div", { style: { padding: `${tokens.spacing.lg} ${tokens.spacing.lg} ${tokens.spacing.md}` }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: tokens.spacing.md, alignItems: "flex-start" }, children: [
+            statusIcon,
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: titleId,
+                  style: {
+                    fontSize: tokens.typography.fontSize.md,
+                    fontWeight: tokens.typography.fontWeight.semibold,
+                    color: tokens.colors.text.primary,
+                    lineHeight: tokens.typography.lineHeight.tight
+                  },
+                  children: title
+                }
+              ),
+              message && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: messageId,
+                  style: {
+                    fontSize: tokens.typography.fontSize.sm,
+                    color: tokens.colors.text.secondary,
+                    marginTop: tokens.spacing.sm,
+                    lineHeight: tokens.typography.lineHeight.normal
+                  },
+                  children: message
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: tokens.spacing.sm,
+            padding: `${tokens.spacing.md} ${tokens.spacing.lg} ${tokens.spacing.lg}`,
+            borderTop: tokens.borders.divider
+          }, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                style: {
+                  padding: `0 ${tokens.spacing.md}`,
+                  minHeight: tokens.elementSize.lg,
+                  fontSize: tokens.typography.fontSize.sm,
+                  fontWeight: tokens.typography.fontWeight.medium,
+                  fontFamily: tokens.typography.fontFamily.primary,
+                  color: tokens.colors.text.primary,
+                  backgroundColor: tokens.colors.background.base,
+                  border: `1px solid ${tokens.colors.border.muted}`,
+                  borderRadius: tokens.borderRadius.md,
+                  cursor: "pointer",
+                  transition: tokens.animation.fast
+                },
+                children: cancelLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: confirmRef,
+                onClick: () => {
+                  onConfirm();
+                  onClose();
+                },
+                style: {
+                  padding: `0 ${tokens.spacing.md}`,
+                  minHeight: tokens.elementSize.lg,
+                  fontSize: tokens.typography.fontSize.sm,
+                  fontWeight: tokens.typography.fontWeight.semibold,
+                  fontFamily: tokens.typography.fontFamily.primary,
+                  color: tokens.colors.text.inverse || "#fff",
+                  backgroundColor: confirmBg,
+                  border: "none",
+                  borderRadius: tokens.borderRadius.md,
+                  cursor: "pointer",
+                  transition: tokens.animation.fast,
+                  boxShadow: `0 2px 8px ${confirmBg}40`
+                },
+                children: confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes zendir-confirm-backdrop { from { opacity: 0; } to { opacity: 1; } }
+        @keyframes zendir-confirm-enter {
+          from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+          to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+        }
+      ` })
+  ] }), document.body);
+});
+const ConfirmContext = createContext(null);
+function useConfirm() {
+  const ctx = useContext(ConfirmContext);
+  if (!ctx) throw new Error("useConfirm must be used within <ConfirmProvider>");
+  return ctx.requestConfirm;
+}
+const ConfirmProvider = memo(function ConfirmProvider2({
+  children
+}) {
+  const [state, setState] = useState(null);
+  const requestConfirm = useCallback((options) => {
+    return new Promise((resolve) => {
+      setState({ ...options, resolve });
+    });
+  }, []);
+  const handleClose = useCallback(() => {
+    state == null ? void 0 : state.resolve(false);
+    setState(null);
+  }, [state]);
+  const handleConfirm = useCallback(() => {
+    state == null ? void 0 : state.resolve(true);
+    setState(null);
+  }, [state]);
+  return /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value: { requestConfirm }, children: [
+    children,
+    state && /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: true,
+        onClose: handleClose,
+        onConfirm: handleConfirm,
+        title: state.title,
+        message: state.message,
+        status: state.status,
+        confirmLabel: state.confirmLabel,
+        cancelLabel: state.cancelLabel,
+        destructive: state.destructive
+      }
+    )
+  ] });
+});
+export {
+  ConfirmDialog,
+  ConfirmProvider,
+  useConfirm
+};
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/react/core/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../src/react/core/ConfirmDialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Confirmation Dialog\n * \n * Convenience wrapper over Dialog for confirm/cancel actions.\n * Provides both a component API and a `useConfirm()` hook for imperative usage.\n * \n * Astro UX Compliance:\n * - Status-based alert colors\n * - Focus trap, escape to close\n * - Primary button on right (Astro convention)\n * \n * @example\n * ```tsx\n * // Hook API (imperative)\n * const confirm = useConfirm();\n * const ok = await confirm({\n *   title: 'Reset Component',\n *   message: 'This will reboot the spacecraft and suspend commands for 120 seconds.',\n *   status: 'caution',\n *   confirmLabel: 'Reset',\n *   destructive: true,\n * });\n * if (ok) doReset();\n * \n * // Component API (declarative)\n * <ConfirmDialog\n *   open={isOpen}\n *   onClose={() => setOpen(false)}\n *   onConfirm={handleReset}\n *   title=\"Delete All Data?\"\n *   message=\"This cannot be undone.\"\n *   status=\"critical\"\n *   destructive\n * />\n * ```\n */\n\nimport React, { memo, useState, useCallback, useRef, useEffect, useId, createContext, useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../theme';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type ConfirmStatus = 'normal' | 'caution' | 'serious' | 'critical';\n\nexport interface ConfirmOptions {\n  /** Dialog title */\n  title: string;\n  /** Description text (string or React node) */\n  message?: React.ReactNode;\n  /** Status level (determines icon/border color) */\n  status?: ConfirmStatus;\n  /** Confirm button label (default: \"Confirm\") */\n  confirmLabel?: string;\n  /** Cancel button label (default: \"Cancel\") */\n  cancelLabel?: string;\n  /** Destructive action styling (red confirm button) */\n  destructive?: boolean;\n}\n\nexport interface ConfirmDialogProps extends ConfirmOptions {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Confirm handler */\n  onConfirm: () => void;\n}\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const ConfirmDialog = memo(function ConfirmDialog({\n  open,\n  onClose,\n  onConfirm,\n  title,\n  message,\n  status,\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  destructive = false,\n}: ConfirmDialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const confirmRef = useRef<HTMLButtonElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const messageId = useId();\n  const CONFIRM_DIALOG_Z_INDEX = 2147483200;\n\n  useEffect(() => {\n    if (!open) return;\n\n    previousActiveElement.current = document.activeElement as HTMLElement;\n    document.body.style.overflow = 'hidden';\n\n    const handleKeyDown = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n        return;\n      }\n\n      if (e.key !== 'Tab') return;\n      const root = dialogRef.current;\n      if (!root) return;\n\n      const focusableElements = root.querySelectorAll<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      const focusable = Array.from(focusableElements).filter((el) => !el.hasAttribute('disabled'));\n      if (focusable.length === 0) return;\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n\n      if (e.shiftKey && active === first) {\n        e.preventDefault();\n        last.focus();\n      } else if (!e.shiftKey && active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    const focusTimer = window.setTimeout(() => {\n      confirmRef.current?.focus();\n    }, 0);\n\n    return () => {\n      window.clearTimeout(focusTimer);\n      document.removeEventListener('keydown', handleKeyDown);\n      document.body.style.overflow = '';\n      previousActiveElement.current?.focus();\n    };\n  }, [open, onClose]);\n\n  if (!open) return null;\n  if (typeof document === 'undefined') return null;\n  \n  const statusColors: Record<string, string> = {\n    normal: tokens.colors.status.normal,\n    caution: tokens.colors.status.caution,\n    serious: tokens.colors.status.serious,\n    critical: tokens.colors.status.critical,\n  };\n  \n  const accentColor = status ? statusColors[status] : tokens.colors.accent.primary;\n  const confirmBg = destructive ? tokens.colors.status.critical : tokens.colors.accent.primary;\n  \n  // Status icon shapes (Astro UX dual-coded)\n  const statusIcon = status && (() => {\n    const s = 32;\n    const innerIcon = (\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={accentColor} strokeWidth=\"2.5\" strokeLinecap=\"round\">\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n    const baseStyle: React.CSSProperties = {\n      width: s,\n      height: s,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n    };\n    switch (status) {\n      case 'critical':\n        // Triangle (using clip-path)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            clipPath: 'polygon(50% 0%, 0% 100%, 100% 100%)',\n            paddingTop: 8,\n          }}>\n            {innerIcon}\n          </div>\n        );\n      case 'serious':\n        // Diamond (rotated square)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            transform: 'rotate(45deg)',\n          }}>\n            <div style={{ transform: 'rotate(-45deg)' }}>{innerIcon}</div>\n          </div>\n        );\n      case 'caution':\n        // Square (rounded)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            borderRadius: '4px',\n          }}>\n            {innerIcon}\n          </div>\n        );\n      default:\n        // Circle (normal, standby, off)\n        return (\n          <div style={{\n            ...baseStyle,\n            backgroundColor: `${accentColor}20`,\n            border: `2px solid ${accentColor}`,\n            borderRadius: '50%',\n          }}>\n            {innerIcon}\n          </div>\n        );\n    }\n  })();\n  \n  return createPortal((\n    <>\n      {/* Backdrop */}\n      <div\n        style={{\n          position: 'fixed',\n          inset: 0,\n          zIndex: CONFIRM_DIALOG_Z_INDEX,\n          backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}80` : `${tokens.colors.background.base}B3`,\n          backdropFilter: 'blur(6px)',\n          WebkitBackdropFilter: 'blur(6px)',\n          animation: `zendir-confirm-backdrop 200ms ${tokens.animation.easing.default}`,\n        }}\n        onClick={onClose}\n      />\n      \n      {/* Dialog */}\n      <div\n        ref={dialogRef}\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        aria-describedby={message ? messageId : undefined}\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          position: 'fixed',\n          top: '50%',\n          left: '50%',\n          transform: 'translate(-50%, -50%)',\n          zIndex: CONFIRM_DIALOG_Z_INDEX + 1,\n          width: '100%',\n          maxWidth: 'min(440px, calc(100vw - 32px))',\n          backgroundColor: isTransparentTheme\n            ? 'rgba(15, 12, 30, 0.9)'\n            : tokens.colors.background.surface,\n          border: `1px solid ${tokens.colors.border.default}`,\n          borderRadius: tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          fontFamily: tokens.typography.fontFamily.primary,\n          animation: `zendir-confirm-enter 250ms ${tokens.animation.easing.default}`,\n          overflow: 'hidden',\n          ...(isTransparentTheme ? {\n            backdropFilter: 'blur(20px)',\n            WebkitBackdropFilter: 'blur(20px)',\n          } : {}),\n        }}\n      >\n        {/* Status accent bar */}\n        {status && (\n          <div style={{\n            height: 3,\n            backgroundColor: accentColor,\n            width: '100%',\n          }} />\n        )}\n        \n        {/* Content */}\n        <div style={{ padding: `${tokens.spacing.lg} ${tokens.spacing.lg} ${tokens.spacing.md}` }}>\n          <div style={{ display: 'flex', gap: tokens.spacing.md, alignItems: 'flex-start' }}>\n            {statusIcon}\n            <div style={{ flex: 1 }}>\n              <div\n                id={titleId}\n                style={{\n                  fontSize: tokens.typography.fontSize.md,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                  lineHeight: tokens.typography.lineHeight.tight,\n                }}\n              >\n                {title}\n              </div>\n              {message && (\n                <div\n                  id={messageId}\n                  style={{\n                    fontSize: tokens.typography.fontSize.sm,\n                    color: tokens.colors.text.secondary,\n                    marginTop: tokens.spacing.sm,\n                    lineHeight: tokens.typography.lineHeight.normal,\n                  }}\n                >\n                  {message}\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n        \n        {/* Actions — Astro UX: primary on right */}\n        <div style={{\n          display: 'flex',\n          justifyContent: 'flex-end',\n          gap: tokens.spacing.sm,\n          padding: `${tokens.spacing.md} ${tokens.spacing.lg} ${tokens.spacing.lg}`,\n          borderTop: tokens.borders.divider,\n        }}>\n          <button\n            onClick={onClose}\n            style={{\n              padding: `0 ${tokens.spacing.md}`,\n              minHeight: tokens.elementSize.lg,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.medium,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.primary,\n              backgroundColor: tokens.colors.background.base,\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md,\n              cursor: 'pointer',\n              transition: tokens.animation.fast,\n            }}\n          >\n            {cancelLabel}\n          </button>\n          <button\n            ref={confirmRef}\n            onClick={() => { onConfirm(); onClose(); }}\n            style={{\n              padding: `0 ${tokens.spacing.md}`,\n              minHeight: tokens.elementSize.lg,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.semibold,\n              fontFamily: tokens.typography.fontFamily.primary,\n              color: tokens.colors.text.inverse || '#fff',\n              backgroundColor: confirmBg,\n              border: 'none',\n              borderRadius: tokens.borderRadius.md,\n              cursor: 'pointer',\n              transition: tokens.animation.fast,\n              boxShadow: `0 2px 8px ${confirmBg}40`,\n            }}\n          >\n            {confirmLabel}\n          </button>\n        </div>\n      </div>\n      \n      <style>{`\n        @keyframes zendir-confirm-backdrop { from { opacity: 0; } to { opacity: 1; } }\n        @keyframes zendir-confirm-enter {\n          from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }\n          to { opacity: 1; transform: translate(-50%, -50%) scale(1); }\n        }\n      `}</style>\n    </>\n  ), document.body);\n});\n\n// ─── useConfirm Hook ─────────────────────────────────────────────────────────\n\ninterface ConfirmState extends ConfirmOptions {\n  resolve: (value: boolean) => void;\n}\n\nconst ConfirmContext = createContext<{\n  requestConfirm: (options: ConfirmOptions) => Promise<boolean>;\n} | null>(null);\n\n/**\n * Imperative confirmation hook.\n * Must be used within `<ConfirmProvider>`.\n * \n * @example\n * ```tsx\n * const confirm = useConfirm();\n * const ok = await confirm({ title: 'Delete?', status: 'critical', destructive: true });\n * ```\n */\nexport function useConfirm(): (options: ConfirmOptions) => Promise<boolean> {\n  const ctx = useContext(ConfirmContext);\n  if (!ctx) throw new Error('useConfirm must be used within <ConfirmProvider>');\n  return ctx.requestConfirm;\n}\n\n/**\n * Provider for the useConfirm() hook.\n * Renders the confirmation dialog as needed.\n */\nexport const ConfirmProvider = memo(function ConfirmProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}): React.ReactElement {\n  const [state, setState] = useState<ConfirmState | null>(null);\n  \n  const requestConfirm = useCallback((options: ConfirmOptions): Promise<boolean> => {\n    return new Promise<boolean>((resolve) => {\n      setState({ ...options, resolve });\n    });\n  }, []);\n  \n  const handleClose = useCallback(() => {\n    state?.resolve(false);\n    setState(null);\n  }, [state]);\n  \n  const handleConfirm = useCallback(() => {\n    state?.resolve(true);\n    setState(null);\n  }, [state]);\n  \n  return (\n    <ConfirmContext.Provider value={{ requestConfirm }}>\n      {children}\n      {state && (\n        <ConfirmDialog\n          open={true}\n          onClose={handleClose}\n          onConfirm={handleConfirm}\n          title={state.title}\n          message={state.message}\n          status={state.status}\n          confirmLabel={state.confirmLabel}\n          cancelLabel={state.cancelLabel}\n          destructive={state.destructive}\n        />\n      )}\n    </ConfirmContext.Provider>\n  );\n});\n\nexport default ConfirmDialog;\n"],"names":["ConfirmDialog","ConfirmProvider"],"mappings":"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"}

package/dist/react/core/ConnectionForm.d.ts

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+import { LabelPlacement } from './Input';
+
+export interface ConnectionConfig {
+    /** Host */
+    host: string;
+    /** Port */
+    port: number;
+    /** Protocol */
+    protocol: 'ws' | 'wss' | 'mqtt' | 'mqtts' | 'tcp';
+    /** Path (e.g. /mqtt) */
+    path?: string;
+    /** Username */
+    username?: string;
+    /** Password */
+    password?: string;
+    /** Client ID */
+    clientId?: string;
+}
+export interface ConnectionFormProps {
+    /** Connect handler */
+    onConnect: (config: ConnectionConfig) => void;
+    /** Disconnect handler */
+    onDisconnect?: () => void;
+    /** Current connection state */
+    connected?: boolean;
+    /** Connection in progress */
+    connecting?: boolean;
+    /** Default protocol */
+    defaultProtocol?: ConnectionConfig['protocol'];
+    /** Default host */
+    defaultHost?: string;
+    /** Default port */
+    defaultPort?: number;
+    /** Default path */
+    defaultPath?: string;
+    /** Show advanced fields (clientId, credentials) */
+    showAdvanced?: boolean;
+    /** Persist to localStorage (key name) */
+    persistKey?: string;
+    /** Parse URL params on mount */
+    parseUrlParams?: boolean;
+    /** Error message */
+    error?: string | null;
+    /** Compact layout */
+    compact?: boolean;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /**
+     * Label placement style for form fields.
+     * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**
+     * - `'above'`    — label sits above the input with a gap (classic stack).
+     */
+    labelPlacement?: LabelPlacement;
+}
+export declare const ConnectionForm: React.NamedExoticComponent<ConnectionFormProps>;
+export default ConnectionForm;