mywhy-ui 0.4.0 → 0.5.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React9, { useRef, useEffect, useState, useCallback } from 'react';
+import React10, { useMemo, useCallback, useRef, useEffect, useState } from 'react';
 import { Play, Pause, AlertCircle, Download, CheckCircle2, HelpCircle, AlertTriangle } from 'lucide-react';
 import { parseRos2idl, parse } from '@foxglove/rosmsg';
 import { MessageReader, MessageWriter } from '@foxglove/rosmsg2-serialization';
@@ -178,43 +178,117 @@ function Input({
     error && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "text-sm font-medium text-ink-gray", children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ 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__ */ jsx("option", { value, children: label2 }, value);
-      }) }),
-      /* @__PURE__ */ jsx("span", { className: "absolute right-2.5 top-1/2 -translate-y-1/2 pointer-events-none text-ink-faint", children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
-    ] }),
-    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-danger-text", children: error })
+  onChange,
+  htmlId,
+  prefix
+}) => {
+  const selectOptions = useMemo(() => {
+    return options?.map((option) => {
+      if (typeof option === "string") {
+        return {
+          label: option,
+          value: option
+        };
+      }
+      return option;
+    }).filter(Boolean) || [];
+  }, [options]);
+  const handleChange = useCallback(
+    (e) => {
+      onChange?.(e);
+    },
+    [onChange]
+  );
+  const heightClasses = useMemo(() => {
+    return {
+      sm: "h-8",
+      md: "h-9",
+      lg: "h-10",
+      xl: "h-11"
+    }[size];
+  }, [size]);
+  const fontSizeClasses = useMemo(() => {
+    return {
+      sm: "text-sm",
+      md: "text-sm",
+      lg: "text-base",
+      xl: "text-base"
+    }[size];
+  }, [size]);
+  const paddingClasses2 = 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 = 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 = 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__ */ jsxs("div", { className: "relative w-full", children: [
+    prefix && /* @__PURE__ */ 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__ */ 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__ */ jsx("option", { value: "", children: placeholder }),
+          selectOptions.map((option) => /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: option.value,
+              disabled: option.disabled,
+              children: option.label
+            },
+            option.value
+          ))
+        ]
+      }
+    )
   ] });
-}
+};
+var Select_default = Select;
 function Switch({
   label,
   description,
@@ -318,7 +392,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",
@@ -331,10 +405,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,
@@ -345,7 +426,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__ */ jsx(
       "img",
@@ -357,7 +438,14 @@ function Avatar({
     );
   }
   const displayInitials = initials ? initials.slice(0, 2).toUpperCase() : alt ? alt.slice(0, 2).toUpperCase() : "?";
-  return /* @__PURE__ */ jsx("span", { className: `${baseClass} ${themeClasses[theme]} ${className}`, children: displayInitials });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `${baseClass} ${themeClasses[theme]} ${className}`,
+      style: themeStyles[theme],
+      children: displayInitials
+    }
+  );
 }
 var paddingClasses = {
   none: "",
@@ -417,7 +505,7 @@ function Checkbox({
     error && /* @__PURE__ */ 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"
@@ -444,7 +532,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(" ");
@@ -482,7 +570,7 @@ function Alert({
   className = "",
   ...props
 }) {
-  const [isVisible, setIsVisible] = React9.useState(true);
+  const [isVisible, setIsVisible] = React10.useState(true);
   const handleClose = () => {
     setIsVisible(false);
     onClose?.();
@@ -528,8 +616,8 @@ function MultiSelect({
   className = "",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const [searchTerm, setSearchTerm] = React9.useState("");
+  const [isOpen, setIsOpen] = React10.useState(false);
+  const [searchTerm, setSearchTerm] = React10.useState("");
   const containerRef = useRef(null);
   const inputRef = useRef(null);
   const filteredOptions = searchable ? options.filter(
@@ -560,7 +648,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"
@@ -578,7 +666,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: [
@@ -701,7 +789,7 @@ function Tabs({
   tabsClassName = "",
   contentClassName = ""
 }) {
-  const [internalActiveTab, setInternalActiveTab] = React9.useState(activeTab || tabs[0]?.value || "");
+  const [internalActiveTab, setInternalActiveTab] = React10.useState(activeTab || tabs[0]?.value || "");
   const active = activeTab !== void 0 ? activeTab : internalActiveTab;
   const handleTabChange = (value) => {
     setInternalActiveTab(value);
@@ -758,7 +846,7 @@ function Breadcrumbs({
   className = "",
   ...props
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: `flex items-center gap-0 text-sm ${className}`, ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+  return /* @__PURE__ */ jsx("nav", { className: `flex items-center gap-0 text-sm ${className}`, ...props, children: items.map((item, index) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
     index > 0 && /* @__PURE__ */ jsx("span", { className: "text-ink-light px-1.5", children: separator }),
     item.href ? /* @__PURE__ */ jsxs(
       "a",
@@ -800,7 +888,7 @@ function Dropdown({
   triggerClassName = "",
   menuClassName = ""
 }) {
-  const [internalIsOpen, setInternalIsOpen] = React9.useState(false);
+  const [internalIsOpen, setInternalIsOpen] = React10.useState(false);
   const containerRef = useRef(null);
   const menuRef = useRef(null);
   const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
@@ -867,7 +955,7 @@ function Dropdown({
     )
   ] });
 }
-var sizeClasses7 = {
+var sizeClasses6 = {
   sm: "max-w-sm",
   md: "max-w-md",
   lg: "max-w-lg",
@@ -914,7 +1002,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__ */ jsxs("div", { className: "flex items-center justify-between px-5 py-4 border-b border-outline shrink-0", children: [
                 /* @__PURE__ */ jsx("h2", { id: "dialog-title", className: "text-md font-semibold text-ink", children: title }),
@@ -1092,9 +1180,9 @@ function FileUploader({
   className = "",
   ...props
 }) {
-  const [dragActive, setDragActive] = React9.useState(false);
-  const [files, setFiles] = React9.useState([]);
-  const inputRef = React9.useRef(null);
+  const [dragActive, setDragActive] = React10.useState(false);
+  const [files, setFiles] = React10.useState([]);
+  const inputRef = React10.useRef(null);
   const handleFiles = (fileList) => {
     if (!fileList) return;
     let newFiles = Array.from(fileList);
@@ -1244,7 +1332,7 @@ function DatePicker({
   className = "",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9.useState(false);
+  const [isOpen, setIsOpen] = React10.useState(false);
   const containerRef = useRef(null);
   const handleDateChange = (e) => {
     onChange?.(e.target.value);
@@ -1335,7 +1423,7 @@ function TimePicker({
   className = "",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React9.useState(false);
+  const [isOpen, setIsOpen] = React10.useState(false);
   const containerRef = useRef(null);
   const handleTimeChange = (e) => {
     onChange?.(e.target.value);
@@ -1414,7 +1502,7 @@ function TimePicker({
     error && /* @__PURE__ */ 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"
@@ -1445,11 +1533,11 @@ function Progress({
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: `w-full bg-surface-gray rounded-full overflow-hidden ${sizeClasses8[size]}`, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: `w-full bg-surface-gray rounded-full overflow-hidden ${sizeClasses7[size]}`, children: /* @__PURE__ */ 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(" "),
@@ -1458,7 +1546,7 @@ function Progress({
     ) })
   ] });
 }
-var sizeClasses9 = {
+var sizeClasses8 = {
   sm: "w-4 h-4",
   md: "w-5 h-5",
   lg: "w-6 h-6"
@@ -1479,7 +1567,7 @@ function Rating({
   className = "",
   ...props
 }) {
-  const [hoverValue, setHoverValue] = React9.useState(0);
+  const [hoverValue, setHoverValue] = React10.useState(0);
   const displayValue = hoverValue || value;
   return /* @__PURE__ */ jsxs("div", { className, ...props, children: [
     label && /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-ink mb-2", children: label }),
@@ -1494,7 +1582,7 @@ function Rating({
         children: /* @__PURE__ */ 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__ */ 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" })
@@ -1787,7 +1875,7 @@ function EmptyState({
 }
 var ChevronUpIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" }) });
 var ChevronDownIcon = ({ size }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ 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"
@@ -1841,7 +1929,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]}
         `
       }
     ),
@@ -2001,7 +2089,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"
@@ -2018,14 +2106,14 @@ function Kbd({
   className = ""
 }) {
   const keyArray = Array.isArray(keys) ? keys : [keys];
-  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center gap-1 ${className}`, children: keyArray.map((key, i) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+  return /* @__PURE__ */ jsx("span", { className: `inline-flex items-center gap-1 ${className}`, children: keyArray.map((key, i) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
     /* @__PURE__ */ 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
@@ -2108,7 +2196,7 @@ function StatusBadge({
     }
   );
 }
-var sizeClasses12 = {
+var sizeClasses11 = {
   sm: "text-xs gap-1.5",
   md: "text-sm gap-2",
   lg: "text-base gap-2"
@@ -2127,7 +2215,7 @@ function ConnectionIndicator({
   className = ""
 }) {
   const status = connected ? "online" : "offline";
-  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center ${sizeClasses12[size]} ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `inline-flex items-center ${sizeClasses11[size]} ${className}`, children: [
     /* @__PURE__ */ jsx(
       StatusBadge,
       {
@@ -3069,7 +3157,7 @@ var ROS2Diagnostics = ({
         {
           variant: isPaused ? "solid" : "subtle",
           theme: "brand",
-          size: "sm",
+          size: "md",
           onClick: () => {
             if (isPaused) clearDiagHistory();
             setIsPaused(!isPaused);
@@ -3172,6 +3260,6 @@ function useToast() {
   return { toasts, addToast, removeToast };
 }
 
-export { Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CodeBlock, ConnectionIcon, ConnectionIndicator, DatePicker, Dialog, Dropdown, EmptyState, FileUploader, FormControl, Input, Kbd, Link, MultiSelect, NumberInput, Pagination, Progress, ROS2Diagnostics, Rating, Select, Sidebar, Slider, Spinner, StatusBadge, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, Tooltip, useDisclosure, useToast };
+export { Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CodeBlock, ConnectionIcon, ConnectionIndicator, DatePicker, Dialog, Dropdown, EmptyState, FileUploader, FormControl, Input, Kbd, Link, MultiSelect, NumberInput, Pagination, Progress, ROS2Diagnostics, Rating, Select_default as Select, Sidebar, Slider, Spinner, StatusBadge, Switch, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, Tooltip, useDisclosure, useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map