@mond-design-system/react 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/index.js

@@ -173,6 +173,7 @@ var Button_default = {
   "variant-primary": "Button_variant-primary",
   "variant-secondary": "Button_variant-secondary",
   "variant-ghost": "Button_variant-ghost",
+  "variant-highlight": "Button_variant-highlight",
   "variant-danger": "Button_variant-danger",
   fullWidth: "Button_fullWidth",
   "icon-only": "Button_icon-only"
@@ -212,7 +213,7 @@ function Button({
       ...own,
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, { size: SPINNER_PX[size] }) : iconLeft,
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: SPINNER_PX[size], label: "", "aria-hidden": "true" }) : iconLeft,
         children,
         !loading && iconRight
       ]
@@ -224,22 +225,36 @@ function Button({
 var Link_default = {
   link: "Link_link",
   "variant-inline": "Link_variant-inline",
-  "variant-standalone": "Link_variant-standalone"
+  "variant-standalone": "Link_variant-standalone",
+  "variant-plain": "Link_variant-plain",
+  "size-xs": "Link_size-xs",
+  "size-sm": "Link_size-sm",
+  "size-base": "Link_size-base",
+  "size-lg": "Link_size-lg",
+  "size-xl": "Link_size-xl"
 };
 function Link({
   variant = "inline",
+  size,
   external = false,
   as: Element = "a",
   className,
   ...rest
 }) {
   const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
+  const typeProps = Element === "button" ? { type: rest.type ?? "button" } : {};
   return /* @__PURE__ */ jsx(
     Element,
     {
-      className: cx(Link_default.link, Link_default[`variant-${variant}`], className),
+      className: cx(
+        Link_default.link,
+        Link_default[`variant-${variant}`],
+        size && Link_default[`size-${size}`],
+        className
+      ),
       ...externalProps,
-      ...rest
+      ...rest,
+      ...typeProps
     }
   );
 }
@@ -247,9 +262,16 @@ function Link({
 // src/components/Avatar/Avatar.module.css
 var Avatar_default = {
   avatar: "Avatar_avatar",
+  "size-xs": "Avatar_size-xs",
   "size-sm": "Avatar_size-sm",
   "size-md": "Avatar_size-md",
   "size-lg": "Avatar_size-lg",
+  "size-xl": "Avatar_size-xl",
+  "tone-1": "Avatar_tone-1",
+  "tone-2": "Avatar_tone-2",
+  "tone-3": "Avatar_tone-3",
+  "tone-4": "Avatar_tone-4",
+  "tone-5": "Avatar_tone-5",
   image: "Avatar_image",
   initials: "Avatar_initials"
 };
@@ -259,8 +281,37 @@ function initials(name) {
   const last = words.length > 1 ? words.at(-1)?.[0] ?? "" : "";
   return (first + last).toUpperCase();
 }
-function Avatar({ name, src, size = "md", className, ...rest }) {
-  return /* @__PURE__ */ jsx("span", { className: cx(Avatar_default.avatar, Avatar_default[`size-${size}`], className), ...rest, children: src ? /* @__PURE__ */ jsx("img", { className: Avatar_default.image, src, alt: name }) : /* @__PURE__ */ jsx("span", { role: "img", "aria-label": name, className: Avatar_default.initials, children: initials(name) }) });
+function Avatar({
+  name,
+  src,
+  size = "md",
+  tone,
+  decorative = false,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cx(
+        Avatar_default.avatar,
+        Avatar_default[`size-${size}`],
+        tone !== void 0 && Avatar_default[`tone-${tone}`],
+        className
+      ),
+      "aria-hidden": decorative || void 0,
+      ...rest,
+      children: src ? /* @__PURE__ */ jsx("img", { className: Avatar_default.image, src, alt: decorative ? "" : name }) : /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: decorative ? void 0 : "img",
+          "aria-label": decorative ? void 0 : name,
+          className: Avatar_default.initials,
+          children: initials(name)
+        }
+      )
+    }
+  );
 }
 
 // src/components/AvatarGroup/AvatarGroup.module.css
@@ -303,6 +354,7 @@ var Badge_default = {
   badge: "Badge_badge",
   "tone-neutral": "Badge_tone-neutral",
   "tone-accent": "Badge_tone-accent",
+  "tone-highlight": "Badge_tone-highlight",
   "tone-danger": "Badge_tone-danger",
   "tone-warning": "Badge_tone-warning",
   "tone-success": "Badge_tone-success"
@@ -316,6 +368,7 @@ var Chip_default = {
   chip: "Chip_chip",
   "variant-soft": "Chip_variant-soft",
   "variant-outline": "Chip_variant-outline",
+  "variant-highlight": "Chip_variant-highlight",
   selected: "Chip_selected",
   interactive: "Chip_interactive",
   disabled: "Chip_disabled"
@@ -1074,20 +1127,45 @@ var Input_default = {
   input: "Input_input",
   "size-sm": "Input_size-sm",
   "size-md": "Input_size-md",
-  "size-lg": "Input_size-lg"
+  "size-lg": "Input_size-lg",
+  iconWrap: "Input_iconWrap",
+  icon: "Input_icon",
+  iconLeft: "Input_iconLeft",
+  iconRight: "Input_iconRight",
+  "with-icon-left": "Input_with-icon-left",
+  "with-icon-right": "Input_with-icon-right"
 };
-function Input({ size = "md", className, ...rest }) {
+function Input({
+  size = "md",
+  invalid,
+  iconLeft,
+  iconRight,
+  className,
+  ...rest
+}) {
   const field = useFieldContext();
-  return /* @__PURE__ */ jsx(
+  const input = /* @__PURE__ */ jsx(
     "input",
     {
       id: rest.id ?? field?.id,
       "aria-describedby": rest["aria-describedby"] ?? field?.describedBy,
-      "aria-invalid": rest["aria-invalid"] ?? (field?.invalid || void 0),
-      className: cx(Input_default.input, Input_default[`size-${size}`], className),
+      "aria-invalid": rest["aria-invalid"] ?? ((invalid ?? field?.invalid) || void 0),
+      className: cx(
+        Input_default.input,
+        Input_default[`size-${size}`],
+        iconLeft != null && Input_default["with-icon-left"],
+        iconRight != null && Input_default["with-icon-right"],
+        className
+      ),
       ...rest
     }
   );
+  if (iconLeft == null && iconRight == null) return input;
+  return /* @__PURE__ */ jsxs("span", { className: Input_default.iconWrap, children: [
+    input,
+    iconLeft != null && /* @__PURE__ */ jsx("span", { className: cx(Input_default.icon, Input_default.iconLeft), "aria-hidden": "true", children: iconLeft }),
+    iconRight != null && /* @__PURE__ */ jsx("span", { className: cx(Input_default.icon, Input_default.iconRight), "aria-hidden": "true", children: iconRight })
+  ] });
 }
 
 // src/components/PasswordInput/PasswordInput.module.css
@@ -1191,12 +1269,33 @@ function Radio({ label, className, ...rest }) {
 var Switch_default = {
   root: "Switch_root",
   track: "Switch_track",
+  trackWrap: "Switch_trackWrap",
+  spinner: "Switch_spinner",
   label: "Switch_label"
 };
-function Switch({ label, className, ...rest }) {
+function Switch({
+  label,
+  loading = false,
+  disabled = false,
+  className,
+  ...rest
+}) {
   return /* @__PURE__ */ jsxs("label", { className: cx(Switch_default.root, className), children: [
-    /* @__PURE__ */ jsx("input", { type: "checkbox", role: "switch", className: Switch_default.track, ...rest }),
-    /* @__PURE__ */ jsx("span", { className: Switch_default.label, children: label })
+    /* @__PURE__ */ jsxs("span", { className: Switch_default.trackWrap, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          role: "switch",
+          className: Switch_default.track,
+          disabled: disabled || loading,
+          "aria-busy": loading || void 0,
+          ...rest
+        }
+      ),
+      loading && /* @__PURE__ */ jsx(Spinner, { size: 12, label: "", "aria-hidden": "true", className: Switch_default.spinner })
+    ] }),
+    label !== void 0 && /* @__PURE__ */ jsx("span", { className: Switch_default.label, children: label })
   ] });
 }
 
@@ -1212,6 +1311,7 @@ function SegmentedControl({
   options,
   value,
   onChange,
+  disabled = false,
   className
 }) {
   const name = useId();
@@ -1224,6 +1324,7 @@ function SegmentedControl({
         value: option.value,
         checked: option.value === value,
         onChange: () => onChange(option.value),
+        disabled,
         className: SegmentedControl_default.input
       }
     ),
@@ -1279,6 +1380,10 @@ function SearchField({ label, value, onChange, className, ...rest }) {
 var List_default = {
   group: "List_group",
   item: "List_item",
+  "surface-card": "List_surface-card",
+  "surface-sunken": "List_surface-sunken",
+  "surface-accent": "List_surface-accent",
+  "surface-plain": "List_surface-plain",
   row: "List_row",
   interactive: "List_interactive",
   leading: "List_leading",
@@ -1287,8 +1392,9 @@ var List_default = {
   title: "List_title",
   description: "List_description"
 };
+var ListGroupContext = createContext(false);
 function ListGroup({ className, ...rest }) {
-  return /* @__PURE__ */ jsx("ul", { className: cx(List_default.group, className), ...rest });
+  return /* @__PURE__ */ jsx(ListGroupContext.Provider, { value: true, children: /* @__PURE__ */ jsx("ul", { className: cx(List_default.group, className), ...rest }) });
 }
 function ListItem({
   title,
@@ -1297,9 +1403,13 @@ function ListItem({
   trailing,
   onClick,
   href,
+  surface,
   className,
   ...rest
 }) {
+  const inGroup = useContext(ListGroupContext);
+  const Root = inGroup ? "li" : "div";
+  const resolved = surface ?? (inGroup ? void 0 : "card");
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     leading != null && /* @__PURE__ */ jsx("span", { className: List_default.leading, children: leading }),
     /* @__PURE__ */ jsxs("span", { className: List_default.text, children: [
@@ -1308,7 +1418,14 @@ function ListItem({
     ] }),
     trailing != null && /* @__PURE__ */ jsx("span", { className: List_default.trailing, children: trailing })
   ] });
-  return /* @__PURE__ */ jsx("li", { className: cx(List_default.item, className), ...rest, children: href !== void 0 ? /* @__PURE__ */ jsx("a", { className: cx(List_default.row, List_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsx("button", { type: "button", className: cx(List_default.row, List_default.interactive), onClick, children: content }) : /* @__PURE__ */ jsx("span", { className: List_default.row, children: content }) });
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      className: cx(List_default.item, resolved && List_default[`surface-${resolved}`], className),
+      ...rest,
+      children: href !== void 0 ? /* @__PURE__ */ jsx("a", { className: cx(List_default.row, List_default.interactive), href, children: content }) : onClick !== void 0 ? /* @__PURE__ */ jsx("button", { type: "button", className: cx(List_default.row, List_default.interactive), onClick, children: content }) : /* @__PURE__ */ jsx("span", { className: List_default.row, children: content })
+    }
+  );
 }
 
 // src/components/EmptyState/EmptyState.module.css