mywhy-ui 0.3.1 → 0.5.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React9 = require('react');
+var React10 = require('react');
 var lucideReact = require('lucide-react');
 var rosmsg = require('@foxglove/rosmsg');
 var rosmsg2Serialization = require('@foxglove/rosmsg2-serialization');
@@ -11,7 +11,7 @@ var WebSocket = require('isomorphic-ws');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React9__default = /*#__PURE__*/_interopDefault(React9);
+var React10__default = /*#__PURE__*/_interopDefault(React10);
 var WebSocket__default = /*#__PURE__*/_interopDefault(WebSocket);
 
 var __typeError = (msg) => {
@@ -185,43 +185,117 @@ function Input({
     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({
+var Select = ({
   size = "md",
-  label,
-  error,
+  variant = "outline",
+  disabled = false,
+  value,
+  placeholder = "Select option",
   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 })
+  onChange,
+  htmlId,
+  prefix
+}) => {
+  const selectOptions = React10.useMemo(() => {
+    return options?.map((option) => {
+      if (typeof option === "string") {
+        return {
+          label: option,
+          value: option
+        };
+      }
+      return option;
+    }).filter(Boolean) || [];
+  }, [options]);
+  const handleChange = React10.useCallback(
+    (e) => {
+      onChange?.(e);
+    },
+    [onChange]
+  );
+  const heightClasses = React10.useMemo(() => {
+    return {
+      sm: "h-8",
+      md: "h-9",
+      lg: "h-10",
+      xl: "h-11"
+    }[size];
+  }, [size]);
+  const fontSizeClasses = React10.useMemo(() => {
+    return {
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-base"
+    }[size];
+  }, [size]);
+  const paddingClasses2 = React10.useMemo(() => {
+    return {
+      sm: "px-3 py-1.5",
+      md: "px-3 py-2",
+      lg: "px-4 py-2.5",
+      xl: "px-4 py-3"
+    }[size];
+  }, [size]);
+  const variantClasses2 = React10.useMemo(() => {
+    if (disabled) {
+      return "opacity-50 cursor-not-allowed";
+    }
+    return {
+      subtle: "border border-outline-gray-2 bg-surface-gray-2 hover:bg-surface-gray-3 hover:border-outline-gray-3",
+      outline: "border border-outline-gray-2 bg-surface-white hover:border-outline-gray-3",
+      ghost: "border border-transparent bg-transparent hover:bg-surface-gray-3"
+    }[variant];
+  }, [variant, disabled]);
+  const selectClass = React10.useMemo(() => {
+    return `
+      relative w-full ${heightClasses} ${fontSizeClasses} ${paddingClasses2}
+      rounded pr-10
+      ${variantClasses2}
+      text-ink-gray-8 transition-colors cursor-pointer
+      focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-brand-light
+    `;
+  }, [heightClasses, fontSizeClasses, paddingClasses2, variantClasses2]);
+  const selectedOption = selectOptions.find((opt) => opt.value === value);
+  selectedOption?.label || placeholder;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
+    prefix && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 flex items-center pl-2.5 pointer-events-none text-ink-gray-6", children: prefix?.(size) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        id: htmlId,
+        className: selectClass,
+        disabled,
+        value: value || "",
+        onChange: handleChange,
+        "data-testid": "select",
+        style: {
+          WebkitAppearance: "none",
+          MozAppearance: "none",
+          appearance: "none",
+          backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235a6c7d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")`,
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "right 0.5rem center",
+          backgroundSize: "1.5em 1.5em",
+          paddingRight: "2.5rem"
+        },
+        children: [
+          !value && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: placeholder }),
+          selectOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+            "option",
+            {
+              value: option.value,
+              disabled: option.disabled,
+              children: option.label
+            },
+            option.value
+          ))
+        ]
+      }
+    )
   ] });
-}
+};
+var Select_default = Select;
 function Switch({
   label,
   description,
@@ -325,7 +399,7 @@ function Badge({
     }
   );
 }
-var sizeClasses5 = {
+var sizeClasses4 = {
   xs: "w-5 h-5 text-2xs",
   sm: "w-6 h-6 text-xs",
   md: "w-8 h-8 text-sm",
@@ -338,10 +412,17 @@ var shapeClasses = {
 };
 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"
+  admin: "text-white",
+  operator: "text-white",
+  viewer: "text-ink-light",
+  gray: "text-ink-light"
+};
+var themeStyles = {
+  brand: { backgroundColor: "#1A4B8C" },
+  admin: { backgroundColor: "#7C3AED" },
+  operator: { backgroundColor: "#0EA5E9" },
+  viewer: { backgroundColor: "#F8FAFC" },
+  gray: { backgroundColor: "#F1F5F9" }
 };
 function Avatar({
   src,
@@ -352,7 +433,7 @@ function Avatar({
   theme = "brand",
   className = ""
 }) {
-  const baseClass = `inline-flex items-center justify-center shrink-0 font-semibold overflow-hidden ${sizeClasses5[size]} ${shapeClasses[shape]}`;
+  const baseClass = `inline-flex items-center justify-center shrink-0 font-semibold overflow-hidden ${sizeClasses4[size]} ${shapeClasses[shape]}`;
   if (src) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "img",
@@ -364,7 +445,14 @@ function Avatar({
     );
   }
   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 });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `${baseClass} ${themeClasses[theme]} ${className}`,
+      style: themeStyles[theme],
+      children: displayInitials
+    }
+  );
 }
 var paddingClasses = {
   none: "",
@@ -424,7 +512,7 @@ function Checkbox({
     error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-danger-text ml-6", children: error })
   ] });
 }
-var sizeClasses6 = {
+var sizeClasses5 = {
   sm: "px-2 py-1.5 text-sm",
   md: "px-2.5 py-2 text-base",
   lg: "px-3 py-2.5 text-md"
@@ -451,7 +539,7 @@ function Textarea({
     "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],
+    sizeClasses5[size],
     resizeClasses[resize],
     className
   ].filter(Boolean).join(" ");
@@ -489,7 +577,7 @@ function Alert({
   className = "",
   ...props
 }) {
-  const [isVisible, setIsVisible] = React9__default.default.useState(true);
+  const [isVisible, setIsVisible] = React10__default.default.useState(true);
   const handleClose = () => {
     setIsVisible(false);
     onClose?.();
@@ -535,10 +623,10 @@ function MultiSelect({
   className = "",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9__default.default.useState(false);
-  const [searchTerm, setSearchTerm] = React9__default.default.useState("");
-  const containerRef = React9.useRef(null);
-  const inputRef = React9.useRef(null);
+  const [isOpen, setIsOpen] = React10__default.default.useState(false);
+  const [searchTerm, setSearchTerm] = React10__default.default.useState("");
+  const containerRef = React10.useRef(null);
+  const inputRef = React10.useRef(null);
   const filteredOptions = searchable ? options.filter(
     (opt) => opt.label.toLowerCase().includes(searchTerm.toLowerCase())
   ) : options;
@@ -554,7 +642,7 @@ function MultiSelect({
     onChange?.([]);
     setSearchTerm("");
   };
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -567,7 +655,7 @@ function MultiSelect({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  const sizeClasses13 = {
+  const sizeClasses12 = {
     sm: "h-7 px-2 text-sm",
     md: "h-8 px-3 text-base",
     lg: "h-9 px-4 text-base"
@@ -585,7 +673,7 @@ function MultiSelect({
             "focus-within:ring-2 focus-within:ring-brand focus-within:ring-offset-1",
             disabled ? "bg-surface-gray opacity-50 cursor-not-allowed" : "bg-white",
             error ? "border-danger-border" : "border-outline",
-            sizeClasses13[size]
+            sizeClasses12[size]
           ].join(" "),
           onClick: () => !disabled && setIsOpen(!isOpen),
           children: [
@@ -708,7 +796,7 @@ function Tabs({
   tabsClassName = "",
   contentClassName = ""
 }) {
-  const [internalActiveTab, setInternalActiveTab] = React9__default.default.useState(activeTab || tabs[0]?.value || "");
+  const [internalActiveTab, setInternalActiveTab] = React10__default.default.useState(activeTab || tabs[0]?.value || "");
   const active = activeTab !== void 0 ? activeTab : internalActiveTab;
   const handleTabChange = (value) => {
     setInternalActiveTab(value);
@@ -765,7 +853,7 @@ function Breadcrumbs({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `flex items-center gap-0 text-sm ${className}`, ...props, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `flex items-center gap-0 text-sm ${className}`, ...props, children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React10__default.default.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-light px-1.5", children: separator }),
     item.href ? /* @__PURE__ */ jsxRuntime.jsxs(
       "a",
@@ -807,16 +895,16 @@ function Dropdown({
   triggerClassName = "",
   menuClassName = ""
 }) {
-  const [internalIsOpen, setInternalIsOpen] = React9__default.default.useState(false);
-  const containerRef = React9.useRef(null);
-  const menuRef = React9.useRef(null);
+  const [internalIsOpen, setInternalIsOpen] = React10__default.default.useState(false);
+  const containerRef = React10.useRef(null);
+  const menuRef = React10.useRef(null);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
   const toggleOpen = () => {
     const newState = !isOpen;
     setInternalIsOpen(newState);
     onOpenChange?.(newState);
   };
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setInternalIsOpen(false);
@@ -874,7 +962,7 @@ function Dropdown({
     )
   ] });
 }
-var sizeClasses7 = {
+var sizeClasses6 = {
   sm: "max-w-sm",
   md: "max-w-md",
   lg: "max-w-lg",
@@ -889,8 +977,8 @@ function Dialog({
   footer,
   className = ""
 }) {
-  const overlayRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const overlayRef = React10.useRef(null);
+  React10.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -898,7 +986,7 @@ function Dialog({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open, onClose]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     document.body.style.overflow = open ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
@@ -921,7 +1009,7 @@ function Dialog({
             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}`,
+            className: `relative w-full ${sizeClasses6[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 }),
@@ -982,7 +1070,7 @@ function Toast({
   onClose,
   className = ""
 }) {
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!duration || !onClose) return;
     const timer = setTimeout(onClose, duration);
     return () => clearTimeout(timer);
@@ -1029,8 +1117,8 @@ function Tooltip({
   children,
   className = ""
 }) {
-  const [visible, setVisible] = React9.useState(false);
-  const timerRef = React9.useRef(null);
+  const [visible, setVisible] = React10.useState(false);
+  const timerRef = React10.useRef(null);
   const show = () => {
     timerRef.current = setTimeout(() => setVisible(true), delay);
   };
@@ -1038,7 +1126,7 @@ function Tooltip({
     if (timerRef.current) clearTimeout(timerRef.current);
     setVisible(false);
   };
-  React9.useEffect(() => () => {
+  React10.useEffect(() => () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1099,9 +1187,9 @@ function FileUploader({
   className = "",
   ...props
 }) {
-  const [dragActive, setDragActive] = React9__default.default.useState(false);
-  const [files, setFiles] = React9__default.default.useState([]);
-  const inputRef = React9__default.default.useRef(null);
+  const [dragActive, setDragActive] = React10__default.default.useState(false);
+  const [files, setFiles] = React10__default.default.useState([]);
+  const inputRef = React10__default.default.useRef(null);
   const handleFiles = (fileList) => {
     if (!fileList) return;
     let newFiles = Array.from(fileList);
@@ -1251,12 +1339,12 @@ function DatePicker({
   className = "",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9__default.default.useState(false);
-  const containerRef = React9.useRef(null);
+  const [isOpen, setIsOpen] = React10__default.default.useState(false);
+  const containerRef = React10.useRef(null);
   const handleDateChange = (e) => {
     onChange?.(e.target.value);
   };
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1342,12 +1430,12 @@ function TimePicker({
   className = "",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9__default.default.useState(false);
-  const containerRef = React9.useRef(null);
+  const [isOpen, setIsOpen] = React10__default.default.useState(false);
+  const containerRef = React10.useRef(null);
   const handleTimeChange = (e) => {
     onChange?.(e.target.value);
   };
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1421,7 +1509,7 @@ function TimePicker({
     error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-danger-text mt-1", children: error })
   ] });
 }
-var sizeClasses8 = {
+var sizeClasses7 = {
   sm: "h-1.5",
   md: "h-2.5",
   lg: "h-4"
@@ -1452,11 +1540,11 @@ function Progress({
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full bg-surface-gray rounded-full overflow-hidden ${sizeClasses8[size]}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full bg-surface-gray rounded-full overflow-hidden ${sizeClasses7[size]}`, children: /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: [
-          `${themeClasses3[theme]} ${sizeClasses8[size]} rounded-full transition-all duration-300`,
+          `${themeClasses3[theme]} ${sizeClasses7[size]} rounded-full transition-all duration-300`,
           striped ? "bg-gradient-to-r from-transparent to-white opacity-30" : "",
           animated ? "animate-pulse" : ""
         ].join(" "),
@@ -1465,7 +1553,7 @@ function Progress({
     ) })
   ] });
 }
-var sizeClasses9 = {
+var sizeClasses8 = {
   sm: "w-4 h-4",
   md: "w-5 h-5",
   lg: "w-6 h-6"
@@ -1486,7 +1574,7 @@ function Rating({
   className = "",
   ...props
 }) {
-  const [hoverValue, setHoverValue] = React9__default.default.useState(0);
+  const [hoverValue, setHoverValue] = React10__default.default.useState(0);
   const displayValue = hoverValue || value;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, ...props, children: [
     label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-ink mb-2", children: label }),
@@ -1501,7 +1589,7 @@ function Rating({
         children: /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
-            className: `${sizeClasses9[size]} ${starValue <= displayValue ? `fill-current ${colorClasses2[color]}` : "text-outline"}`,
+            className: `${sizeClasses8[size]} ${starValue <= displayValue ? `fill-current ${colorClasses2[color]}` : "text-outline"}`,
             viewBox: "0 0 20 20",
             fill: "currentColor",
             children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" })
@@ -1794,7 +1882,7 @@ function EmptyState({
 }
 var ChevronUpIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "18 15 12 9 6 15" }) });
 var ChevronDownIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) });
-var sizeClasses10 = {
+var sizeClasses9 = {
   sm: "text-xs px-2 py-1 h-8",
   md: "text-sm px-3 py-2 h-10",
   lg: "text-base px-4 py-2.5 h-12"
@@ -1810,7 +1898,7 @@ function NumberInput({
   placeholder,
   className = ""
 }) {
-  const [isEditing, setIsEditing] = React9.useState(false);
+  const [isEditing, setIsEditing] = React10.useState(false);
   const handleIncrement = () => {
     const newValue = value + step;
     if (max === void 0 || newValue <= max) {
@@ -1848,7 +1936,7 @@ function NumberInput({
         max,
         className: `
           flex-1 bg-transparent outline-none text-ink disabled:text-ink-faint disabled:cursor-not-allowed
-          ${sizeClasses10[size]}
+          ${sizeClasses9[size]}
         `
       }
     ),
@@ -1889,7 +1977,7 @@ function CodeBlock({
   maxHeight = "max-h-96",
   className = ""
 }) {
-  const [copied, setCopied] = React9.useState(false);
+  const [copied, setCopied] = React10.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(code);
@@ -2008,7 +2096,7 @@ function Timeline({
     ] }, item.id);
   }) });
 }
-var sizeClasses11 = {
+var sizeClasses10 = {
   xs: "text-xs px-1.5 py-0.5 min-w-5 h-5",
   sm: "text-xs px-2 py-1 min-w-6 h-6",
   md: "text-sm px-2.5 py-1.5 min-w-8 h-8"
@@ -2025,14 +2113,14 @@ function Kbd({
   className = ""
 }) {
   const keyArray = Array.isArray(keys) ? keys : [keys];
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center gap-1 ${className}`, children: keyArray.map((key, i) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `inline-flex items-center gap-1 ${className}`, children: keyArray.map((key, i) => /* @__PURE__ */ jsxRuntime.jsxs(React10__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "kbd",
       {
         className: `
               inline-flex items-center justify-center rounded font-mono font-medium
               border border-b-2 shadow-sm
-              ${sizeClasses11[size]}
+              ${sizeClasses10[size]}
               ${themeClasses5[theme]}
             `,
         children: key
@@ -2115,7 +2203,7 @@ function StatusBadge({
     }
   );
 }
-var sizeClasses12 = {
+var sizeClasses11 = {
   sm: "text-xs gap-1.5",
   md: "text-sm gap-2",
   lg: "text-base gap-2"
@@ -2134,7 +2222,7 @@ function ConnectionIndicator({
   className = ""
 }) {
   const status = connected ? "online" : "offline";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center ${sizeClasses12[size]} ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center ${sizeClasses11[size]} ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       StatusBadge,
       {
@@ -2713,9 +2801,9 @@ var RosConnectionManager = ({
   onConnectionStatusChange,
   onClearHistory
 }) => {
-  const staleTimeoutId = React9.useRef(0);
-  const retryTimeoutId = React9.useRef(0);
-  React9.useEffect(() => {
+  const staleTimeoutId = React10.useRef(0);
+  const retryTimeoutId = React10.useRef(0);
+  React10.useEffect(() => {
     if (!url) {
       console.warn("WebSocket URL is not set correctly. Skipping WebSocket configuration.");
       return;
@@ -2736,7 +2824,7 @@ var RosConnectionManager = ({
       ros.connect(url);
       ros.on("connection", () => {
         onClearHistory();
-        console.log("Connected to Foxglove bridge at " + url);
+        console.log("Connected to mRobotic server at " + url);
         onConnectionStatusChange(true);
         diagnosticsTopic.subscribe((message) => {
           clearTimeout(staleTimeoutId.current);
@@ -2776,12 +2864,12 @@ var RosConnectionManager = ({
         console.log(`Subscribed to topic: ${diagnosticsTopic.name}`);
       });
       ros.on("error", (error) => {
-        console.error("Error connecting to Foxglove bridge:", error);
+        console.error("Error connecting to mRobotic server:", error);
         ros.close();
       });
       ros.on("close", () => {
         onConnectionStatusChange(false);
-        console.log("Connection to Foxglove bridge closed");
+        console.log("Connection to mRobotic server closed");
         onClearHistory();
         clearTimeout(staleTimeoutId.current);
         clearTimeout(retryTimeoutId.current);
@@ -2822,15 +2910,15 @@ var sameNamespace = (ns1, ns2) => {
 // src/components/ROS2Diagnostics/hooks/useNamespace.ts
 var NAMESPACE_STORAGE_KEY = "ros2_diag_namespace";
 var useNamespace = (initialNamespace = "/robot") => {
-  const [namespace, setNamespace] = React9.useState("");
-  const [invalidNamespaceMessage, setInvalidNamespaceMessage] = React9.useState(null);
-  const [manualEntryRequired, setManualEntryRequired] = React9.useState(false);
-  const setManualNamespace = React9.useCallback((ns) => {
+  const [namespace, setNamespace] = React10.useState("");
+  const [invalidNamespaceMessage, setInvalidNamespaceMessage] = React10.useState(null);
+  const [manualEntryRequired, setManualEntryRequired] = React10.useState(false);
+  const setManualNamespace = React10.useCallback((ns) => {
     const ns_temp = sanitizeNamespace(ns);
     setNamespace(ns_temp);
     localStorage.setItem(NAMESPACE_STORAGE_KEY, ns_temp);
   }, []);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const savedNamespace = localStorage.getItem(NAMESPACE_STORAGE_KEY);
     if (savedNamespace) {
       console.log("Using namespace from storage:", savedNamespace);
@@ -2854,8 +2942,8 @@ var useNamespace = (initialNamespace = "/robot") => {
   return { namespace, setManualNamespace, invalidNamespaceMessage, manualEntryRequired };
 };
 var useWebSocketUrl = (customUrl) => {
-  const [url, setUrl] = React9.useState(customUrl || null);
-  React9.useEffect(() => {
+  const [url, setUrl] = React10.useState(customUrl || null);
+  React10.useEffect(() => {
     if (customUrl) {
       setUrl(customUrl);
       return;
@@ -2894,15 +2982,15 @@ var ManualNamespace = ({
   setManualNamespace,
   namespace
 }) => {
-  const [value, setValue] = React9.useState(namespace);
-  const [unsaved, setUnsaved] = React9.useState(false);
-  const [invalidNamespaceMessage, setInvalidNamespaceMessage] = React9.useState("");
-  const [isError, setIsError] = React9.useState(false);
-  React9.useEffect(() => {
+  const [value, setValue] = React10.useState(namespace);
+  const [unsaved, setUnsaved] = React10.useState(false);
+  const [invalidNamespaceMessage, setInvalidNamespaceMessage] = React10.useState("");
+  const [isError, setIsError] = React10.useState(false);
+  React10.useEffect(() => {
     const isSame = sameNamespace(namespace, sanitizeNamespace(value));
     setUnsaved(!isSame);
   }, [namespace, value]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const sanitizedValue = sanitizeNamespace(value);
     const isSame = sameNamespace(value, sanitizedValue);
     setIsError(!isSame);
@@ -2958,8 +3046,8 @@ var HistorySelection = ({
   isPaused,
   setIsPaused
 }) => {
-  const [negIndex, setNegIndex] = React9.useState(-1);
-  React9.useEffect(() => {
+  const [negIndex, setNegIndex] = React10.useState(-1);
+  React10.useEffect(() => {
     if (!isPaused) {
       setNegIndex(-1);
       if (diagHistory.length > 0) {
@@ -3020,15 +3108,15 @@ var HistorySelection = ({
 };
 var HISTORY_SIZE2 = 30;
 var useDiagHistory = (isPaused) => {
-  const [diagHistory, setDiagHistory] = React9.useState([]);
-  const isPausedRef = React9.useRef(isPaused);
-  React9.useEffect(() => {
+  const [diagHistory, setDiagHistory] = React10.useState([]);
+  const isPausedRef = React10.useRef(isPaused);
+  React10.useEffect(() => {
     isPausedRef.current = isPaused;
   }, [isPaused]);
-  const clearDiagHistory = React9.useCallback(() => {
+  const clearDiagHistory = React10.useCallback(() => {
     setDiagHistory([]);
   }, []);
-  const updateDiagHistory = React9.useCallback((diagStatusLatest) => {
+  const updateDiagHistory = React10.useCallback((diagStatusLatest) => {
     if (!isPausedRef.current && diagStatusLatest && diagStatusLatest.diagnostics.length > 0) {
       setDiagHistory((prevItems) => {
         const updatedItems = [...prevItems, diagStatusLatest];
@@ -3042,7 +3130,7 @@ var useDiagHistory = (isPaused) => {
   return { diagHistory, updateDiagHistory, clearDiagHistory };
 };
 var ROS2Diagnostics = ({
-  foxgloveUrl,
+  mroboticServerUrl,
   namespace: initialNamespace = "/robot",
   onDiagnosticUpdate
 }) => {
@@ -3052,11 +3140,11 @@ var ROS2Diagnostics = ({
     invalidNamespaceMessage,
     manualEntryRequired
   } = useNamespace(initialNamespace);
-  const wsUrl = useWebSocketUrl(foxgloveUrl);
-  const [diagStatusDisplay, setDiagStatusDisplay] = React9.useState(null);
-  const [bridgeConnected, setBridgeConnected] = React9.useState(false);
-  const [selectedRawName, setSelectedRawName] = React9.useState(null);
-  const [isPaused, setIsPaused] = React9.useState(false);
+  const wsUrl = useWebSocketUrl(mroboticServerUrl);
+  const [diagStatusDisplay, setDiagStatusDisplay] = React10.useState(null);
+  const [bridgeConnected, setBridgeConnected] = React10.useState(false);
+  const [selectedRawName, setSelectedRawName] = React10.useState(null);
+  const [isPaused, setIsPaused] = React10.useState(false);
   const {
     diagHistory,
     updateDiagHistory,
@@ -3076,7 +3164,7 @@ var ROS2Diagnostics = ({
         {
           variant: isPaused ? "solid" : "subtle",
           theme: "brand",
-          size: "sm",
+          size: "md",
           onClick: () => {
             if (isPaused) clearDiagHistory();
             setIsPaused(!isPaused);
@@ -3121,7 +3209,7 @@ var ROS2Diagnostics = ({
           theme: "warning",
           title: "Waiting for connection...",
           children: [
-            "Attempting to connect to Foxglove bridge at ",
+            "Attempting to connect to mRobotic server at ",
             wsUrl
           ]
         }
@@ -3159,21 +3247,21 @@ var ROS2Diagnostics = ({
   ] });
 };
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = React9.useState(initial);
-  const open = React9.useCallback(() => setIsOpen(true), []);
-  const close = React9.useCallback(() => setIsOpen(false), []);
-  const toggle = React9.useCallback(() => setIsOpen((v) => !v), []);
+  const [isOpen, setIsOpen] = React10.useState(initial);
+  const open = React10.useCallback(() => setIsOpen(true), []);
+  const close = React10.useCallback(() => setIsOpen(false), []);
+  const toggle = React10.useCallback(() => setIsOpen((v) => !v), []);
   return { isOpen, open, close, toggle };
 }
 var counter = 0;
 function useToast() {
-  const [toasts, setToasts] = React9.useState([]);
-  const addToast = React9.useCallback((props) => {
+  const [toasts, setToasts] = React10.useState([]);
+  const addToast = React10.useCallback((props) => {
     const id = `toast-${++counter}`;
     setToasts((prev) => [...prev, { ...props, id }]);
     return id;
   }, []);
-  const removeToast = React9.useCallback((id) => {
+  const removeToast = React10.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return { toasts, addToast, removeToast };
@@ -3204,7 +3292,7 @@ exports.Pagination = Pagination;
 exports.Progress = Progress;
 exports.ROS2Diagnostics = ROS2Diagnostics;
 exports.Rating = Rating;
-exports.Select = Select;
+exports.Select = Select_default;
 exports.Sidebar = Sidebar;
 exports.Slider = Slider;
 exports.Spinner = Spinner;