mywhy-ui 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -545,7 +545,7 @@ function MultiSelect({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  const sizeClasses11 = {
+  const sizeClasses13 = {
     sm: "h-7 px-2 text-sm",
     md: "h-8 px-3 text-base",
     lg: "h-9 px-4 text-base"
@@ -563,7 +563,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",
-            sizeClasses11[size]
+            sizeClasses13[size]
           ].join(" "),
           onClick: () => !disabled && setIsOpen(!isOpen),
           children: [
@@ -1613,6 +1613,412 @@ function Sidebar({
     }
   );
 }
+function Table({
+  columns,
+  data,
+  striped = true,
+  hoverable = true,
+  compact = false,
+  className = "",
+  emptyMessage = "No data"
+}) {
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-8 text-ink-faint text-sm", children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overflow-x-auto border border-outline rounded-lg ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "bg-surface-gray border-b border-outline", children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        style: { width: col.width },
+        className: `
+                  ${compact ? "px-3 py-2" : "px-4 py-3"}
+                  text-left text-xs font-semibold text-ink-faint uppercase tracking-wide
+                  ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : "text-left"}
+                `,
+        children: col.label
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+      "tr",
+      {
+        className: `
+                border-b border-outline last:border-b-0
+                ${striped && rowIdx % 2 === 1 ? "bg-surface-gray/50" : ""}
+                ${hoverable ? "hover:bg-surface-overlay transition-colors" : ""}
+              `,
+        children: columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+          "td",
+          {
+            style: { width: col.width },
+            className: `
+                    ${compact ? "px-3 py-2" : "px-4 py-3"}
+                    text-sm text-ink
+                    ${col.align === "center" ? "text-center" : col.align === "right" ? "text-right" : "text-left"}
+                  `,
+            children: col.render ? col.render(row[col.key], row) : row[col.key]
+          },
+          `${rowIdx}-${col.key}`
+        ))
+      },
+      rowIdx
+    )) })
+  ] }) });
+}
+var ChevronLeftIcon = ({ 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: "15 18 9 12 15 6" }) });
+var ChevronRightIcon = ({ 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: "9 18 15 12 9 6" }) });
+function Pagination({
+  current,
+  total,
+  onChange,
+  size = "md",
+  showInfo = true,
+  maxVisible = 5,
+  className = ""
+}) {
+  const sizeClass = size === "sm" ? "text-xs px-2 py-1" : "text-sm px-3 py-2";
+  const getPages = () => {
+    const pages2 = [];
+    const halfVisible = Math.floor(maxVisible / 2);
+    let start = Math.max(1, current - halfVisible);
+    let end = Math.min(total, current + halfVisible);
+    if (start === 1) {
+      end = Math.min(total, maxVisible);
+    } else if (end === total) {
+      start = Math.max(1, total - maxVisible + 1);
+    }
+    if (start > 1) pages2.push(1);
+    if (start > 2) pages2.push("...");
+    for (let i = start; i <= end; i++) {
+      pages2.push(i);
+    }
+    if (end < total - 1) pages2.push("...");
+    if (end < total) pages2.push(total);
+    return pages2;
+  };
+  const pages = getPages();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    showInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-ink-faint", children: [
+      "Page ",
+      current,
+      " of ",
+      total
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onChange(Math.max(1, current - 1)),
+        disabled: current === 1,
+        className: `
+          flex items-center justify-center rounded border border-outline
+          hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed disabled:hover:bg-transparent
+          transition-colors ${sizeClass}
+        `,
+        title: "Previous page",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { size: size === "sm" ? 12 : 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: pages.map(
+      (page, i) => page === "..." ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 text-ink-faint", children: "..." }, `ellipsis-${i}`) : /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onChange(page),
+          className: `
+                flex items-center justify-center rounded border
+                transition-colors ${sizeClass}
+                ${current === page ? "bg-brand text-white border-brand" : "border-outline hover:bg-surface-overlay"}
+              `,
+          children: page
+        },
+        page
+      )
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onChange(Math.min(total, current + 1)),
+        disabled: current === total,
+        className: `
+          flex items-center justify-center rounded border border-outline
+          hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed disabled:hover:bg-transparent
+          transition-colors ${sizeClass}
+        `,
+        title: "Next page",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { size: size === "sm" ? 12 : 16 })
+      }
+    )
+  ] });
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col items-center justify-center py-12 px-4 ${className}`, children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-4xl mb-4", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-ink mb-2", children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ink-faint mb-6 text-center max-w-sm", children: description }),
+    action && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: action.onClick,
+        className: "px-4 py-2 bg-brand text-white rounded-md hover:bg-brand-600 transition-colors text-sm font-medium",
+        children: action.label
+      }
+    )
+  ] });
+}
+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 = {
+  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"
+};
+function NumberInput({
+  value,
+  onChange,
+  step = 1,
+  min,
+  max,
+  size = "md",
+  disabled = false,
+  placeholder,
+  className = ""
+}) {
+  const [isEditing, setIsEditing] = React9.useState(false);
+  const handleIncrement = () => {
+    const newValue = value + step;
+    if (max === void 0 || newValue <= max) {
+      onChange(newValue);
+    }
+  };
+  const handleDecrement = () => {
+    const newValue = value - step;
+    if (min === void 0 || newValue >= min) {
+      onChange(newValue);
+    }
+  };
+  const handleInputChange = (e) => {
+    const newValue = parseFloat(e.target.value);
+    if (!isNaN(newValue)) {
+      let val = newValue;
+      if (min !== void 0 && val < min) val = min;
+      if (max !== void 0 && val > max) val = max;
+      onChange(val);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative inline-flex items-center border border-outline rounded-md bg-surface ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        value,
+        onChange: handleInputChange,
+        onFocus: () => setIsEditing(true),
+        onBlur: () => setIsEditing(false),
+        disabled,
+        placeholder,
+        step,
+        min,
+        max,
+        className: `
+          flex-1 bg-transparent outline-none text-ink disabled:text-ink-faint disabled:cursor-not-allowed
+          ${sizeClasses10[size]}
+        `
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col border-l border-outline", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleIncrement,
+          disabled: disabled || max !== void 0 && value >= max,
+          className: "flex-1 px-1 hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed transition-colors",
+          title: "Increment",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, { size: size === "sm" ? 12 : size === "md" ? 14 : 16 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleDecrement,
+          disabled: disabled || min !== void 0 && value <= min,
+          className: "flex-1 px-1 hover:bg-surface-overlay disabled:text-ink-faint disabled:cursor-not-allowed transition-colors border-t border-outline",
+          title: "Decrement",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { size: size === "sm" ? 12 : size === "md" ? 14 : 16 })
+        }
+      )
+    ] })
+  ] });
+}
+var CopyIcon = ({ size }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "2", width: "8", height: "4", rx: "1", ry: "1" })
+] });
+var CheckIcon = ({ size, className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
+function CodeBlock({
+  code,
+  language = "text",
+  copyable = true,
+  numbered = false,
+  maxHeight = "max-h-96",
+  className = ""
+}) {
+  const [copied, setCopied] = React9.useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+  const lines = code.split("\n");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative bg-ink rounded-lg overflow-hidden border border-outline ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between bg-surface-gray px-4 py-2 border-b border-outline", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-ink-faint font-mono uppercase", children: language }),
+      copyable && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "p-1 rounded hover:bg-surface-overlay transition-colors text-ink-faint hover:text-ink",
+          title: "Copy to clipboard",
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "currentColor" }, className: "text-status-online", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { size: 14 }) }) : /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { size: 14 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `overflow-auto ${maxHeight}`, children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-4 text-sm font-mono text-sky-100", children: numbered ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-faint select-none", children: String(i + 1).padStart(3, " ") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: line })
+    ] }, i)) }) : code }) })
+  ] });
+}
+var statusColors = {
+  completed: {
+    dot: "bg-status-online border-status-online",
+    line: "bg-status-online",
+    text: "text-status-online"
+  },
+  pending: {
+    dot: "bg-ink-light border-ink-light",
+    line: "bg-ink-faint",
+    text: "text-ink-faint"
+  },
+  error: {
+    dot: "bg-danger-icon border-danger-icon",
+    line: "bg-danger-icon",
+    text: "text-danger-text"
+  },
+  "in-progress": {
+    dot: "bg-brand border-brand",
+    line: "bg-brand",
+    text: "text-brand"
+  }
+};
+function Timeline({
+  items,
+  orientation = "vertical",
+  className = ""
+}) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `space-y-4 ${className}`, children: items.map((item, index) => {
+      const colors = statusColors[item.status];
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `
+                    w-4 h-4 rounded-full border-2 flex-shrink-0
+                    flex items-center justify-center bg-white
+                    ${colors.dot}
+                  `,
+              children: item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-2xs", children: item.icon })
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-0.5 h-12 ${colors.line}` })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 py-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { className: `font-semibold text-sm ${colors.text}`, children: item.label }),
+            item.timestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-ink-faint", children: typeof item.timestamp === "string" ? item.timestamp : new Date(item.timestamp).toLocaleTimeString("en-GB", {
+              hour12: false,
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit"
+            }) })
+          ] }),
+          item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-ink-faint mt-1", children: item.description })
+        ] })
+      ] }, item.id);
+    }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex gap-4 overflow-x-auto pb-2 ${className}`, children: items.map((item, index) => {
+    const colors = statusColors[item.status];
+    index === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center flex-shrink-0 gap-2 min-w-fit", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-0.5 w-6 ${statusColors[items[index - 1].status].line}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `
+                  w-5 h-5 rounded-full border-2 flex items-center justify-center bg-white
+                  ${colors.dot}
+                `,
+            children: item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white text-2xs", children: item.icon })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-xs font-semibold ${colors.text}`, children: item.label }),
+        item.timestamp && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xs text-ink-faint", children: typeof item.timestamp === "string" ? item.timestamp : new Date(item.timestamp).toLocaleTimeString("en-GB", {
+          hour12: false,
+          hour: "2-digit",
+          minute: "2-digit"
+        }) })
+      ] })
+    ] }, item.id);
+  }) });
+}
+var sizeClasses11 = {
+  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"
+};
+var themeClasses5 = {
+  gray: "bg-surface-gray border-outline text-ink",
+  dark: "bg-ink text-white border-ink-faint",
+  brand: "bg-brand border-brand text-white"
+};
+function Kbd({
+  keys,
+  size = "sm",
+  theme = "gray",
+  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: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "kbd",
+      {
+        className: `
+              inline-flex items-center justify-center rounded font-mono font-medium
+              border border-b-2 shadow-sm
+              ${sizeClasses11[size]}
+              ${themeClasses5[theme]}
+            `,
+        children: key
+      }
+    ),
+    i < keyArray.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ink-faint text-xs", children: "+" })
+  ] }, key)) });
+}
 var statusConfig = {
   online: {
     label: "Online",
@@ -1687,7 +2093,7 @@ function StatusBadge({
     }
   );
 }
-var sizeClasses10 = {
+var sizeClasses12 = {
   sm: "text-xs gap-1.5",
   md: "text-sm gap-2",
   lg: "text-base gap-2"
@@ -1706,7 +2112,7 @@ function ConnectionIndicator({
   className = ""
 }) {
   const status = connected ? "online" : "offline";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center ${sizeClasses10[size]} ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center ${sizeClasses12[size]} ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       StatusBadge,
       {
@@ -1760,16 +2166,21 @@ exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.CodeBlock = CodeBlock;
 exports.ConnectionIcon = ConnectionIcon;
 exports.ConnectionIndicator = ConnectionIndicator;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Dropdown = Dropdown;
+exports.EmptyState = EmptyState;
 exports.FileUploader = FileUploader;
 exports.FormControl = FormControl;
 exports.Input = Input;
+exports.Kbd = Kbd;
 exports.Link = Link;
 exports.MultiSelect = MultiSelect;
+exports.NumberInput = NumberInput;
+exports.Pagination = Pagination;
 exports.Progress = Progress;
 exports.Rating = Rating;
 exports.Select = Select;
@@ -1778,9 +2189,11 @@ exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.StatusBadge = StatusBadge;
 exports.Switch = Switch;
+exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Textarea = Textarea;
 exports.TimePicker = TimePicker;
+exports.Timeline = Timeline;
 exports.Toast = Toast;
 exports.ToastContainer = ToastContainer;
 exports.Tooltip = Tooltip;