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

package/dist/components/base/index.mjs

@@ -99,7 +99,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",
@@ -363,6 +366,9 @@ function useMonkeysBaseAppearance(explicit) {
     [explicit, inherited]
   );
 }
+function useMonkeysStatusStates() {
+  return useContext(MonkeysThemeContext).statusStates ?? {};
+}
 function useMonkeysDirection() {
   return useContext(MonkeysDirectionContext).direction;
 }
@@ -4937,6 +4943,7 @@ var BaseEmptyState = forwardRef(
     title,
     description,
     actions,
+    variant,
     appearance,
     className,
     classNames,
@@ -4945,6 +4952,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",
@@ -4955,7 +4965,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
@@ -6332,6 +6350,59 @@ var BaseLayoutSplit = 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",
@@ -6369,6 +6440,7 @@ var BaseLoadingState = forwardRef(function BaseLoadingState2({
   title,
   description,
   actions,
+  variant,
   appearance,
   className,
   classNames,
@@ -6383,8 +6455,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",
@@ -6400,13 +6475,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",
@@ -9303,59 +9384,6 @@ function BaseSegmentedControl({
     }
   );
 }
-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
-        }
-      }
-    );
-  }
-);
 var BaseSpinner = forwardRef(
   function BaseSpinner2({
     decorative = false,
@@ -9966,6 +9994,131 @@ var BaseSwitch = forwardRef(
     );
   }
 );
+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) {
@@ -11847,6 +12000,6 @@ var BaseVisuallyHidden = forwardRef(function BaseVisuallyHidden2({
   );
 });
 
-export { BaseAccordion, BaseAspectRatio, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseCode, BaseContainer, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseFieldset, BaseGrid, BaseHeading, BaseInline, BaseInput, BaseInputGroup, BaseKbd, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLink, BaseList, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseText, BaseTextarea, BaseToolbar, BaseTooltip, BaseVisuallyHidden, cn, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, resolveBaseAppearance };
+export { BaseAccordion, BaseAspectRatio, BaseAvatar, BaseBadge, BaseBreadcrumb, BaseButton, BaseCheckbox, BaseCode, BaseContainer, BaseContextMenu, BaseContextMenuCheckboxItem, BaseContextMenuContent, BaseContextMenuItem, BaseContextMenuLabel, BaseContextMenuRadioGroup, BaseContextMenuRadioItem, BaseContextMenuSeparator, BaseContextMenuSub, BaseContextMenuSubContent, BaseContextMenuSubTrigger, BaseContextMenuTrigger, BaseDescriptionList, BaseDialog, BaseDivider, BaseDropdownMenu, BaseEmptyState, BaseField, BaseFieldset, BaseGrid, BaseHeading, BaseInline, BaseInput, BaseInputGroup, BaseKbd, BaseLayout, BaseLayoutPane, BaseLayoutResizeHandle, BaseLayoutSplit, BaseLink, BaseList, BaseListItem, BaseLoadingState, BaseMultiSelect, BaseNotice, BaseNumberInput, BasePagination, BasePanel, BasePasswordInput, BasePortal, BaseProgress, BaseRadioGroup, BaseScrollArea, BaseSectionHeader, BaseSegmentedControl, BaseSelect, BaseSkeleton, BaseSpinner, BaseStack, BaseSteps, BaseSwitch, BaseSystemState, BaseTable, BaseTableBody, BaseTableCaption, BaseTableCell, BaseTableContainer, BaseTableEmpty, BaseTableFooter, BaseTableFooterBar, BaseTableHead, BaseTableHeader, BaseTableLoading, BaseTableRow, BaseTabs, BaseText, BaseTextarea, BaseToolbar, BaseTooltip, BaseVisuallyHidden, cn, getBaseBadgeToneClassName, getBaseButtonToneClassName, getBaseMenuItemToneClassName, getBaseNoticeToneClassName, resolveBaseAppearance };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map