npm - @mond-design-system/react - Versions diffs - 4.7.0 → 4.9.0 - Mend

@mond-design-system/react 4.7.0 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -51,7 +51,8 @@ Dark mode is `data-theme="dark"` on `<html>`. Nothing else changes.
 **Actions** — `Button`, `CountButton`
 **Forms** — `Field`, `Input`, `PasswordInput`, `Textarea`, `Select`, `Checkbox`,
-`Radio`, `Switch`, `SegmentedControl`, `SearchField`, `DateTimePicker`
+`Radio`, `Switch`, `SegmentedControl`, `SearchField`, `DateTimePicker`,
+`FileDrop`
 **Content** — `Card`, `Avatar`, `AvatarGroup`, `Badge`, `Tag`, `Chip`,
 `ChipGroup`, `ChipBar`, `Divider`, `ListGroup`, `ListItem`, `EmptyState`
@@ -60,7 +61,7 @@ Dark mode is `data-theme="dark"` on `<html>`. Nothing else changes.
 **Layout** — `Stack`, `Inline`, `Container`, `Screen`, `ScreenContent`
-**Navigation** — `Tabs`, `TabList`, `Tab`, `TabPanel`, `AppBar`, `TabBar`
+**Navigation** — `Tabs`, `TabList`, `Tab`, `TabPanel`, `AppBar`, `TabBar`, `SideNav`
 **Overlays** — `Modal`, `Sheet`, `ConfirmDialog`

package/dist/index.cjs CHANGED Viewed

@@ -1944,6 +1944,59 @@ function TabBarAction({ label, icon, onClick }) {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": label, className: TabBar_module_default.action, onClick, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: icon }) });
 }
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SideNav/SideNav.module.css?mds-scoped
+var SideNav_module_default = { "nav": "mds-SideNav__nav", "group": "mds-SideNav__group", "heading": "mds-SideNav__heading", "item": "mds-SideNav__item", "active": "mds-SideNav__active", "icon": "mds-SideNav__icon", "label": "mds-SideNav__label", "count": "mds-SideNav__count" };
+function SideNav({ label, className, children, ref, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, "aria-label": label, className: cx(SideNav_module_default.nav, className), ...rest, children });
+}
+function SideNavGroup({
+  label,
+  className,
+  children,
+  ref,
+  ...rest
+}) {
+  const headingId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      className: cx(SideNav_module_default.group, className),
+      role: label != null ? "group" : void 0,
+      "aria-labelledby": label != null ? headingId : void 0,
+      ...rest,
+      children: [
+        label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SideNav_module_default.heading, id: headingId, children: label }),
+        children
+      ]
+    }
+  );
+}
+function SideNavItem({
+  label,
+  icon,
+  href,
+  onClick,
+  active = false,
+  count,
+  countLabel,
+  max = 99,
+  as
+}) {
+  const className = cx(SideNav_module_default.item, active && SideNav_module_default.active);
+  const current = active ? "page" : void 0;
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    icon != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: SideNav_module_default.icon, "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: SideNav_module_default.label, children: label }),
+    count !== void 0 && count > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "accent", role: "status", "aria-label": countLabel, className: SideNav_module_default.count, children: count > max ? `${max}+` : count })
+  ] });
+  if (href !== void 0) {
+    const Element = as ?? "a";
+    return /* @__PURE__ */ jsxRuntime.jsx(Element, { href, className, "aria-current": current, onClick, children: content });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className, "aria-current": current, onClick, children: content });
+}
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/MediaPlaceholder/MediaPlaceholder.module.css?mds-scoped
 var MediaPlaceholder_module_default = { "media": "mds-MediaPlaceholder__media", "fill": "mds-MediaPlaceholder__fill", "image": "mds-MediaPlaceholder__image", "caption": "mds-MediaPlaceholder__caption", "cover": "mds-MediaPlaceholder__cover", "blurred": "mds-MediaPlaceholder__blurred" };
 function MediaPlaceholder({
@@ -2218,6 +2271,80 @@ function UploadProgress({
   ] });
 }
+// mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/FileDrop/FileDrop.module.css?mds-scoped
+var FileDrop_module_default = { "drop": "mds-FileDrop__drop", "target": "mds-FileDrop__target", "over": "mds-FileDrop__over", "icon": "mds-FileDrop__icon", "picker": "mds-FileDrop__picker" };
+function FileDrop({
+  label,
+  hint,
+  icon,
+  accept,
+  multiple = false,
+  disabled = false,
+  onFiles,
+  className,
+  ref,
+  ...rest
+}) {
+  const picker = react.useRef(null);
+  const [over, setOver] = react.useState(false);
+  const take = (list) => {
+    if (disabled || list === null || list.length === 0) return;
+    const files = [...list];
+    onFiles(multiple ? files : files.slice(0, 1));
+  };
+  const dropped = (event) => {
+    event.preventDefault();
+    setOver(false);
+    take(event.dataTransfer.files);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cx(FileDrop_module_default.drop, over && FileDrop_module_default.over, className),
+      ref,
+      onDragOver: (event) => {
+        event.preventDefault();
+        setOver(!disabled);
+      },
+      onDragLeave: () => setOver(false),
+      onDrop: dropped,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: FileDrop_module_default.target,
+            disabled,
+            onClick: () => picker.current?.click(),
+            children: [
+              icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FileDrop_module_default.icon, children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", children: label }),
+              hint !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", children: hint })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "file",
+            className: FileDrop_module_default.picker,
+            ref: picker,
+            tabIndex: -1,
+            "aria-hidden": "true",
+            multiple,
+            ...accept === void 0 ? {} : { accept },
+            onChange: (event) => {
+              take(event.target.files);
+              event.target.value = "";
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Lightbox/Lightbox.module.css?mds-scoped
 var Lightbox_module_default = { "panel": "mds-Lightbox__panel", "bar": "mds-Lightbox__bar", "surface": "mds-Lightbox__surface", "image": "mds-Lightbox__image", "caption": "mds-Lightbox__caption" };
 var MIN_SCALE = 1;
@@ -2632,6 +2759,7 @@ exports.DateTimePicker = DateTimePicker;
 exports.Divider = Divider;
 exports.EmptyState = EmptyState;
 exports.Field = Field;
+exports.FileDrop = FileDrop;
 exports.Heading = Heading;
 exports.Icon = Icon;
 exports.IconProvider = IconProvider;
@@ -2660,6 +2788,9 @@ exports.Sheet = Sheet;
 exports.SheetBody = SheetBody;
 exports.SheetFooter = SheetFooter;
 exports.SheetHeader = SheetHeader;
+exports.SideNav = SideNav;
+exports.SideNavGroup = SideNavGroup;
+exports.SideNavItem = SideNavItem;
 exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
 exports.Stack = Stack;