@prmichaelsen/agentbase-ux 0.0.2

package/dist/index.js

@@ -0,0 +1,746 @@
+// src/lib/theming.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var darkTheme = {
+  // Layout
+  page: "bg-bg-page text-text-primary",
+  sidebar: "bg-bg-sidebar border-r border-border-default",
+  card: "bg-bg-card border border-border-default rounded-lg",
+  elevated: "bg-bg-elevated",
+  hover: "hover:bg-bg-hover",
+  active: "bg-bg-active",
+  border: "border border-border-default",
+  borderSubtle: "border border-border-subtle",
+  input: "bg-bg-input border border-border-default text-text-primary placeholder:text-text-muted",
+  inputFocus: "focus:border-brand-primary focus:ring-1 focus:ring-brand-primary/30",
+  // Text
+  textPrimary: "text-text-primary",
+  textSecondary: "text-text-secondary",
+  textMuted: "text-text-muted",
+  // Buttons
+  buttonPrimary: "bg-brand-primary text-white hover:bg-brand-primary/90",
+  buttonSecondary: "bg-brand-secondary text-white hover:bg-brand-secondary/90",
+  buttonGhost: "bg-transparent text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+  buttonDanger: "bg-brand-danger text-white hover:bg-brand-danger/90",
+  buttonSuccess: "bg-brand-success text-white hover:bg-brand-success/90",
+  buttonWarning: "bg-brand-warning text-white hover:bg-brand-warning/90",
+  // Overlay
+  overlay: "bg-black/50 backdrop-blur-sm",
+  // Toggle
+  toggleOn: "bg-brand-primary",
+  toggleOff: "bg-bg-elevated",
+  // Slider
+  sliderTrack: "bg-bg-elevated",
+  sliderFill: "bg-brand-primary",
+  // Tabs
+  tabActive: "bg-brand-primary text-white",
+  tabInactive: "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+  // Menu
+  menuItem: "text-text-secondary hover:text-text-primary hover:bg-bg-hover",
+  menuItemHover: "bg-bg-hover text-text-primary",
+  menuItemDanger: "text-brand-danger hover:bg-brand-danger/10",
+  // Messages
+  messageSelf: "bg-brand-primary/20 border-l-2 border-brand-primary/50",
+  messageOther: "bg-bg-card",
+  messageAgent: "bg-brand-accent/10 border-l-2 border-brand-accent/50",
+  messageSystem: "bg-bg-elevated text-text-muted text-sm italic",
+  // Status
+  statusOnline: "bg-brand-success",
+  statusOffline: "bg-text-muted",
+  statusAway: "bg-brand-warning",
+  // Badges
+  badgeDefault: "bg-bg-elevated text-text-secondary",
+  badgeSuccess: "bg-brand-success/15 text-brand-success",
+  badgeWarning: "bg-brand-warning/15 text-brand-warning",
+  badgeDanger: "bg-brand-danger/15 text-brand-danger",
+  badgeInfo: "bg-brand-info/15 text-brand-info",
+  // Notifications
+  notificationBadge: "bg-brand-danger text-white",
+  notificationUnread: "bg-brand-primary/5",
+  notificationRead: "bg-bg-card"
+};
+var lightTheme = {
+  // Layout
+  page: "bg-bg-page text-text-primary",
+  sidebar: "bg-bg-sidebar border-r border-border-default",
+  card: "bg-bg-card border border-border-default rounded-lg shadow-sm",
+  elevated: "bg-bg-elevated",
+  hover: "hover:bg-bg-hover",
+  active: "bg-bg-active",
+  border: "border border-border-default",
+  borderSubtle: "border border-border-subtle",
+  input: "bg-bg-input border border-border-default text-text-primary placeholder:text-text-muted",
+  inputFocus: "focus:border-brand-primary focus:ring-1 focus:ring-brand-primary/30",
+  // Text
+  textPrimary: "text-text-primary",
+  textSecondary: "text-text-secondary",
+  textMuted: "text-text-muted",
+  // Buttons
+  buttonPrimary: "bg-brand-primary text-white hover:bg-brand-primary/90",
+  buttonSecondary: "bg-brand-secondary text-white hover:bg-brand-secondary/90",
+  buttonGhost: "bg-transparent text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+  buttonDanger: "bg-brand-danger text-white hover:bg-brand-danger/90",
+  buttonSuccess: "bg-brand-success text-white hover:bg-brand-success/90",
+  buttonWarning: "bg-brand-warning text-white hover:bg-brand-warning/90",
+  // Overlay
+  overlay: "bg-black/40 backdrop-blur-sm",
+  // Toggle
+  toggleOn: "bg-brand-primary",
+  toggleOff: "bg-border-default",
+  // Slider
+  sliderTrack: "bg-bg-elevated",
+  sliderFill: "bg-brand-primary",
+  // Tabs
+  tabActive: "bg-brand-primary text-white",
+  tabInactive: "text-text-secondary hover:bg-bg-hover hover:text-text-primary",
+  // Menu
+  menuItem: "text-text-secondary hover:text-text-primary hover:bg-bg-hover",
+  menuItemHover: "bg-bg-hover text-text-primary",
+  menuItemDanger: "text-brand-danger hover:bg-brand-danger/10",
+  // Messages
+  messageSelf: "bg-brand-primary/10 border-l-2 border-brand-primary/40",
+  messageOther: "bg-bg-card",
+  messageAgent: "bg-brand-accent/5 border-l-2 border-brand-accent/40",
+  messageSystem: "bg-bg-elevated text-text-muted text-sm italic",
+  // Status
+  statusOnline: "bg-brand-success",
+  statusOffline: "bg-text-muted",
+  statusAway: "bg-brand-warning",
+  // Badges
+  badgeDefault: "bg-bg-elevated text-text-secondary",
+  badgeSuccess: "bg-brand-success/15 text-brand-success",
+  badgeWarning: "bg-brand-warning/15 text-brand-warning",
+  badgeDanger: "bg-brand-danger/15 text-brand-danger",
+  badgeInfo: "bg-brand-info/15 text-brand-info",
+  // Notifications
+  notificationBadge: "bg-brand-danger text-white",
+  notificationUnread: "bg-brand-primary/5",
+  notificationRead: "bg-bg-card"
+};
+var themes = { dark: darkTheme, light: lightTheme };
+var ThemingContext = createContext(darkTheme);
+function ThemingProvider({
+  theme = "dark",
+  children
+}) {
+  return /* @__PURE__ */ jsx(ThemingContext.Provider, { value: themes[theme], children: /* @__PURE__ */ jsx("div", { "data-theme": theme, className: themes[theme].page, children }) });
+}
+function useTheme() {
+  return useContext(ThemingContext);
+}
+
+// src/components/Button.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-base",
+  lg: "px-6 py-3 text-lg"
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  icon,
+  children,
+  fullWidth = false,
+  className = "",
+  disabled = false,
+  ...props
+}) {
+  const t = useTheme();
+  const variantStyles = {
+    primary: t.buttonPrimary,
+    secondary: t.buttonSecondary,
+    danger: t.buttonDanger,
+    success: t.buttonSuccess,
+    ghost: t.buttonGhost
+  };
+  const combinedClassName = [
+    "font-medium rounded-lg transition-all flex items-center justify-center gap-2",
+    variantStyles[variant],
+    sizeStyles[size],
+    fullWidth ? "w-full" : "",
+    disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("button", { className: combinedClassName, disabled, ...props, children: [
+    icon && /* @__PURE__ */ jsx2("span", { className: "flex-shrink-0", children: icon }),
+    children
+  ] });
+}
+
+// src/components/Modal.tsx
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var maxWidthClasses = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+  xl: "max-w-xl",
+  "2xl": "max-w-2xl"
+};
+function Modal({
+  isOpen,
+  onClose,
+  children,
+  title,
+  style,
+  maxWidth = "md",
+  persistent = false
+}) {
+  const t = useTheme();
+  useEffect(() => {
+    if (persistent) return;
+    const handleEscapeKey = (event) => {
+      if (event.key === "Escape" && isOpen) onClose();
+    };
+    document.addEventListener("keydown", handleEscapeKey);
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscapeKey);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, onClose, persistent]);
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) onClose();
+  };
+  if (!isOpen) return null;
+  if (typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `fixed inset-0 z-[55] flex items-center justify-center overflow-hidden ${t.overlay}`,
+        onClick: persistent ? void 0 : handleBackdropClick,
+        style: { width: "100vw", height: "100vh", top: 0, left: 0, margin: 0, paddingTop: "env(safe-area-inset-top)" },
+        children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: `relative max-h-[90vh] w-full ${maxWidthClasses[maxWidth]} overflow-auto rounded-xl ${t.card} p-6 shadow-xl m-4`,
+            onClick: (e) => e.stopPropagation(),
+            style: { margin: "1rem", ...style || {} },
+            children: [
+              !persistent && /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: `absolute top-4 right-4 z-10 inline-flex h-8 w-8 items-center justify-center rounded-full ${t.textMuted} ${t.hover} transition-colors`,
+                  onClick: onClose,
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ jsx3("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              ),
+              title && /* @__PURE__ */ jsx3("div", { className: "mb-4 pr-8", children: /* @__PURE__ */ jsx3("h3", { className: `text-xl font-bold ${t.textPrimary}`, children: title }) }),
+              /* @__PURE__ */ jsx3("div", { children })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/ConfirmationModal.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var iconPaths = {
+  danger: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
+  warning: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z",
+  info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+};
+function ConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  variant = "danger",
+  isLoading = false
+}) {
+  const t = useTheme();
+  const variantStyles = {
+    danger: { icon: "bg-brand-danger", button: t.buttonDanger },
+    warning: { icon: "bg-brand-warning", button: t.buttonWarning },
+    info: { icon: "bg-brand-info", button: t.buttonSecondary }
+  };
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ jsx4(Modal, { isOpen, onClose: isLoading ? () => {
+  } : onClose, children: /* @__PURE__ */ jsxs3("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsx4("div", { className: "mb-6 flex justify-center", children: /* @__PURE__ */ jsx4("div", { className: `flex h-16 w-16 items-center justify-center rounded-full ${styles.icon}`, children: /* @__PURE__ */ jsx4("svg", { className: "h-8 w-8 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: iconPaths[variant] }) }) }) }),
+    /* @__PURE__ */ jsx4("h3", { className: `mb-4 text-xl font-bold text-center ${t.textPrimary}`, children: title }),
+    /* @__PURE__ */ jsx4("div", { className: `mb-6 text-center whitespace-pre-line ${t.textSecondary}`, children: message }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: onClose,
+          disabled: isLoading,
+          className: `flex-1 px-4 py-2 rounded-lg transition-colors ${t.buttonGhost} ${t.border} disabled:opacity-50 disabled:cursor-not-allowed`,
+          children: cancelText
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          onClick: onConfirm,
+          disabled: isLoading,
+          className: `flex-1 px-4 py-2 rounded-lg transition-colors ${styles.button} disabled:opacity-50 disabled:cursor-not-allowed`,
+          children: isLoading ? "Processing..." : confirmText
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/components/MenuItem.tsx
+import { Loader2 } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function MenuItem({ icon: Icon, label, onClick, disabled, danger, loading, className, suffix }) {
+  const t = useTheme();
+  const colorClasses = danger ? t.menuItemDanger : t.menuItem;
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      className: `w-full flex items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors ${colorClasses} disabled:opacity-50${className ? ` ${className}` : ""}`,
+      children: [
+        loading ? /* @__PURE__ */ jsx5(Loader2, { className: "w-3.5 h-3.5 animate-spin" }) : /* @__PURE__ */ jsx5(Icon, { className: "w-3.5 h-3.5" }),
+        label,
+        suffix && /* @__PURE__ */ jsx5("span", { className: "ml-auto", children: suffix })
+      ]
+    }
+  );
+}
+
+// src/components/Paginator.tsx
+import { useState, useRef, useEffect as useEffect2, useCallback } from "react";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Paginator({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblings = 2
+}) {
+  const t = useTheme();
+  const [editValue, setEditValue] = useState(String(currentPage));
+  const [editing, setEditing] = useState(false);
+  const inputRef = useRef(null);
+  useEffect2(() => {
+    if (!editing) setEditValue(String(currentPage));
+  }, [currentPage, editing]);
+  const clamp = useCallback((page) => Math.max(1, Math.min(totalPages, page)), [totalPages]);
+  const commitEdit = useCallback(() => {
+    setEditing(false);
+    const parsed = parseInt(editValue, 10);
+    if (!isNaN(parsed)) {
+      const clamped = clamp(parsed);
+      onPageChange(clamped);
+      setEditValue(String(clamped));
+    } else {
+      setEditValue(String(currentPage));
+    }
+  }, [editValue, clamp, onPageChange, currentPage]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Enter") {
+      commitEdit();
+      inputRef.current?.blur();
+    } else if (e.key === "Escape") {
+      setEditing(false);
+      setEditValue(String(currentPage));
+      inputRef.current?.blur();
+    }
+  }, [commitEdit, currentPage]);
+  const pages = [];
+  const start = Math.max(1, currentPage - siblings);
+  const end = Math.min(totalPages, currentPage + siblings);
+  for (let i = start; i <= end; i++) {
+    if (i !== currentPage) pages.push(i);
+  }
+  const before = pages.filter((p) => p < currentPage);
+  const after = pages.filter((p) => p > currentPage);
+  const navBtn = `p-1 ${t.textMuted} ${t.hover} disabled:opacity-30 disabled:cursor-not-allowed transition-colors rounded`;
+  const pageBtn = `px-1.5 py-0.5 text-xs rounded transition-colors ${t.textMuted} ${t.hover}`;
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-center gap-0.5", children: [
+    /* @__PURE__ */ jsx6("button", { onClick: () => onPageChange(1), disabled: currentPage <= 1, className: navBtn, "aria-label": "First page", children: /* @__PURE__ */ jsx6(ChevronsLeft, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx6("button", { onClick: () => onPageChange(clamp(currentPage - 1)), disabled: currentPage <= 1, className: navBtn, "aria-label": "Previous page", children: /* @__PURE__ */ jsx6(ChevronLeft, { className: "w-4 h-4" }) }),
+    before.map((p) => /* @__PURE__ */ jsx6("button", { onClick: () => onPageChange(p), className: pageBtn, children: p }, p)),
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        inputMode: "numeric",
+        value: editing ? editValue : String(currentPage),
+        onChange: (e) => setEditValue(e.target.value),
+        onFocus: () => {
+          setEditing(true);
+          setTimeout(() => inputRef.current?.select(), 0);
+        },
+        onBlur: commitEdit,
+        onKeyDown: handleKeyDown,
+        className: `w-8 text-center text-xs font-medium rounded-md py-0.5 outline-none ${t.tabActive} ${t.inputFocus}`,
+        "aria-label": "Current page"
+      }
+    ),
+    after.map((p) => /* @__PURE__ */ jsx6("button", { onClick: () => onPageChange(p), className: pageBtn, children: p }, p)),
+    /* @__PURE__ */ jsx6("button", { onClick: () => onPageChange(clamp(currentPage + 1)), disabled: currentPage >= totalPages, className: navBtn, "aria-label": "Next page", children: /* @__PURE__ */ jsx6(ChevronRight, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx6("button", { onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, className: navBtn, "aria-label": "Last page", children: /* @__PURE__ */ jsx6(ChevronsRight, { className: "w-4 h-4" }) })
+  ] });
+}
+
+// src/components/Popover.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Popover({ open, anchorRef, onClose, children, className, anchor = "below" }) {
+  const t = useTheme();
+  const popoverRef = useRef2(null);
+  const [adjustedStyle, setAdjustedStyle] = useState2({});
+  useEffect3(() => {
+    if (!open) return;
+    function handlePointerDown(e) {
+      const target = e.target;
+      if (popoverRef.current && !popoverRef.current.contains(target) && anchorRef.current && !anchorRef.current.contains(target)) {
+        onClose();
+      }
+    }
+    function handleKeyDown(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("touchstart", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("touchstart", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onClose, anchorRef]);
+  useEffect3(() => {
+    if (!open || !popoverRef.current || !anchorRef.current) return;
+    const anchorRect = anchorRef.current.getBoundingClientRect();
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    const padding = 16;
+    const style2 = { position: "absolute", zIndex: 50 };
+    let left = anchorRect.left + window.scrollX;
+    if (left + popoverRect.width > window.innerWidth - padding) {
+      left = Math.max(padding, window.innerWidth - popoverRect.width - padding);
+    }
+    if (left < padding) left = padding;
+    style2.left = left;
+    const spaceBelow = window.innerHeight - anchorRect.bottom;
+    const spaceAbove = anchorRect.top;
+    if (anchor === "below") {
+      if (spaceBelow >= popoverRect.height + padding || spaceBelow >= spaceAbove) {
+        style2.top = anchorRect.bottom + window.scrollY;
+      } else {
+        style2.bottom = document.documentElement.scrollHeight - anchorRect.top - window.scrollY;
+      }
+    } else {
+      if (spaceAbove >= popoverRect.height + padding || spaceAbove >= spaceBelow) {
+        style2.bottom = document.documentElement.scrollHeight - anchorRect.top - window.scrollY;
+      } else {
+        style2.top = anchorRect.bottom + window.scrollY;
+      }
+    }
+    setAdjustedStyle(style2);
+  }, [open, anchor, anchorRef]);
+  if (!open || !anchorRef.current) return null;
+  const rect = anchorRef.current.getBoundingClientRect();
+  const initialStyle = {
+    position: "absolute",
+    left: rect.left + window.scrollX,
+    zIndex: 50,
+    visibility: adjustedStyle.left != null ? "visible" : "hidden",
+    ...anchor === "above" ? { bottom: document.documentElement.scrollHeight - rect.top - window.scrollY } : { top: rect.bottom + window.scrollY }
+  };
+  const style = adjustedStyle.left != null ? adjustedStyle : initialStyle;
+  const defaultClasses = `${t.elevated} ${t.border} shadow-lg rounded-lg`;
+  return createPortal2(
+    /* @__PURE__ */ jsx7("div", { ref: popoverRef, style, className: className ?? defaultClasses, children }),
+    document.body
+  );
+}
+
+// src/components/Slider.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function fillStyle(value, min, max) {
+  const pct = max === min ? 0 : (value - min) / (max - min) * 100;
+  return {
+    background: `linear-gradient(90deg, var(--color-brand-primary) 0%, var(--color-brand-secondary) ${pct}%, var(--color-bg-elevated) ${pct}%)`
+  };
+}
+function Slider(props) {
+  const t = useTheme();
+  const { disabled, className } = props;
+  if (props.options) {
+    const { options, labels, value: value2, onChange: onChange2 } = props;
+    const index = options.indexOf(value2);
+    const currentIndex = index === -1 ? 0 : index;
+    const getLabel = (option) => {
+      if (typeof labels === "function") return labels(option);
+      return String(option);
+    };
+    return /* @__PURE__ */ jsxs6("div", { className, children: [
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: options.length - 1,
+          step: 1,
+          value: currentIndex,
+          onChange: (e) => onChange2(options[parseInt(e.target.value)]),
+          className: "w-full slider-styled",
+          style: fillStyle(currentIndex, 0, options.length - 1),
+          disabled
+        }
+      ),
+      labels && /* @__PURE__ */ jsx8("div", { className: `flex justify-between text-xs mt-1 ${t.textMuted}`, children: options.map((option) => /* @__PURE__ */ jsx8("span", { children: getLabel(option) }, String(option))) })
+    ] });
+  }
+  const { min, max, step, value, onChange } = props;
+  return /* @__PURE__ */ jsx8("div", { className, children: /* @__PURE__ */ jsx8(
+    "input",
+    {
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      onChange: (e) => onChange(parseFloat(e.target.value)),
+      className: "w-full slider-styled",
+      style: fillStyle(value, min, max),
+      disabled
+    }
+  ) });
+}
+
+// src/components/SlideOverPanel.tsx
+import { useEffect as useEffect4, useState as useState3 } from "react";
+import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function SlideOverPanel({ open, onClose, children }) {
+  const t = useTheme();
+  const [mounted, setMounted] = useState3(false);
+  const [visible, setVisible] = useState3(false);
+  useEffect4(() => {
+    if (open) {
+      setMounted(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setVisible(true));
+      });
+    } else {
+      setVisible(false);
+      const timer = setTimeout(() => setMounted(false), 200);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `fixed inset-0 z-20 transition-opacity duration-200 ${t.overlay} ${visible ? "opacity-100" : "opacity-0"}`,
+        onClick: onClose
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `fixed top-0 right-0 bottom-0 w-72 ${t.sidebar} overflow-y-auto z-30 transition-transform duration-200 ${visible ? "translate-x-0" : "translate-x-full"}`,
+        style: { paddingTop: "env(safe-area-inset-top)" },
+        children
+      }
+    )
+  ] });
+}
+
+// src/components/ToggleSwitch.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var sizeConfig = {
+  sm: { track: "w-9 h-5", knob: "w-4 h-4", knobTranslate: "translate-x-4" },
+  md: { track: "w-11 h-6", knob: "w-5 h-5", knobTranslate: "translate-x-5" },
+  lg: { track: "w-14 h-7", knob: "w-6 h-6", knobTranslate: "translate-x-7" }
+};
+function ToggleSwitch({
+  checked,
+  onChange,
+  size = "md",
+  label,
+  description,
+  disabled = false,
+  id,
+  ...props
+}) {
+  const t = useTheme();
+  const config = sizeConfig[size];
+  const handleClick = () => {
+    if (!disabled) onChange(!checked);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      if (!disabled) onChange(!checked);
+    }
+  };
+  const toggle = /* @__PURE__ */ jsx10(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": checked,
+      "aria-label": label,
+      id,
+      disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      className: [
+        "relative inline-flex items-center rounded-full transition-all duration-200 flex-shrink-0",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary focus-visible:ring-offset-2",
+        config.track,
+        checked ? t.toggleOn : t.toggleOff,
+        disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+      ].join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsx10(
+        "span",
+        {
+          className: [
+            "inline-flex items-center justify-center rounded-full bg-white shadow-sm transition-transform duration-200",
+            config.knob,
+            checked ? config.knobTranslate : "translate-x-0.5"
+          ].join(" ")
+        }
+      )
+    }
+  );
+  if (!label) return toggle;
+  return /* @__PURE__ */ jsxs8("div", { className: ["flex items-center justify-between gap-3", disabled ? "opacity-50" : ""].join(" "), children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex flex-col min-w-0", children: [
+      /* @__PURE__ */ jsx10(
+        "label",
+        {
+          htmlFor: id,
+          className: [
+            "text-sm font-medium",
+            t.textPrimary,
+            disabled ? "cursor-not-allowed" : "cursor-pointer"
+          ].join(" "),
+          onClick: handleClick,
+          children: label
+        }
+      ),
+      description && /* @__PURE__ */ jsx10("span", { className: `text-xs mt-0.5 ${t.textMuted}`, children: description })
+    ] }),
+    toggle
+  ] });
+}
+
+// src/hooks/useDebounce.ts
+import { useState as useState4, useEffect as useEffect5 } from "react";
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState4(value);
+  useEffect5(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+// src/utils/format-time.ts
+function formatExactTime(dateString) {
+  const date = new Date(dateString);
+  const time = date.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: true });
+  const weekday = date.toLocaleDateString("en-US", { weekday: "short" });
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const year = date.getFullYear().toString().slice(-2);
+  return `${time} ${weekday} ${month}/${day}/${year}`;
+}
+function getRelativeTime(dateString) {
+  const date = new Date(dateString);
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMins < 1) return "Just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  if (diffDays < 30) {
+    const weeks = Math.floor(diffDays / 7);
+    return `${weeks}w ago`;
+  }
+  return date.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+}
+
+// src/utils/clipboard.ts
+async function shareOrCopyUrl(url) {
+  try {
+    if (navigator.share) {
+      await navigator.share({ url });
+      return "shared";
+    }
+  } catch (err) {
+    if (err?.name === "AbortError") return "cancelled";
+  }
+  const copied = await copyToClipboard(url);
+  return copied ? "copied" : "failed";
+}
+async function copyToClipboard(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.style.position = "fixed";
+  textarea.style.opacity = "0";
+  document.body.appendChild(textarea);
+  textarea.select();
+  try {
+    document.execCommand("copy");
+    return true;
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+export {
+  Button,
+  ConfirmationModal,
+  MenuItem,
+  Modal,
+  Paginator,
+  Popover,
+  SlideOverPanel,
+  Slider,
+  ThemingProvider,
+  ToggleSwitch,
+  copyToClipboard,
+  formatExactTime,
+  getRelativeTime,
+  shareOrCopyUrl,
+  themes,
+  useDebounce,
+  useTheme
+};
+//# sourceMappingURL=index.js.map