@mond-design-system/react 4.4.0 → 4.6.0

package/dist/index.cjs

@@ -1026,11 +1026,13 @@ function VisuallyHidden({ as = "span", className, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Skeleton/Skeleton.module.css?mds-scoped
-var Skeleton_module_default = { "skeleton": "mds-Skeleton__skeleton", "pulse": "mds-Skeleton__pulse", "variant-text": "mds-Skeleton__variant-text", "variant-rect": "mds-Skeleton__variant-rect", "variant-circle": "mds-Skeleton__variant-circle" };
+var Skeleton_module_default = { "skeleton": "mds-Skeleton__skeleton", "pulse": "mds-Skeleton__pulse", "lines": "mds-Skeleton__lines", "variant-text": "mds-Skeleton__variant-text", "variant-rect": "mds-Skeleton__variant-rect", "variant-circle": "mds-Skeleton__variant-circle" };
+var LAST_LINE = "62%";
 function Skeleton({
   variant = "text",
   width,
   height,
+  lines = 1,
   className,
   style,
   ...rest
@@ -1039,15 +1041,18 @@ function Skeleton({
     ...width ? { "--skeleton-w": width } : {},
     ...height ? { "--skeleton-h": height } : {}
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: cx(Skeleton_module_default.skeleton, Skeleton_module_default[`variant-${variant}`], className),
-      style: { ...vars, ...style },
-      ...rest
-    }
-  );
+  const box = cx(Skeleton_module_default.skeleton, Skeleton_module_default[`variant-${variant}`], className);
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: Skeleton_module_default.lines, style, ...rest, children: Array.from({ length: lines }, (_, line) => /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: box,
+        style: line === lines - 1 ? { ...vars, "--skeleton-w": LAST_LINE } : vars
+      },
+      line
+    )) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: box, style: { ...vars, ...style }, ...rest });
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ProgressBar/ProgressBar.module.css?mds-scoped
@@ -1321,7 +1326,7 @@ function SearchField({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/List/List.module.css?mds-scoped
-var List_module_default = { "group": "mds-List__group", "labelledGroup": "mds-List__labelledGroup", "label": "mds-List__label", "item": "mds-List__item", "surface-card": "mds-List__surface-card", "surface-sunken": "mds-List__surface-sunken", "surface-accent": "mds-List__surface-accent", "surface-plain": "mds-List__surface-plain", "row": "mds-List__row", "interactive": "mds-List__interactive", "leading": "mds-List__leading", "trailing": "mds-List__trailing", "text": "mds-List__text", "title": "mds-List__title", "description": "mds-List__description" };
+var List_module_default = { "group": "mds-List__group", "labelledGroup": "mds-List__labelledGroup", "label": "mds-List__label", "item": "mds-List__item", "surface-card": "mds-List__surface-card", "surface-sunken": "mds-List__surface-sunken", "surface-accent": "mds-List__surface-accent", "surface-plain": "mds-List__surface-plain", "row": "mds-List__row", "interactive": "mds-List__interactive", "withActions": "mds-List__withActions", "actions": "mds-List__actions", "leading": "mds-List__leading", "trailing": "mds-List__trailing", "text": "mds-List__text", "title": "mds-List__title", "description": "mds-List__description" };
 var ListGroupContext = react.createContext(false);
 function ListGroup({ label, className, ...rest }) {
   const headingId = react.useId();
@@ -1344,6 +1349,7 @@ function ListItem({
   description,
   leading,
   trailing,
+  actions,
   onClick,
   pressed,
   href,
@@ -1365,22 +1371,30 @@ function ListItem({
     ] }),
     trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.trailing, children: trailing })
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Root,
     {
-      className: cx(List_module_default.item, resolved && List_module_default[`surface-${resolved}`], className),
+      className: cx(
+        List_module_default.item,
+        actions != null && List_module_default.withActions,
+        resolved && List_module_default[`surface-${resolved}`],
+        className
+      ),
       ref,
       ...rest,
-      children: href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: cx(List_module_default.row, List_module_default.interactive),
-          onClick,
-          "aria-pressed": pressed,
-          children: content
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.row, children: content })
+      children: [
+        href !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(LinkElement, { className: cx(List_module_default.row, List_module_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(List_module_default.row, List_module_default.interactive),
+            onClick,
+            "aria-pressed": pressed,
+            children: content
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.row, children: content }),
+        actions != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: List_module_default.actions, children: actions })
+      ]
     }
   );
 }
@@ -1563,7 +1577,7 @@ function ToastProvider({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Stack/Stack.module.css?mds-scoped
-var Stack_module_default = { "stack": "mds-Stack__stack", "gap-hairline": "mds-Stack__gap-hairline", "gap-tight": "mds-Stack__gap-tight", "gap-base": "mds-Stack__gap-base", "gap-loose": "mds-Stack__gap-loose", "gap-section": "mds-Stack__gap-section", "align-start": "mds-Stack__align-start", "align-center": "mds-Stack__align-center", "align-end": "mds-Stack__align-end", "align-stretch": "mds-Stack__align-stretch" };
+var Stack_module_default = { "stack": "mds-Stack__stack", "gap-hairline": "mds-Stack__gap-hairline", "gap-tight": "mds-Stack__gap-tight", "gap-base": "mds-Stack__gap-base", "gap-loose": "mds-Stack__gap-loose", "gap-group": "mds-Stack__gap-group", "gap-section": "mds-Stack__gap-section", "align-start": "mds-Stack__align-start", "align-center": "mds-Stack__align-center", "align-end": "mds-Stack__align-end", "align-stretch": "mds-Stack__align-stretch" };
 
 // src/components/Stack/Stack.tsx
 function Stack({