@inf-monkeys-tech/monkeys-design 1.0.42 → 1.0.43

package/dist/components/workbench/index.mjs

@@ -476,7 +476,10 @@ var enUS = {
         loadError: "Unable to load items",
         refreshError: "Unable to refresh items",
         retry: "Retry",
-        loadingMore: "Loading more items"
+        loadingMore: "Loading more items",
+        permission: "You do not have permission to view this content",
+        offline: "You appear to be offline",
+        requestAccess: "Request access"
       },
       interactiveTable: {
         columnActions: "Column actions",
@@ -740,6 +743,9 @@ function useMonkeysBaseAppearance(explicit) {
     [explicit, inherited]
   );
 }
+function useMonkeysStatusStates() {
+  return useContext(MonkeysThemeContext).statusStates ?? {};
+}
 function useMonkeysDirection() {
   return useContext(MonkeysDirectionContext).direction;
 }
@@ -2210,16 +2216,6 @@ function getBaseButtonToneClassName(theme, tone = "default", active = false) {
     active && theme.slots.buttonActive
   );
 }
-function getBaseNoticeToneClassName(theme, tone = "default") {
-  return cn(
-    tone === "default" && theme.slots.noticeDefault,
-    tone === "primary" && theme.slots.noticePrimary,
-    tone === "success" && theme.slots.noticeSuccess,
-    tone === "warning" && theme.slots.noticeWarning,
-    tone === "danger" && theme.slots.noticeDanger,
-    tone === "muted" && theme.slots.noticeMuted
-  );
-}
 function getBaseMenuItemToneClassName(theme, tone = "default") {
   return cn(
     tone === "default" && theme.slots.menuItemDefault,
@@ -3479,6 +3475,7 @@ var BaseEmptyState = forwardRef(
     title,
     description,
     actions,
+    variant,
     appearance,
     className,
     classNames,
@@ -3487,6 +3484,9 @@ var BaseEmptyState = forwardRef(
   }, ref) {
     const resolvedAppearance = useMonkeysBaseAppearance(appearance);
     const componentAttributes = useMonkeysComponentAttributes();
+    const statusStates = useMonkeysStatusStates();
+    const resolvedVariant = variant ?? statusStates.empty?.variant ?? "default";
+    const densityClassName = statusStates.density === "compact" ? "min-h-0 px-3 py-3" : statusStates.density === "comfortable" ? "min-h-56 px-8 py-12" : void 0;
     const theme = resolveBaseAppearance(resolvedAppearance);
     return /* @__PURE__ */ jsxs(
       "div",
@@ -3497,7 +3497,15 @@ var BaseEmptyState = forwardRef(
         "data-monkeys-component": "empty-state",
         "data-slot": "root",
         "data-state": "empty",
-        className: cn(theme.slots.stateRoot, classNames?.root, className),
+        "data-variant": resolvedVariant,
+        "data-density": statusStates.density,
+        className: cn(
+          theme.slots.stateRoot,
+          densityClassName,
+          resolvedVariant === "compact" && "min-h-0 gap-1 py-3",
+          classNames?.root,
+          className
+        ),
         style: {
           ...theme.styles.stateRoot,
           ...style
@@ -3903,6 +3911,59 @@ var BaseInput = forwardRef(
     );
   }
 );
+var variantClassNames = {
+  line: "h-4 w-full",
+  block: "h-24 w-full",
+  circle: "aspect-square h-10 rounded-full"
+};
+var BaseSkeleton = forwardRef(
+  function BaseSkeleton2({
+    variant = "line",
+    animated = true,
+    appearance,
+    className,
+    classNames,
+    style,
+    ...skeletonProps
+  }, ref) {
+    if (variant !== "line" && variant !== "block" && variant !== "circle") {
+      throw new TypeError(
+        'BaseSkeleton variant must be "line", "block", or "circle".'
+      );
+    }
+    if (typeof animated !== "boolean") {
+      throw new TypeError("BaseSkeleton animated must be a boolean.");
+    }
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const theme = resolveBaseAppearance(resolvedAppearance);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...componentAttributes,
+        ...skeletonProps,
+        ref,
+        "aria-hidden": "true",
+        "data-monkeys-component": "skeleton",
+        "data-slot": "root",
+        "data-variant": variant,
+        "data-animated": animated,
+        "data-state": animated ? "animated" : "static",
+        className: cn(
+          theme.slots.skeletonRoot,
+          variantClassNames[variant],
+          animated && "motion-safe:animate-pulse motion-reduce:animate-none",
+          classNames?.root,
+          className
+        ),
+        style: {
+          ...theme.styles.skeleton,
+          ...style
+        }
+      }
+    );
+  }
+);
 function DefaultLoadingIcon({ className }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -3940,6 +4001,7 @@ var BaseLoadingState = forwardRef(function BaseLoadingState2({
   title,
   description,
   actions,
+  variant,
   appearance,
   className,
   classNames,
@@ -3954,8 +4016,11 @@ var BaseLoadingState = forwardRef(function BaseLoadingState2({
   const resolvedAppearance = useMonkeysBaseAppearance(appearance);
   const componentAttributes = useMonkeysComponentAttributes();
   const loadingMessages = useMonkeysLocaleMessages().loading;
+  const statusStates = useMonkeysStatusStates();
+  const resolvedVariant = variant ?? statusStates.loading?.variant ?? "spinner";
+  const densityClassName = statusStates.density === "compact" ? "min-h-0 px-3 py-3" : statusStates.density === "comfortable" ? "min-h-56 px-8 py-12" : void 0;
   const theme = resolveBaseAppearance(resolvedAppearance);
-  const resolvedIcon = icon === void 0 ? /* @__PURE__ */ jsx(DefaultLoadingIcon, { className: theme.slots.loadingSpinner }) : icon;
+  const resolvedIcon = resolvedVariant === "skeleton" && icon === void 0 ? void 0 : icon === void 0 ? /* @__PURE__ */ jsx(DefaultLoadingIcon, { className: theme.slots.loadingSpinner }) : icon;
   const resolvedAriaLabel = nativeAriaLabel ?? (nativeAriaLabelledBy === void 0 ? loadingMessages.spinner : void 0);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3971,13 +4036,19 @@ var BaseLoadingState = forwardRef(function BaseLoadingState2({
       "data-monkeys-component": "loading-state",
       "data-slot": "root",
       "data-state": "loading",
-      className: cn(theme.slots.stateRoot, classNames?.root, className),
+      "data-variant": resolvedVariant,
+      "data-density": statusStates.density,
+      className: cn(theme.slots.stateRoot, densityClassName, classNames?.root, className),
       style: {
         ...theme.styles.stateRoot,
         ...style
       },
       children: [
-        hasRenderableNode(resolvedIcon) ? /* @__PURE__ */ jsx(
+        resolvedVariant === "skeleton" ? /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-sm flex-col gap-3", "data-slot": "skeleton", children: [
+          /* @__PURE__ */ jsx(BaseSkeleton, { variant: "block", className: "h-20" }),
+          /* @__PURE__ */ jsx(BaseSkeleton, { variant: "line", className: "w-4/5" }),
+          /* @__PURE__ */ jsx(BaseSkeleton, { variant: "line", className: "w-3/5" })
+        ] }) : hasRenderableNode(resolvedIcon) ? /* @__PURE__ */ jsx(
           "div",
           {
             "data-slot": "icon",
@@ -4018,55 +4089,6 @@ var BaseLoadingState = forwardRef(function BaseLoadingState2({
     }
   );
 });
-function BaseNotice({
-  tone,
-  icon,
-  title,
-  description,
-  actions,
-  children,
-  appearance,
-  className,
-  classNames,
-  style,
-  ...noticeProps
-}) {
-  const theme = resolveBaseAppearance(appearance);
-  const resolvedDescription = children ?? description;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...noticeProps,
-      className: cn(
-        theme.slots.noticeBase,
-        getBaseNoticeToneClassName(theme, tone),
-        classNames?.root,
-        className
-      ),
-      style: {
-        ...theme.styles.notice,
-        ...style
-      },
-      children: [
-        hasRenderableNode(icon) ? /* @__PURE__ */ jsx("div", { className: cn(theme.slots.noticeIcon, classNames?.icon), children: icon }) : null,
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          hasRenderableNode(title) ? /* @__PURE__ */ jsx("div", { className: cn(theme.slots.noticeTitle, classNames?.title), children: title }) : null,
-          hasRenderableNode(resolvedDescription) ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                theme.slots.noticeDescription,
-                classNames?.description
-              ),
-              children: resolvedDescription
-            }
-          ) : null,
-          hasRenderableNode(actions) ? /* @__PURE__ */ jsx("div", { className: cn(theme.slots.noticeActions, classNames?.actions), children: actions }) : null
-        ] })
-      ]
-    }
-  );
-}
 var typeaheadResetDelay = 500;
 function validateSelectProps({
   options,
@@ -4809,6 +4831,131 @@ function BaseSegmentedControl({
     }
   );
 }
+function SystemStateIcon({ kind }) {
+  const path = {
+    error: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 7v6" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+    ] }),
+    permission: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("rect", { x: "5", y: "10", width: "14", height: "10", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
+    ] }),
+    offline: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("path", { d: "M5 12.5a10 10 0 0 1 14 0" }),
+      /* @__PURE__ */ jsx("path", { d: "M8.5 16a5 5 0 0 1 7 0" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 20h.01" }),
+      /* @__PURE__ */ jsx("path", { d: "m4 4 16 16" })
+    ] }),
+    fallback: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx("path", { d: "M9.5 9a2.5 2.5 0 1 1 4.2 1.8c-1 .8-1.7 1.2-1.7 2.7" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+    ] })
+  };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: "h-7 w-7",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.8",
+      children: path[kind]
+    }
+  );
+}
+var BaseSystemState = forwardRef(
+  function BaseSystemState2({
+    kind = "fallback",
+    icon,
+    title,
+    description,
+    actions,
+    appearance,
+    className,
+    classNames,
+    style,
+    role,
+    "aria-live": ariaLive,
+    ...stateProps
+  }, ref) {
+    const resolvedAppearance = useMonkeysBaseAppearance(appearance);
+    const componentAttributes = useMonkeysComponentAttributes();
+    const statusStates = useMonkeysStatusStates();
+    const densityClassName = statusStates.density === "compact" ? "min-h-0 px-3 py-3" : statusStates.density === "comfortable" ? "min-h-56 px-8 py-12" : void 0;
+    const theme = resolveBaseAppearance(resolvedAppearance);
+    const resolvedIcon = icon === void 0 ? /* @__PURE__ */ jsx(SystemStateIcon, { kind }) : icon;
+    const resolvedRole = role ?? (kind === "error" || kind === "offline" ? "alert" : "status");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...componentAttributes,
+        ...stateProps,
+        ref,
+        role: resolvedRole,
+        "aria-live": ariaLive ?? (resolvedRole === "alert" ? "assertive" : "polite"),
+        "data-monkeys-component": "system-state",
+        "data-slot": "root",
+        "data-state": kind,
+        "data-density": statusStates.density,
+        className: cn(
+          theme.slots.stateRoot,
+          densityClassName,
+          classNames?.root,
+          className
+        ),
+        style: { ...theme.styles.stateRoot, ...style },
+        children: [
+          hasRenderableNode(resolvedIcon) ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "icon",
+              "data-state": kind,
+              className: cn(theme.slots.stateIcon, classNames?.icon),
+              style: theme.styles.stateIcon,
+              children: resolvedIcon
+            }
+          ) : null,
+          hasRenderableNode(title) ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "title",
+              "data-state": kind,
+              className: cn(theme.slots.stateTitle, classNames?.title),
+              children: title
+            }
+          ) : null,
+          hasRenderableNode(description) ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "description",
+              "data-state": kind,
+              className: cn(
+                theme.slots.stateDescription,
+                classNames?.description
+              ),
+              children: description
+            }
+          ) : null,
+          hasRenderableNode(actions) ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "actions",
+              "data-state": kind,
+              className: cn(theme.slots.stateActions, classNames?.actions),
+              children: actions
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
 var DATA_TRANSFER_COLUMN_TYPE = "application/x-monkeys-base-table-column";
 var COLUMN_RESIZE_KEYBOARD_STEP = 8;
 function assignRef2(ref, value) {
@@ -8786,6 +8933,7 @@ function WorkbenchCollection({
 }) {
   const componentAttributes = useMonkeysComponentAttributes();
   const localeMessages = useMonkeysLocaleMessages().workbench.collection;
+  const statusStates = useMonkeysStatusStates();
   const componentId = useId().replace(/:/g, "");
   const rootRef = useRef(null);
   const itemsRef = useRef(null);
@@ -8876,7 +9024,10 @@ function WorkbenchCollection({
     loadError: config.labels?.loadError ?? localeMessages.loadError,
     refreshError: config.labels?.refreshError ?? localeMessages.refreshError,
     retry: config.labels?.retry ?? localeMessages.retry,
-    loadingMore: config.labels?.loadingMore ?? localeMessages.loadingMore
+    loadingMore: config.labels?.loadingMore ?? localeMessages.loadingMore,
+    permission: config.labels?.permission ?? localeMessages.permission,
+    offline: config.labels?.offline ?? localeMessages.offline,
+    requestAccess: config.labels?.requestAccess ?? localeMessages.requestAccess
   }), [config.labels, localeMessages]);
   const virtualizationError = useMemo(() => {
     const virtualization = config.virtualization;
@@ -9324,11 +9475,15 @@ function WorkbenchCollection({
   const selectionToolbar = selectedKeys.size > 0 ? resolveRenderableSlot(slots?.selectionToolbar, slotContext) : null;
   const beforeItems = resolveRenderableSlot(slots?.beforeItems, slotContext);
   const footer = resolveRenderableSlot(slots?.footer, slotContext);
-  const showInitialLoading = loading && items.length === 0;
-  const showInitialError = Boolean(effectiveError) && items.length === 0 && !showInitialLoading;
-  const showEmpty = !showInitialLoading && !showInitialError && (state?.empty === true || items.length === 0);
+  const showPermission = state?.permission === true;
+  const showOffline = state?.offline === true && !showPermission;
+  const showInitialLoading = loading && items.length === 0 && !showPermission && !showOffline;
+  const showInitialError = Boolean(effectiveError) && items.length === 0 && !showPermission && !showOffline && !showInitialLoading;
+  const showEmpty = !showPermission && !showOffline && !showInitialLoading && !showInitialError && (state?.empty === true || items.length === 0);
   const loadingSlot = resolveRenderableSlot(slots?.loading, slotContext);
   const errorSlot = resolveRenderableSlot(slots?.error, slotContext);
+  const permissionSlot = resolveRenderableSlot(slots?.permission, slotContext);
+  const offlineSlot = resolveRenderableSlot(slots?.offline, slotContext);
   const emptySlot = resolveRenderableSlot(slots?.empty, slotContext);
   const loadMoreSlot = resolveRenderableSlot(slots?.loadMore, slotContext);
   const selfScrollable = config.layout.scrollOwner === "self" || config.layout.scrollOwner === void 0 && (config.layout.fillHeight || config.layout.maxHeight);
@@ -9359,14 +9514,26 @@ function WorkbenchCollection({
         hasRenderableNode(toolbar) ? /* @__PURE__ */ jsx("div", { className: classNames?.toolbar, children: toolbar }) : null,
         hasRenderableNode(selectionToolbar) ? /* @__PURE__ */ jsx("div", { className: classNames?.selectionToolbar, children: selectionToolbar }) : null,
         hasRenderableNode(beforeItems) ? /* @__PURE__ */ jsx("div", { className: classNames?.beforeItems, children: beforeItems }) : null,
-        showInitialLoading ? hasRenderableNode(loadingSlot) ? loadingSlot : /* @__PURE__ */ jsx(BaseLoadingState, { title: labels.loading }) : showInitialError ? hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsx(
-          BaseNotice,
+        showPermission ? hasRenderableNode(permissionSlot) ? permissionSlot : /* @__PURE__ */ jsx(
+          BaseSystemState,
+          {
+            kind: "permission",
+            title: labels.permission,
+            actions: statusStates.permission?.showRequestAccess !== false && callbacks?.onRequestAccess ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.requestAccess, onClick: callbacks.onRequestAccess }) : void 0
+          }
+        ) : showOffline ? hasRenderableNode(offlineSlot) ? offlineSlot : /* @__PURE__ */ jsx(
+          BaseSystemState,
+          {
+            kind: "offline",
+            title: labels.offline,
+            actions: statusStates.error?.showRetry !== false && callbacks?.onRetry ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
+          }
+        ) : showInitialLoading ? hasRenderableNode(loadingSlot) ? loadingSlot : /* @__PURE__ */ jsx(BaseLoadingState, { title: labels.loading }) : showInitialError ? hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsx(
+          BaseSystemState,
           {
-            tone: "danger",
-            role: "alert",
-            "aria-live": "assertive",
+            kind: "error",
             title: labels.loadError,
-            actions: callbacks?.onRetry ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
+            actions: statusStates.error?.showRetry !== false && callbacks?.onRetry ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
           }
         ) : showEmpty ? hasRenderableNode(emptySlot) ? emptySlot : /* @__PURE__ */ jsx(BaseEmptyState, { title: labels.empty }) : /* @__PURE__ */ jsx(
           "div",
@@ -9398,12 +9565,11 @@ function WorkbenchCollection({
           }
         ),
         items.length > 0 && effectiveError ? /* @__PURE__ */ jsx("div", { className: classNames?.status, children: hasRenderableNode(errorSlot) ? errorSlot : /* @__PURE__ */ jsx(
-          BaseNotice,
+          BaseSystemState,
           {
-            tone: "danger",
-            role: "alert",
+            kind: "error",
             title: labels.refreshError,
-            actions: callbacks?.onRetry ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
+            actions: statusStates.error?.showRetry !== false && callbacks?.onRetry ? /* @__PURE__ */ jsx(BaseButton, { size: "sm", label: labels.retry, onClick: callbacks.onRetry }) : void 0
           }
         ) }) : null,
         items.length > 0 && (hasMore || loadingMore) ? /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: classNames?.loadMore, "data-collection-load-more": "", children: hasRenderableNode(loadMoreSlot) ? loadMoreSlot : loadingMore ? /* @__PURE__ */ jsx(BaseLoadingState, { title: labels.loadingMore }) : null }) : null,