@taskon/widget-react 0.0.1-beta.5 → 0.0.1-beta.7

package/dist/chunks/WidgetShell-8xn-Jivw.js

@@ -0,0 +1,659 @@
+import * as React from "react";
+import { useState, useMemo, useCallback, useEffect, forwardRef } from "react";
+import { createWidgetApi, parseWidgetConfig } from "@taskon/core";
+import { h as useTaskOnContext, j as composeRefs, T as ThemeProvider } from "./ThemeProvider-CulHkqqY.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import '../WidgetShell.css';function cloudThemeToReactTheme(cloud) {
+  const isDual = cloud.colorMode.type === "dual";
+  const modeStrategy = isDual ? cloud.colorMode.dualVariant : "auto";
+  let mode;
+  if (cloud.colorMode.type === "dual") {
+    mode = cloud.colorMode.dualVariant === "auto" ? "auto" : "light";
+  } else {
+    mode = cloud.colorMode.type;
+  }
+  const mapColorToSeed = (color) => ({
+    colorPrimary: color.primaryColor,
+    colorSecondary: color.secondaryColor,
+    colorSuccess: color.successColor,
+    colorWarning: color.warningColor,
+    colorError: color.errorColor,
+    colorLink: color.linkColor,
+    colorTextOnPrimary: color.textInPrimaryButton,
+    colorText: color.textColor,
+    colorBgBase: color.backgroundColor
+  });
+  const mapSpacingToSeed = () => {
+    const base = Math.max(1, Number(cloud.spacing.sizeBaseStep) || 1);
+    const unit = Math.max(1, Number(cloud.spacing.sizeChangeUnit) || 1);
+    return {
+      spacingBaseStep: base,
+      spacingChangeUnit: unit
+    };
+  };
+  return {
+    mode,
+    modeStrategy,
+    // Global seed (shape and spacing values applied regardless of mode)
+    seed: {
+      borderRadius: cloud.shape.borderRadius,
+      fontSize: cloud.shape.fontSize,
+      ...mapSpacingToSeed()
+    },
+    // Per-mode color overrides
+    light: {
+      seed: mapColorToSeed(cloud.light)
+    },
+    dark: {
+      seed: mapColorToSeed(cloud.dark)
+    }
+  };
+}
+function usePagination(options) {
+  const { total, pageSize, initialPage = 0, mode = "pagination" } = options;
+  const [page, setPage] = useState(initialPage);
+  const totalPages = useMemo(() => {
+    return Math.max(1, Math.ceil(total / pageSize));
+  }, [total, pageSize]);
+  const safePage = useMemo(() => {
+    return Math.min(page, totalPages - 1);
+  }, [page, totalPages]);
+  if (safePage !== page) {
+    setPage(safePage);
+  }
+  const hasPrevious = safePage > 0;
+  const hasNext = safePage < totalPages - 1;
+  const goToPage = useCallback(
+    (targetPage) => {
+      const validPage = Math.max(0, Math.min(targetPage, totalPages - 1));
+      setPage(validPage);
+    },
+    [totalPages]
+  );
+  const goToPrevious = useCallback(() => {
+    if (hasPrevious) {
+      setPage((p) => p - 1);
+    }
+  }, [hasPrevious]);
+  const goToNext = useCallback(() => {
+    if (hasNext) {
+      setPage((p) => p + 1);
+    }
+  }, [hasNext]);
+  const reset = useCallback(() => {
+    setPage(0);
+  }, []);
+  const startIndex = safePage * pageSize + 1;
+  const endIndex = Math.min((safePage + 1) * pageSize, total);
+  const hasMore = useMemo(() => {
+    if (mode === "infinite") {
+      return safePage < totalPages - 1;
+    }
+    return hasNext;
+  }, [mode, safePage, totalPages, hasNext]);
+  const loadedCount = useMemo(() => {
+    if (mode === "infinite") {
+      return Math.min((safePage + 1) * pageSize, total);
+    }
+    return endIndex - startIndex + 1;
+  }, [mode, safePage, pageSize, total, startIndex, endIndex]);
+  const loadMore = useCallback(() => {
+    if (mode === "infinite" && hasMore) {
+      setPage((p) => p + 1);
+    }
+  }, [mode, hasMore]);
+  return {
+    page: safePage,
+    totalPages,
+    hasPrevious,
+    hasNext,
+    goToPage,
+    goToPrevious,
+    goToNext,
+    reset,
+    startIndex,
+    endIndex,
+    // Infinite 模式专用
+    loadMore,
+    hasMore,
+    loadedCount
+  };
+}
+function useWidgetConfig(widgetId) {
+  const { client } = useTaskOnContext();
+  const [config, setConfig] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!widgetId || !client) {
+      setConfig(null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    const api = createWidgetApi(client);
+    api.getWidgetInfo(widgetId).then((info) => {
+      if (!cancelled) {
+        setConfig(parseWidgetConfig(info));
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        console.warn("[TaskOn] Failed to load widget config:", err);
+        setError(
+          err instanceof Error ? err.message : "Failed to load widget config"
+        );
+      }
+    }).finally(() => {
+      if (!cancelled) {
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [widgetId, client]);
+  return { config, isLoading, error };
+}
+function useResolvedWidgetConfig(widgetId) {
+  const { config, isLoading, error } = useWidgetConfig(widgetId);
+  const cloudTheme = useMemo(() => {
+    if (!(config == null ? void 0 : config.theme)) return void 0;
+    return cloudThemeToReactTheme(config.theme);
+  }, [config == null ? void 0 : config.theme]);
+  return {
+    functionConfig: (config == null ? void 0 : config.functionConfig) ?? null,
+    cloudTheme,
+    isConfigLoading: isLoading,
+    configError: error
+  };
+}
+var REACT_LAZY_TYPE = Symbol.for("react.lazy");
+var use = React[" use ".trim().toString()];
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value;
+}
+function isLazyComponent(element) {
+  return element != null && typeof element === "object" && "$$typeof" in element && element.$$typeof === REACT_LAZY_TYPE && "_payload" in element && isPromiseLike(element._payload);
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React.Children.count(newElement) > 1) return React.Children.only(null);
+          return React.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React.isValidElement(newElement) ? React.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+var Slot = /* @__PURE__ */ createSlot("Slot");
+// @__NO_SIDE_EFFECTS__
+function createSlotClone(ownerName) {
+  const SlotClone = React.forwardRef((props, forwardedRef) => {
+    let { children, ...slotProps } = props;
+    if (isLazyComponent(children) && typeof use === "function") {
+      children = use(children._payload);
+    }
+    if (React.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React.cloneElement(children, props2);
+    }
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+const Button = forwardRef(
+  ({
+    size = "medium",
+    variant = "primary",
+    loading = false,
+    iconPosition,
+    leftIcon,
+    rightIcon,
+    asChild = false,
+    disabled,
+    className = "",
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const actualIconPosition = iconPosition || (leftIcon ? "left" : rightIcon ? "right" : void 0);
+    const isIconOnly = actualIconPosition === "only" || !children && (leftIcon || rightIcon);
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "var(--taskon-spacing-xs)",
+      fontFamily: "inherit",
+      fontWeight: 500,
+      lineHeight: 1.5,
+      border: "none",
+      outline: "none",
+      cursor: disabled || loading ? "not-allowed" : "pointer",
+      transition: "all 0.2s ease-in-out",
+      position: "relative",
+      userSelect: "none",
+      whiteSpace: "nowrap",
+      opacity: disabled ? 0.5 : 1,
+      ...style
+    };
+    const sizeStyles = {
+      small: {
+        fontSize: "var(--taskon-font-size-sm)",
+        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-sm)",
+        borderRadius: "var(--taskon-border-radius-sm)",
+        minWidth: isIconOnly ? "24px" : "64px",
+        height: "24px"
+      },
+      medium: {
+        fontSize: "var(--taskon-font-size)",
+        padding: isIconOnly ? "var(--taskon-spacing-xs)" : "var(--taskon-spacing-xs) var(--taskon-spacing-md)",
+        borderRadius: "var(--taskon-border-radius)",
+        minWidth: isIconOnly ? "32px" : "80px",
+        height: "32px"
+      },
+      large: {
+        fontSize: "var(--taskon-font-size-lg)",
+        padding: isIconOnly ? "var(--taskon-spacing-sm)" : "var(--taskon-spacing-sm) var(--taskon-spacing-lg)",
+        borderRadius: "var(--taskon-border-radius)",
+        minWidth: isIconOnly ? "40px" : "96px",
+        height: "40px"
+      }
+    };
+    const variantStyles = {
+      primary: {
+        backgroundColor: "var(--taskon-color-primary)",
+        color: "var(--taskon-color-text-on-primary)"
+      },
+      secondary: {
+        backgroundColor: "var(--taskon-color-secondary)",
+        color: "var(--taskon-color-text-on-primary)"
+      },
+      outline: {
+        backgroundColor: "transparent",
+        color: "var(--taskon-color-text)",
+        border: "1px solid var(--taskon-color-border)"
+      },
+      ghost: {
+        backgroundColor: "transparent",
+        color: "var(--taskon-color-text)"
+      },
+      danger: {
+        backgroundColor: "var(--taskon-color-error)",
+        color: "var(--taskon-color-text-on-primary)"
+      }
+    };
+    const hoverStyles = {
+      primary: "hover:bg-[var(--taskon-color-primary-hover)] active:bg-[var(--taskon-color-primary-active)]",
+      secondary: "hover:opacity-90 active:opacity-80",
+      outline: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
+      ghost: "hover:bg-[var(--taskon-color-bg-surface-strong)] active:bg-[var(--taskon-color-bg-surface-strong)]",
+      danger: "hover:opacity-90 active:opacity-80"
+    };
+    const mergedStyle = {
+      ...baseStyles,
+      ...sizeStyles[size],
+      ...variantStyles[variant]
+    };
+    const mergedClassName = `${className} ${hoverStyles[variant]}`.trim();
+    const renderLoadingIndicator = () => {
+      if (!loading) return null;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: "inline-block",
+            width: "1em",
+            height: "1em",
+            border: "2px solid currentColor",
+            borderTopColor: "transparent",
+            borderRadius: "50%",
+            animation: "taskon-button-spin 0.6s linear infinite"
+          }
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: `
+          @keyframes taskon-button-spin {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        ` }),
+      /* @__PURE__ */ jsxs(
+        Comp,
+        {
+          ref,
+          disabled: disabled || loading,
+          className: mergedClassName,
+          style: mergedStyle,
+          ...props,
+          children: [
+            loading && renderLoadingIndicator(),
+            !loading && leftIcon && actualIconPosition === "left" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: leftIcon }),
+            !isIconOnly && children,
+            !loading && rightIcon && actualIconPosition === "right" && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: rightIcon })
+          ]
+        }
+      )
+    ] });
+  }
+);
+Button.displayName = "Button";
+const defaultPaginationMessages = {
+  previous: "Previous",
+  next: "Next",
+  page: "Page",
+  of: "of",
+  showing: "Showing {start}-{end} of {total}"
+};
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "taskon-pagination-icon",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+    }
+  );
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "taskon-pagination-icon",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+    }
+  );
+}
+function Pagination({
+  page,
+  totalPages,
+  hasPrevious,
+  hasNext,
+  onPrevious,
+  onNext,
+  messages = defaultPaginationMessages,
+  className = "",
+  showRange,
+  showArrows = true,
+  showButtonText = false,
+  // 默认不显示按钮文字，只显示箭头图标
+  size = "medium"
+}) {
+  if (totalPages <= 1) {
+    return null;
+  }
+  const rangeText = showRange && messages.showing ? messages.showing.replace("{start}", String(showRange.start)).replace("{end}", String(showRange.end)).replace("{total}", String(showRange.total)) : null;
+  return /* @__PURE__ */ jsxs("div", { className: `taskon-pagination taskon-pagination--${size} ${className}`, children: [
+    rangeText && /* @__PURE__ */ jsx("span", { className: "taskon-pagination-range", children: rangeText }),
+    /* @__PURE__ */ jsxs("div", { className: "taskon-pagination-controls", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size,
+          disabled: !hasPrevious,
+          onClick: onPrevious,
+          "aria-label": messages.previous,
+          leftIcon: showArrows ? /* @__PURE__ */ jsx(ChevronLeftIcon, {}) : void 0,
+          className: "taskon-pagination-btn taskon-pagination-btn--prev",
+          children: showButtonText && messages.previous
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "taskon-pagination-info", children: [
+        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-current", children: page + 1 }),
+        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-separator", children: " / " }),
+        /* @__PURE__ */ jsx("span", { className: "taskon-pagination-info-total", children: totalPages })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size,
+          disabled: !hasNext,
+          onClick: onNext,
+          "aria-label": messages.next,
+          rightIcon: showArrows ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : void 0,
+          className: "taskon-pagination-btn taskon-pagination-btn--next",
+          children: showButtonText && messages.next
+        }
+      )
+    ] })
+  ] });
+}
+function Table({
+  columns,
+  data,
+  rowConfig,
+  loading = false,
+  loadingText = "Loading...",
+  empty,
+  striped = false,
+  compact = false,
+  borderless = false,
+  className = "",
+  style
+}) {
+  const tableClassName = [
+    "taskon-table",
+    striped && "taskon-table--striped",
+    compact && "taskon-table--compact",
+    borderless && "taskon-table--borderless"
+  ].filter(Boolean).join(" ");
+  const getRowKey = (rowConfig == null ? void 0 : rowConfig.getRowKey) || ((_, index) => index);
+  const getColumnStyle = (column) => {
+    const style2 = {};
+    if (column.width) {
+      style2.width = typeof column.width === "number" ? `${column.width}px` : column.width;
+    }
+    if (column.minWidth) {
+      style2.minWidth = typeof column.minWidth === "number" ? `${column.minWidth}px` : column.minWidth;
+    }
+    return style2;
+  };
+  const getAlignClassName = (align) => {
+    if (!align || align === "left") return "";
+    return `taskon-table__header--${align}`;
+  };
+  const getCellAlignClassName = (align) => {
+    if (!align || align === "left") return "";
+    return `taskon-table__cell--${align}`;
+  };
+  const renderHeader = () => /* @__PURE__ */ jsx("thead", { className: "taskon-table__head", children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      className: `taskon-table__header ${getAlignClassName(column.align)} ${column.headerClassName || ""}`,
+      style: getColumnStyle(column),
+      children: column.title
+    },
+    column.key
+  )) }) });
+  const renderLoading = () => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { colSpan: columns.length, className: "taskon-table__loading", children: [
+    /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-spinner" }),
+    /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: loadingText })
+  ] }) });
+  const renderEmpty = () => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length, className: "taskon-table__empty", children: /* @__PURE__ */ jsxs("div", { className: "taskon-table__empty-content", children: [
+    (empty == null ? void 0 : empty.icon) && /* @__PURE__ */ jsx("div", { className: "taskon-table__empty-icon", children: empty.icon }),
+    (empty == null ? void 0 : empty.title) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-title", children: empty.title }),
+    (empty == null ? void 0 : empty.description) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-desc", children: empty.description }),
+    !(empty == null ? void 0 : empty.title) && !(empty == null ? void 0 : empty.description) && /* @__PURE__ */ jsx("p", { className: "taskon-table__empty-title", children: "No data" })
+  ] }) }) });
+  const renderRows = () => data.map((row, rowIndex) => {
+    var _a, _b, _c;
+    const rowKey = getRowKey(row, rowIndex);
+    const isHighlighted = ((_a = rowConfig == null ? void 0 : rowConfig.isHighlighted) == null ? void 0 : _a.call(rowConfig, row, rowIndex)) || false;
+    const isDisabled = ((_b = rowConfig == null ? void 0 : rowConfig.isDisabled) == null ? void 0 : _b.call(rowConfig, row, rowIndex)) || false;
+    const isClickable = !!(rowConfig == null ? void 0 : rowConfig.onRowClick);
+    const customRowClassName = ((_c = rowConfig == null ? void 0 : rowConfig.rowClassName) == null ? void 0 : _c.call(rowConfig, row, rowIndex)) || "";
+    const rowClassName = [
+      "taskon-table__row",
+      isHighlighted && "taskon-table__row--highlighted",
+      isDisabled && "taskon-table__row--disabled",
+      isClickable && "taskon-table__row--clickable",
+      customRowClassName
+    ].filter(Boolean).join(" ");
+    const handleRowClick = () => {
+      var _a2;
+      if (isClickable && !isDisabled) {
+        (_a2 = rowConfig == null ? void 0 : rowConfig.onRowClick) == null ? void 0 : _a2.call(rowConfig, row, rowIndex);
+      }
+    };
+    return /* @__PURE__ */ jsx("tr", { className: rowClassName, onClick: handleRowClick, children: columns.map((column) => {
+      const value = row[column.key];
+      const cellContent = column.render ? column.render(value, row, rowIndex) : value;
+      const cellClassName = [
+        "taskon-table__cell",
+        getCellAlignClassName(column.align),
+        column.ellipsis && "taskon-table__cell--ellipsis",
+        column.cellClassName
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx("td", { className: cellClassName, style: getColumnStyle(column), children: cellContent }, column.key);
+    }) }, rowKey);
+  });
+  const renderBody = () => {
+    if (!data || data.length === 0) {
+      if (loading) {
+        return renderLoading();
+      }
+      return renderEmpty();
+    }
+    return renderRows();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `taskon-table-container ${className}`, style, children: [
+    /* @__PURE__ */ jsxs("table", { className: tableClassName, children: [
+      renderHeader(),
+      /* @__PURE__ */ jsx("tbody", { className: "taskon-table__body", children: renderBody() })
+    ] }),
+    loading && data && data.length > 0 && /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-overlay", children: /* @__PURE__ */ jsx("div", { className: "taskon-table__loading-spinner" }) })
+  ] });
+}
+function WidgetShell({
+  widgetId,
+  isConfigLoading,
+  cloudTheme,
+  themeMode,
+  className,
+  errorMessage,
+  children
+}) {
+  const resolvedCloudTheme = useMemo(() => {
+    if (!cloudTheme) return void 0;
+    if (!themeMode) return cloudTheme;
+    return {
+      ...cloudTheme,
+      mode: themeMode
+    };
+  }, [cloudTheme, themeMode]);
+  if (widgetId && isConfigLoading) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { className: `${className}-loading`, children: [
+      /* @__PURE__ */ jsx("div", { className: `${className}-loading-spinner` }),
+      /* @__PURE__ */ jsx("span", { children: "Loading config..." })
+    ] }) });
+  }
+  if (errorMessage) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { className: `${className}-error`, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${className}-error-message`,
+        style: { overflowWrap: "anywhere", wordBreak: "break-word" },
+        children: errorMessage
+      }
+    ) }) });
+  }
+  if (resolvedCloudTheme) {
+    return /* @__PURE__ */ jsx(ThemeProvider, { theme: resolvedCloudTheme, children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  Button as B,
+  Pagination as P,
+  Table as T,
+  WidgetShell as W,
+  usePagination as a,
+  cloudThemeToReactTheme as c,
+  useResolvedWidgetConfig as u
+};