mywhy-ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,767 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+// src/components/Spinner/Spinner.tsx
+var sizeClasses = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6"
+};
+var colorClasses = {
+  brand: "text-brand",
+  white: "text-white",
+  gray: "text-ink-faint"
+};
+function Spinner({ size = "md", color = "brand", label = "Loading...", className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { role: "status", className: `inline-flex ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: `animate-spin ${sizeClasses[size]} ${colorClasses[color]}`,
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "3"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              className: "opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label })
+  ] });
+}
+var base = "inline-flex items-center justify-center gap-1.5 font-medium rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 disabled:opacity-50 disabled:pointer-events-none select-none";
+var sizeClasses2 = {
+  xs: "h-6 px-2 text-xs",
+  sm: "h-7 px-2.5 text-sm",
+  md: "h-8 px-3 text-base",
+  lg: "h-9 px-4 text-md"
+};
+var variantThemeClasses = {
+  solid: {
+    brand: "bg-brand text-white hover:bg-brand-dark active:bg-brand-dark",
+    success: "bg-success-icon text-white hover:bg-green-600 active:bg-green-700",
+    danger: "bg-danger-icon text-white hover:bg-red-600 active:bg-red-700",
+    warning: "bg-warning-icon text-white hover:bg-amber-600 active:bg-amber-700",
+    gray: "bg-ink text-white hover:bg-ink-gray active:bg-ink-gray"
+  },
+  subtle: {
+    brand: "bg-brand-50 text-brand hover:bg-brand-100 active:bg-brand-200",
+    success: "bg-success-bg text-success-text hover:bg-green-100",
+    danger: "bg-danger-bg text-danger-text hover:bg-red-100",
+    warning: "bg-warning-bg text-warning-text hover:bg-amber-100",
+    gray: "bg-surface-gray text-ink hover:bg-surface-overlay"
+  },
+  outline: {
+    brand: "border border-brand text-brand hover:bg-brand-50",
+    success: "border border-success-border text-success-text hover:bg-success-bg",
+    danger: "border border-danger-border text-danger-text hover:bg-danger-bg",
+    warning: "border border-warning-border text-warning-text hover:bg-warning-bg",
+    gray: "border border-outline text-ink hover:bg-surface-gray"
+  },
+  ghost: {
+    brand: "text-brand hover:bg-brand-50",
+    success: "text-success-text hover:bg-success-bg",
+    danger: "text-danger-text hover:bg-danger-bg",
+    warning: "text-warning-text hover:bg-warning-bg",
+    gray: "text-ink-light hover:bg-surface-gray"
+  },
+  link: {
+    brand: "text-brand hover:underline p-0 h-auto",
+    success: "text-success-text hover:underline p-0 h-auto",
+    danger: "text-danger-text hover:underline p-0 h-auto",
+    warning: "text-warning-text hover:underline p-0 h-auto",
+    gray: "text-ink-light hover:underline p-0 h-auto"
+  }
+};
+function Button({
+  variant = "subtle",
+  theme = "brand",
+  size = "md",
+  loading = false,
+  icon,
+  iconRight,
+  disabled,
+  children,
+  className = "",
+  ...props
+}) {
+  const variantClass = variantThemeClasses[variant]?.[theme] ?? variantThemeClasses.subtle.brand;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: `${base} ${sizeClasses2[size]} ${variantClass} ${className}`,
+      disabled: disabled || loading,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "xs", color: variant === "solid" ? "white" : "brand" }) : icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: icon }),
+        children,
+        !loading && iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: iconRight })
+      ]
+    }
+  );
+}
+var sizeClasses3 = {
+  sm: "h-7 px-2 text-sm",
+  md: "h-8 px-2.5 text-base",
+  lg: "h-9 px-3 text-md"
+};
+function Input({
+  size = "md",
+  label,
+  error,
+  prefix,
+  suffix,
+  id,
+  className = "",
+  ...props
+}) {
+  const inputId = id ?? (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+  const inputClass = [
+    "w-full rounded-md border bg-surface-subtle text-ink placeholder:text-ink-faint",
+    "focus:outline-none focus:ring-2 focus:ring-brand focus:ring-offset-0 focus:border-brand",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "transition-colors",
+    error ? "border-danger-border focus:ring-danger-icon" : "border-outline hover:border-outline-strong",
+    sizeClasses3[size],
+    prefix ? "pl-8" : "",
+    suffix ? "pr-8" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-ink-gray", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
+      prefix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2.5 flex items-center text-ink-faint pointer-events-none", children: prefix }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: inputId, className: inputClass, ...props }),
+      suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2.5 flex items-center text-ink-faint pointer-events-none", children: suffix })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-danger-text", children: error })
+  ] });
+}
+var sizeClasses4 = {
+  sm: "h-7 px-2 text-sm",
+  md: "h-8 px-2.5 text-base",
+  lg: "h-9 px-3 text-md"
+};
+function Select({
+  size = "md",
+  label,
+  error,
+  options,
+  id,
+  className = "",
+  ...props
+}) {
+  const selectId = id ?? (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+  const selectClass = [
+    "w-full rounded-md border bg-surface-subtle text-ink appearance-none pr-8",
+    "focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "transition-colors",
+    error ? "border-danger-border focus:ring-danger-icon" : "border-outline hover:border-outline-strong",
+    sizeClasses4[size],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: selectId, className: "text-sm font-medium text-ink-gray", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("select", { id: selectId, className: selectClass, ...props, children: options.map((opt) => {
+        const value = typeof opt === "string" ? opt : opt.value;
+        const label2 = typeof opt === "string" ? opt : opt.label;
+        return /* @__PURE__ */ jsxRuntime.jsx("option", { value, children: label2 }, value);
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-ink-faint", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-danger-text", children: error })
+  ] });
+}
+var subtleClasses = {
+  brand: "bg-brand-50 text-brand border-brand-200",
+  success: "bg-success-bg text-success-text border-success-border",
+  danger: "bg-danger-bg text-danger-text border-danger-border",
+  warning: "bg-warning-bg text-warning-text border-warning-border",
+  gray: "bg-surface-gray text-ink-light border-outline",
+  admin: "bg-purple-50 text-role-admin border-purple-200",
+  operator: "bg-sky-50 text-role-operator border-sky-200",
+  viewer: "bg-surface-gray text-role-viewer border-outline",
+  online: "bg-green-50 text-status-online border-green-200",
+  offline: "bg-surface-gray text-status-offline border-outline",
+  error: "bg-danger-bg text-status-error border-danger-border"
+};
+var solidClasses = {
+  brand: "bg-brand text-white border-brand",
+  success: "bg-success-icon text-white border-success-icon",
+  danger: "bg-danger-icon text-white border-danger-icon",
+  warning: "bg-warning-icon text-white border-warning-icon",
+  gray: "bg-ink-light text-white border-ink-light",
+  admin: "bg-role-admin text-white border-role-admin",
+  operator: "bg-role-operator text-white border-role-operator",
+  viewer: "bg-role-viewer text-white border-role-viewer",
+  online: "bg-status-online text-white border-status-online",
+  offline: "bg-status-offline text-white border-status-offline",
+  error: "bg-status-error text-white border-status-error"
+};
+var dotColorClasses = {
+  brand: "bg-brand",
+  success: "bg-success-icon",
+  danger: "bg-danger-icon",
+  warning: "bg-warning-icon",
+  gray: "bg-ink-faint",
+  admin: "bg-role-admin",
+  operator: "bg-role-operator",
+  viewer: "bg-role-viewer",
+  online: "bg-status-online",
+  offline: "bg-status-offline",
+  error: "bg-status-error"
+};
+function Badge({
+  theme = "gray",
+  size = "sm",
+  variant = "subtle",
+  dot = false,
+  children,
+  className = ""
+}) {
+  const colorClass = variant === "solid" ? solidClasses[theme] : subtleClasses[theme];
+  const sizeClass = size === "sm" ? "text-xs px-1.5 py-0.5" : "text-sm px-2 py-0.5";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-1 rounded font-medium border ${colorClass} ${sizeClass} ${className}`,
+      children: [
+        dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `w-1.5 h-1.5 rounded-full shrink-0 ${variant === "solid" ? "bg-white/70" : dotColorClasses[theme]}` }),
+        children
+      ]
+    }
+  );
+}
+var sizeClasses5 = {
+  xs: "w-5 h-5 text-2xs",
+  sm: "w-6 h-6 text-xs",
+  md: "w-8 h-8 text-sm",
+  lg: "w-10 h-10 text-base",
+  xl: "w-12 h-12 text-md"
+};
+var shapeClasses = {
+  circle: "rounded-full",
+  square: "rounded-md"
+};
+var themeClasses = {
+  brand: "bg-brand text-white",
+  admin: "bg-role-admin text-white",
+  operator: "bg-role-operator text-white",
+  viewer: "bg-surface-gray text-ink-light",
+  gray: "bg-surface-overlay text-ink-light"
+};
+function Avatar({
+  src,
+  alt = "",
+  initials,
+  size = "md",
+  shape = "circle",
+  theme = "brand",
+  className = ""
+}) {
+  const baseClass = `inline-flex items-center justify-center shrink-0 font-semibold overflow-hidden ${sizeClasses5[size]} ${shapeClasses[shape]}`;
+  if (src) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src,
+        alt,
+        className: `${baseClass} object-cover ${className}`
+      }
+    );
+  }
+  const displayInitials = initials ? initials.slice(0, 2).toUpperCase() : alt ? alt.slice(0, 2).toUpperCase() : "?";
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${baseClass} ${themeClasses[theme]} ${className}`, children: displayInitials });
+}
+var paddingClasses = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+function Card({
+  padding = "md",
+  shadow = true,
+  border = true,
+  as: Tag = "div",
+  onClick,
+  children,
+  className = ""
+}) {
+  const classes = [
+    "bg-surface rounded-lg",
+    paddingClasses[padding],
+    shadow ? "shadow-card" : "",
+    border ? "border border-outline" : "",
+    onClick ? "cursor-pointer hover:shadow-card-hover transition-shadow" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: classes, onClick, children });
+}
+function Checkbox({
+  label,
+  description,
+  error,
+  id,
+  className = "",
+  ...props
+}) {
+  const checkboxId = id ?? (typeof label === "string" ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-0.5 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-start gap-2 cursor-pointer", htmlFor: checkboxId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: checkboxId,
+          type: "checkbox",
+          className: [
+            "mt-0.5 w-4 h-4 rounded border text-brand",
+            "focus:ring-2 focus:ring-brand focus:ring-offset-0",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            error ? "border-danger-border" : "border-outline"
+          ].join(" "),
+          ...props
+        }
+      ),
+      (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-ink leading-tight", children: label }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-ink-light", children: description })
+      ] })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-danger-text ml-6", children: error })
+  ] });
+}
+var sizeClasses6 = {
+  sm: "px-2 py-1.5 text-sm",
+  md: "px-2.5 py-2 text-base",
+  lg: "px-3 py-2.5 text-md"
+};
+var resizeClasses = {
+  none: "resize-none",
+  vertical: "resize-y",
+  horizontal: "resize-x",
+  both: "resize"
+};
+function Textarea({
+  size = "md",
+  label,
+  error,
+  resize = "none",
+  id,
+  className = "",
+  ...props
+}) {
+  const textareaId = id ?? (label ? label.toLowerCase().replace(/\s+/g, "-") : void 0);
+  const textareaClass = [
+    "w-full rounded-md border bg-surface-subtle text-ink placeholder:text-ink-faint",
+    "focus:outline-none focus:ring-2 focus:ring-brand focus:border-brand",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "transition-colors",
+    error ? "border-danger-border focus:ring-danger-icon" : "border-outline hover:border-outline-strong",
+    sizeClasses6[size],
+    resizeClasses[resize],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: textareaId, className: "text-sm font-medium text-ink-gray", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("textarea", { id: textareaId, className: textareaClass, ...props }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-danger-text", children: error })
+  ] });
+}
+var sizeClasses7 = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl"
+};
+function Dialog({
+  open,
+  onClose,
+  title,
+  size = "md",
+  children,
+  footer,
+  className = ""
+}) {
+  const overlayRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+  react.useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: overlayRef,
+      className: "fixed inset-0 z-50 flex items-center justify-center p-4",
+      onClick: (e) => {
+        if (e.target === overlayRef.current) onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-ink/40 backdrop-blur-sm", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-labelledby": title ? "dialog-title" : void 0,
+            className: `relative w-full ${sizeClasses7[size]} bg-surface rounded-xl shadow-dialog border border-outline flex flex-col max-h-[90vh] ${className}`,
+            children: [
+              title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-outline shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { id: "dialog-title", className: "text-md font-semibold text-ink", children: title }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "p-1 rounded-md text-ink-faint hover:text-ink hover:bg-surface-gray transition-colors",
+                    "aria-label": "Close dialog",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4 overflow-y-auto flex-1", children }),
+              footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-3 border-t border-outline shrink-0 flex items-center justify-end gap-2", children: footer })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var typeConfig = {
+  success: {
+    classes: "border-success-border bg-success-bg text-success-text",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-success-icon shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] })
+  },
+  error: {
+    classes: "border-danger-border bg-danger-bg text-danger-text",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-danger-icon shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L6 10M6 6l4 4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] })
+  },
+  warning: {
+    classes: "border-warning-border bg-warning-bg text-warning-text",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-warning-icon shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2L14 13H2L8 2z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6v3M8 11v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] })
+  },
+  info: {
+    classes: "border-brand-200 bg-brand-50 text-brand",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: "text-brand shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 7v4M8 5v.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] })
+  }
+};
+function Toast({
+  type = "info",
+  title,
+  message,
+  duration = 3e3,
+  onClose,
+  className = ""
+}) {
+  react.useEffect(() => {
+    if (!duration || !onClose) return;
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+  const { icon, classes } = typeConfig[type];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "alert",
+      className: `flex items-start gap-3 px-4 py-3 rounded-lg border shadow-toast min-w-[260px] max-w-sm ${classes} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base font-medium leading-tight", children: title }),
+          message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-0.5 opacity-80", children: message })
+        ] }),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "shrink-0 p-0.5 rounded opacity-60 hover:opacity-100 transition-opacity",
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 3L3 11M3 3l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastContainer({ toasts, onClose }) {
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-4 right-4 z-[100] flex flex-col gap-2 items-end", children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onClose: () => onClose(toast.id) }, toast.id)) });
+}
+var placementClasses = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
+  left: "right-full top-1/2 -translate-y-1/2 mr-1.5",
+  right: "left-full top-1/2 -translate-y-1/2 ml-1.5"
+};
+function Tooltip({
+  content,
+  placement = "top",
+  delay = 200,
+  children,
+  className = ""
+}) {
+  const [visible, setVisible] = react.useState(false);
+  const timerRef = react.useRef(null);
+  const show = () => {
+    timerRef.current = setTimeout(() => setVisible(true), delay);
+  };
+  const hide = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setVisible(false);
+  };
+  react.useEffect(() => () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: "relative inline-flex",
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      children: [
+        children,
+        visible && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            role: "tooltip",
+            className: `absolute z-50 px-2 py-1 text-xs font-medium text-white bg-ink rounded-md whitespace-nowrap shadow-toast pointer-events-none ${placementClasses[placement]} ${className}`,
+            children: content
+          }
+        )
+      ]
+    }
+  );
+}
+var variantClasses = {
+  default: "text-ink hover:text-brand hover:underline",
+  muted: "text-ink-light hover:text-ink hover:underline",
+  brand: "text-brand hover:underline"
+};
+function Link({
+  variant = "default",
+  external = false,
+  children,
+  className = "",
+  ...props
+}) {
+  const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      className: `transition-colors ${variantClasses[variant]} ${className}`,
+      ...externalProps,
+      ...props,
+      children
+    }
+  );
+}
+var statusConfig = {
+  online: {
+    label: "Online",
+    dotClass: "bg-status-online",
+    textClass: "text-status-online",
+    bgClass: "bg-green-50",
+    borderClass: "border-green-200"
+  },
+  offline: {
+    label: "Offline",
+    dotClass: "bg-status-offline",
+    textClass: "text-status-offline",
+    bgClass: "bg-surface-gray",
+    borderClass: "border-outline"
+  },
+  error: {
+    label: "Error",
+    dotClass: "bg-status-error",
+    textClass: "text-status-error",
+    bgClass: "bg-danger-bg",
+    borderClass: "border-danger-border"
+  },
+  warning: {
+    label: "Warning",
+    dotClass: "bg-status-warning",
+    textClass: "text-status-warning",
+    bgClass: "bg-warning-bg",
+    borderClass: "border-warning-border"
+  },
+  connecting: {
+    label: "Connecting",
+    dotClass: "bg-status-info",
+    textClass: "text-status-info",
+    bgClass: "bg-sky-50",
+    borderClass: "border-sky-200"
+  },
+  unknown: {
+    label: "Unknown",
+    dotClass: "bg-status-offline",
+    textClass: "text-ink-faint",
+    bgClass: "bg-surface-gray",
+    borderClass: "border-outline"
+  }
+};
+function StatusBadge({
+  status,
+  label,
+  size = "sm",
+  pulse = false,
+  showDot = true,
+  className = ""
+}) {
+  const config = statusConfig[status];
+  const displayLabel = label ?? config.label;
+  const sizeClass = size === "sm" ? "text-xs px-1.5 py-0.5" : "text-sm px-2 py-0.5";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-1 rounded font-medium border ${config.bgClass} ${config.borderClass} ${config.textClass} ${sizeClass} ${className}`,
+      children: [
+        showDot && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex shrink-0 w-1.5 h-1.5", children: [
+          pulse && (status === "online" || status === "connecting") && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping ${config.dotClass}`
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `relative inline-flex rounded-full w-1.5 h-1.5 ${config.dotClass}` })
+        ] }),
+        displayLabel
+      ]
+    }
+  );
+}
+var sizeClasses8 = {
+  sm: "text-xs gap-1.5",
+  md: "text-sm gap-2",
+  lg: "text-base gap-2"
+};
+var iconSizes = {
+  sm: "w-3.5 h-3.5",
+  md: "w-4 h-4",
+  lg: "w-5 h-5"
+};
+function ConnectionIndicator({
+  connected,
+  rosDistro = null,
+  size = "md",
+  showLabel = true,
+  showDistro = true,
+  className = ""
+}) {
+  const status = connected ? "online" : "offline";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center ${sizeClasses8[size]} ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      StatusBadge,
+      {
+        status,
+        pulse: connected,
+        size: size === "lg" ? "md" : "sm",
+        label: showLabel ? connected ? "Connected" : "Disconnected" : void 0,
+        showDot: !showLabel
+      }
+    ),
+    showDistro && connected && rosDistro && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-faint font-mono", children: rosDistro })
+  ] });
+}
+function ConnectionIcon({ connected, size = "md", className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className: `${iconSizes[size]} ${connected ? "text-status-online" : "text-status-offline"} ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: connected ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.28 7.22a5.5 5.5 0 017.44 0M5.42 4.36a9.5 9.5 0 0113.16 0M12 17h.01M12 13a2 2 0 110 4 2 2 0 010-4z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3l18 18M8.28 7.22a5.5 5.5 0 017.44 0M5.42 4.36a9.5 9.5 0 013.4-1.6M12 17h.01M12 13a2 2 0 110 4 2 2 0 010-4z", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+    }
+  );
+}
+function useDisclosure(initial = false) {
+  const [isOpen, setIsOpen] = react.useState(initial);
+  const open = react.useCallback(() => setIsOpen(true), []);
+  const close = react.useCallback(() => setIsOpen(false), []);
+  const toggle = react.useCallback(() => setIsOpen((v) => !v), []);
+  return { isOpen, open, close, toggle };
+}
+var counter = 0;
+function useToast() {
+  const [toasts, setToasts] = react.useState([]);
+  const addToast = react.useCallback((props) => {
+    const id = `toast-${++counter}`;
+    setToasts((prev) => [...prev, { ...props, id }]);
+    return id;
+  }, []);
+  const removeToast = react.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return { toasts, addToast, removeToast };
+}
+
+exports.Avatar = Avatar;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Card = Card;
+exports.Checkbox = Checkbox;
+exports.ConnectionIcon = ConnectionIcon;
+exports.ConnectionIndicator = ConnectionIndicator;
+exports.Dialog = Dialog;
+exports.Input = Input;
+exports.Link = Link;
+exports.Select = Select;
+exports.Spinner = Spinner;
+exports.StatusBadge = StatusBadge;
+exports.Textarea = Textarea;
+exports.Toast = Toast;
+exports.ToastContainer = ToastContainer;
+exports.Tooltip = Tooltip;
+exports.useDisclosure = useDisclosure;
+exports.useToast = useToast;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map