@mond-design-system/react 4.0.0 → 4.1.0

package/dist/index.cjs

@@ -1229,7 +1229,7 @@ function Switch({
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SegmentedControl/SegmentedControl.module.css?mds-scoped
-var SegmentedControl_module_default = { "group": "mds-SegmentedControl__group", "segment": "mds-SegmentedControl__segment", "fullWidth": "mds-SegmentedControl__fullWidth", "face": "mds-SegmentedControl__face", "input": "mds-SegmentedControl__input" };
+var SegmentedControl_module_default = { "group": "mds-SegmentedControl__group", "size-md": "mds-SegmentedControl__size-md", "face": "mds-SegmentedControl__face", "size-sm": "mds-SegmentedControl__size-sm", "bare": "mds-SegmentedControl__bare", "segment": "mds-SegmentedControl__segment", "fullWidth": "mds-SegmentedControl__fullWidth", "input": "mds-SegmentedControl__input" };
 function SegmentedControl({
   label,
   options,
@@ -1237,24 +1237,40 @@ function SegmentedControl({
   onChange,
   disabled = false,
   fullWidth = false,
+  size = "md",
+  bare = false,
   className
 }) {
   const name = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "radiogroup", "aria-label": label, className: cx(SegmentedControl_module_default.group, fullWidth && SegmentedControl_module_default.fullWidth, className), children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: SegmentedControl_module_default.segment, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "radio",
-        name,
-        value: option.value,
-        checked: option.value === value,
-        onChange: () => onChange(option.value),
-        disabled,
-        className: SegmentedControl_module_default.input
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: SegmentedControl_module_default.face, children: option.label })
-  ] }, option.value)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cx(
+        SegmentedControl_module_default.group,
+        SegmentedControl_module_default[`size-${size}`],
+        fullWidth && SegmentedControl_module_default.fullWidth,
+        bare && SegmentedControl_module_default.bare,
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: SegmentedControl_module_default.segment, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            name,
+            value: option.value,
+            checked: option.value === value,
+            onChange: () => onChange(option.value),
+            disabled,
+            className: SegmentedControl_module_default.input
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: SegmentedControl_module_default.face, children: option.label })
+      ] }, option.value))
+    }
+  );
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.module.css?mds-scoped
@@ -1469,7 +1485,7 @@ function TabPanel({ value, className, children, ...rest }) {
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Toast/Toast.module.css?mds-scoped
-var Toast_module_default = { "viewport": "mds-Toast__viewport", "toast": "mds-Toast__toast", "tone-success": "mds-Toast__tone-success", "tone-danger": "mds-Toast__tone-danger", "body": "mds-Toast__body", "title": "mds-Toast__title", "description": "mds-Toast__description", "close": "mds-Toast__close mds-hit-area__hitArea", "closeGlyph": "mds-Toast__closeGlyph" };
+var Toast_module_default = { "viewport": "mds-Toast__viewport", "toast": "mds-Toast__toast", "tone-success": "mds-Toast__tone-success", "tone-danger": "mds-Toast__tone-danger", "body": "mds-Toast__body", "title": "mds-Toast__title", "description": "mds-Toast__description", "close": "mds-Toast__close mds-hit-area__hitArea", "closeGlyph": "mds-Toast__closeGlyph", "action": "mds-Toast__action mds-hit-area__hitArea" };
 var ToastContext = react.createContext(null);
 function useToast() {
   const context = react.useContext(ToastContext);
@@ -1483,13 +1499,20 @@ function ToastProvider({
 }) {
   const [toasts, setToasts] = react.useState([]);
   const nextId = react.useRef(1);
+  const leaving = react.useRef(/* @__PURE__ */ new Map());
   const dismiss = react.useCallback((id) => {
     setToasts((current) => current.filter((entry) => entry.id !== id));
+    const said = leaving.current.get(id);
+    if (said !== void 0) {
+      leaving.current.delete(id);
+      said();
+    }
   }, []);
   const toast = react.useCallback(
-    ({ title, description, tone = "neutral", duration = 5e3 }) => {
+    ({ title, description, tone = "neutral", duration = 5e3, action, onDismiss }) => {
       const id = nextId.current++;
-      setToasts((current) => [...current, { id, title, description, tone }]);
+      if (onDismiss !== void 0) leaving.current.set(id, onDismiss);
+      setToasts((current) => [...current, { id, title, description, tone, action }]);
       if (duration > 0) setTimeout(() => dismiss(id), duration);
       return id;
     },
@@ -1503,6 +1526,18 @@ function ToastProvider({
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: Toast_module_default.title, children: entry.title }),
         entry.description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Toast_module_default.description, children: entry.description })
       ] }),
+      entry.action !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: Toast_module_default.action,
+          onClick: () => {
+            entry.action?.onClick();
+            dismiss(entry.id);
+          },
+          children: entry.action.label
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -1720,9 +1755,9 @@ function ScreenContent({ children, flush = false, className, ref, ...rest }) {
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/AppBar/AppBar.module.css?mds-scoped
 var AppBar_module_default = { "bar": "mds-AppBar__bar", "title": "mds-AppBar__title", "text": "mds-AppBar__text", "subtitle": "mds-AppBar__subtitle", "slot": "mds-AppBar__slot", "trailing": "mds-AppBar__trailing" };
-function AppBar({ title, subtitle, leading, trailing }) {
+function AppBar({ title, subtitle, leading, trailing, className, ref, ...rest }) {
   const heading = title ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: AppBar_module_default.title, children: title }) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: AppBar_module_default.bar, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { ref, className: cx(AppBar_module_default.bar, className), ...rest, children: [
     leading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: AppBar_module_default.slot, children: leading }) : null,
     subtitle != null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: AppBar_module_default.text, children: [
       heading,
@@ -1737,14 +1772,23 @@ var TabBar_module_default = { "bar": "mds-TabBar__bar", "item": "mds-TabBar__ite
 function TabBar({ label, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className: TabBar_module_default.bar, children });
 }
-function TabBarItem({ label, icon, href, onClick, active = false, badge = false, as }) {
+function TabBarItem({
+  label,
+  icon,
+  href,
+  onClick,
+  active = false,
+  badge = false,
+  as,
+  hideLabel = false
+}) {
   const className = cx(TabBar_module_default.item, active && TabBar_module_default.active);
   const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: TabBar_module_default.icon, "aria-hidden": "true", children: [
       icon,
       badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.badge, "data-testid": "mds-tabbar-badge" }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.label, children: label })
+    hideLabel ? /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { children: label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: TabBar_module_default.label, children: label })
   ] });
   if (href !== void 0) {
     const Element = as ?? "a";