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

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, JSX, ReactElement, ReactNode, ButtonHTMLAttributes, ElementType, Ref, AnchorHTMLAttributes, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, LiHTMLAttributes, RefObject, KeyboardEvent } from 'react';
+import { CSSProperties, HTMLAttributes, JSX, ReactElement, ReactNode, ButtonHTMLAttributes, ElementType, Ref, AnchorHTMLAttributes, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, KeyboardEvent } from 'react';
 
 /**
  * Join class names, dropping anything falsy.
@@ -120,7 +120,7 @@ interface IconProps extends HTMLAttributes<HTMLSpanElement> {
 /** A glyph from the app-registered set, sized on the core scale. */
 declare function Icon({ name, size, label, className, ...rest }: IconProps): ReactElement;
 
-type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "highlight";
 type ButtonSize = "sm" | "md" | "lg";
 interface ButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
     variant?: ButtonVariant;
@@ -158,10 +158,15 @@ type ButtonProps = ButtonBaseProps & IconOnlyEnforcement;
  */
 declare function Button({ variant, size, iconLeft, iconRight, loading, disabled, fullWidth, iconOnly, type, href, as, className, children, ...rest }: ButtonProps): ReactElement;
 
-type LinkVariant = "inline" | "standalone";
+type LinkVariant = "inline" | "standalone" | "plain";
+type LinkSize = "xs" | "sm" | "base" | "lg" | "xl";
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** inline = underlined, lives in running text. standalone = nav/action link. */
+    /** inline = underlined, lives in running text. standalone = nav/action link.
+        plain = inherits the surrounding color and weight, underlines on hover —
+        for links whose context already marks them (a card title, a list row). */
     variant?: LinkVariant;
+    /** Font size on the core text scale. Default inherits from context. */
+    size?: LinkSize;
     /** Opens in a new tab with rel protection. */
     external?: boolean;
     /** Element override, e.g. a router's Link. */
@@ -178,25 +183,33 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  * <Link as={NextLink} href="/about">About</Link>
  * ```
  */
-declare function Link({ variant, external, as: Element, className, ...rest }: LinkProps): ReactElement;
+declare function Link({ variant, size, external, as: Element, className, ...rest }: LinkProps): ReactElement;
 
-type AvatarSize = "sm" | "md" | "lg";
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** One of the five brand identity tints (`--mds-avatar-tone-1..5`). */
+type AvatarTone = 1 | 2 | 3 | 4 | 5;
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /** Person's display name — accessible name and initials source. */
     name: string;
     /** Image URL; initials render when absent or empty. */
     src?: string;
     size?: AvatarSize;
+    /** Identity tint behind the initials. Pick per person (e.g. hash the name)
+        so the same person keeps the same color. */
+    tone?: AvatarTone;
+    /** Hide from assistive tech — for avatars that repeat a name already in
+        the row's text. The name prop still drives the initials. */
+    decorative?: boolean;
 }
 /**
  * Person marker. Image when available, initials otherwise — never an empty circle.
  *
  * ```tsx
  * <Avatar name="Ada Lovelace" src="/ada.jpg" />
- * <Avatar name="Grace Hopper" size="lg" />
+ * <Avatar name="Grace Hopper" size="lg" tone={2} />
  * ```
  */
-declare function Avatar({ name, src, size, className, ...rest }: AvatarProps): ReactElement;
+declare function Avatar({ name, src, size, tone, decorative, className, ...rest }: AvatarProps): ReactElement;
 
 interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Avatar children. */
@@ -220,7 +233,7 @@ interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function AvatarGroup({ children, max, size, className, ...rest }: AvatarGroupProps): ReactElement;
 
-type BadgeTone = "neutral" | "accent" | "danger" | "warning" | "success";
+type BadgeTone = "neutral" | "accent" | "danger" | "warning" | "success" | "highlight";
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: BadgeTone;
 }
@@ -234,7 +247,7 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  */
 declare function Badge({ tone, className, ...rest }: BadgeProps): ReactElement;
 
-type ChipVariant = "soft" | "outline";
+type ChipVariant = "soft" | "outline" | "highlight";
 interface ChipProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
     /** Unselected appearance. Default "soft". */
@@ -518,6 +531,14 @@ declare function Field({ label, children, hint, error, required, className }: Fi
 type InputSize = "sm" | "md" | "lg";
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     size?: InputSize;
+    /** Marks the value as failing validation — sets aria-invalid and the danger
+        border. Inside a Field the field's error state does this already. */
+    invalid?: boolean;
+    /** Decorative icon inside the leading edge. Icons carry no name here —
+        the input's label does the talking. */
+    iconLeft?: ReactNode;
+    /** Decorative icon inside the trailing edge. */
+    iconRight?: ReactNode;
     ref?: Ref<HTMLInputElement>;
 }
 /**
@@ -528,10 +549,10 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
  *   <Input value={name} onChange={(e) => setName(e.target.value)} />
  * </Field>
  *
- * <Input aria-label="Amount" type="number" size="sm" />
+ * <Input aria-label="Search" iconLeft={<Icon name="search" size="sm" />} />
  * ```
  */
-declare function Input({ size, className, ...rest }: InputProps): ReactElement;
+declare function Input({ size, invalid, iconLeft, iconRight, className, ...rest }: InputProps): ReactElement;
 
 type PasswordInputProps = Omit<InputProps, "type">;
 /**
@@ -584,8 +605,9 @@ interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "siz
 declare function Select({ size, className, children, ...rest }: SelectProps): ReactElement;
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
-    /** Inline label — part of the click target. */
-    label: string;
+    /** Inline label — part of the click target. Rich content welcome (an
+        inline link, a Text run); the label element names the box either way. */
+    label: ReactNode;
     ref?: Ref<HTMLInputElement>;
 }
 /**
@@ -621,11 +643,19 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
  */
 declare function Radio({ label, className, ...rest }: RadioProps): ReactElement;
 
-interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
-    /** Inline label — part of the click target. */
-    label: string;
+interface SwitchBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Busy blocks toggling for the same reason disabled does — a second tap
+        would queue a write against a value the first one is still deciding. */
+    loading?: boolean;
     ref?: Ref<HTMLInputElement>;
 }
+type SwitchLabelEnforcement = {
+    label: string;
+} | {
+    label?: undefined;
+    "aria-label": string;
+};
+type SwitchProps = SwitchBaseProps & SwitchLabelEnforcement;
 /**
  * On/off toggle. Checkbox under the hood with role="switch" — native
  * semantics and forms integration, switch announcement.
@@ -636,9 +666,10 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
  *   checked={enabled}
  *   onChange={(e) => setEnabled(e.target.checked)}
  * />
+ * <Switch aria-label="Email on new posts" checked={on} loading={saving} onChange={toggle} />
  * ```
  */
-declare function Switch({ label, className, ...rest }: SwitchProps): ReactElement;
+declare function Switch({ label, loading, disabled, className, ...rest }: SwitchProps): ReactElement;
 
 interface SegmentOption<T extends string = string> {
     value: T;
@@ -650,6 +681,8 @@ interface SegmentedControlProps<T extends string = string> {
     options: readonly SegmentOption<T>[];
     value: T;
     onChange: (value: T) => void;
+    /** Disables the whole control — e.g. a choice locked while editing. */
+    disabled?: boolean;
     className?: string;
 }
 /**
@@ -668,7 +701,7 @@ interface SegmentedControlProps<T extends string = string> {
  * />
  * ```
  */
-declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, className, }: SegmentedControlProps<T>): ReactElement;
+declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, className, }: SegmentedControlProps<T>): ReactElement;
 
 interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "onChange"> {
     /** Accessible name. */
@@ -706,9 +739,10 @@ interface ListGroupProps extends HTMLAttributes<HTMLUListElement> {
  * ```
  */
 declare function ListGroup({ className, ...rest }: ListGroupProps): ReactElement;
-interface ListItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title" | "onClick"> {
-    title: string;
-    description?: string;
+type ListItemSurface = "card" | "sunken" | "accent" | "plain";
+interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onClick"> {
+    title: ReactNode;
+    description?: ReactNode;
     /** Slot before the text — Avatar, Icon, … */
     leading?: ReactNode;
     /** Slot after the text — Badge, chevron, … */
@@ -717,9 +751,19 @@ interface ListItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title" |
     onClick?: () => void;
     /** Makes the whole row a link. Wins over onClick. */
     href?: string;
+    /** What the row paints behind itself. Inside a ListGroup the group is the
+        card, so grouped rows default to painting nothing; standalone rows
+        default to their own card. `accent` is the tinted, accent-edged prompt
+        row. The row paints it itself because a background drawn by a wrapper
+        brings its own corner radius, which peeks past the row's in all four
+        corners. */
+    surface?: ListItemSurface;
 }
-/** One row. Static by default; interactive as one whole-row button/link. */
-declare function ListItem({ title, description, leading, trailing, onClick, href, className, ...rest }: ListItemProps): ReactElement;
+/**
+ * One row. Static by default; interactive as one whole-row button/link.
+ * An `<li>` inside a ListGroup, a standalone `<div>` row anywhere else.
+ */
+declare function ListItem({ title, description, leading, trailing, onClick, href, surface, className, ...rest }: ListItemProps): ReactElement;
 
 interface EmptyStateProps {
     title: string;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { CSSProperties, HTMLAttributes, JSX, ReactElement, ReactNode, ButtonHTMLAttributes, ElementType, Ref, AnchorHTMLAttributes, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, LiHTMLAttributes, RefObject, KeyboardEvent } from 'react';
+import { CSSProperties, HTMLAttributes, JSX, ReactElement, ReactNode, ButtonHTMLAttributes, ElementType, Ref, AnchorHTMLAttributes, MouseEventHandler, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, RefObject, KeyboardEvent } from 'react';
 
 /**
  * Join class names, dropping anything falsy.
@@ -120,7 +120,7 @@ interface IconProps extends HTMLAttributes<HTMLSpanElement> {
 /** A glyph from the app-registered set, sized on the core scale. */
 declare function Icon({ name, size, label, className, ...rest }: IconProps): ReactElement;
 
-type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "highlight";
 type ButtonSize = "sm" | "md" | "lg";
 interface ButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
     variant?: ButtonVariant;
@@ -158,10 +158,15 @@ type ButtonProps = ButtonBaseProps & IconOnlyEnforcement;
  */
 declare function Button({ variant, size, iconLeft, iconRight, loading, disabled, fullWidth, iconOnly, type, href, as, className, children, ...rest }: ButtonProps): ReactElement;
 
-type LinkVariant = "inline" | "standalone";
+type LinkVariant = "inline" | "standalone" | "plain";
+type LinkSize = "xs" | "sm" | "base" | "lg" | "xl";
 interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** inline = underlined, lives in running text. standalone = nav/action link. */
+    /** inline = underlined, lives in running text. standalone = nav/action link.
+        plain = inherits the surrounding color and weight, underlines on hover —
+        for links whose context already marks them (a card title, a list row). */
     variant?: LinkVariant;
+    /** Font size on the core text scale. Default inherits from context. */
+    size?: LinkSize;
     /** Opens in a new tab with rel protection. */
     external?: boolean;
     /** Element override, e.g. a router's Link. */
@@ -178,25 +183,33 @@ interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
  * <Link as={NextLink} href="/about">About</Link>
  * ```
  */
-declare function Link({ variant, external, as: Element, className, ...rest }: LinkProps): ReactElement;
+declare function Link({ variant, size, external, as: Element, className, ...rest }: LinkProps): ReactElement;
 
-type AvatarSize = "sm" | "md" | "lg";
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+/** One of the five brand identity tints (`--mds-avatar-tone-1..5`). */
+type AvatarTone = 1 | 2 | 3 | 4 | 5;
 interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
     /** Person's display name — accessible name and initials source. */
     name: string;
     /** Image URL; initials render when absent or empty. */
     src?: string;
     size?: AvatarSize;
+    /** Identity tint behind the initials. Pick per person (e.g. hash the name)
+        so the same person keeps the same color. */
+    tone?: AvatarTone;
+    /** Hide from assistive tech — for avatars that repeat a name already in
+        the row's text. The name prop still drives the initials. */
+    decorative?: boolean;
 }
 /**
  * Person marker. Image when available, initials otherwise — never an empty circle.
  *
  * ```tsx
  * <Avatar name="Ada Lovelace" src="/ada.jpg" />
- * <Avatar name="Grace Hopper" size="lg" />
+ * <Avatar name="Grace Hopper" size="lg" tone={2} />
  * ```
  */
-declare function Avatar({ name, src, size, className, ...rest }: AvatarProps): ReactElement;
+declare function Avatar({ name, src, size, tone, decorative, className, ...rest }: AvatarProps): ReactElement;
 
 interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Avatar children. */
@@ -220,7 +233,7 @@ interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function AvatarGroup({ children, max, size, className, ...rest }: AvatarGroupProps): ReactElement;
 
-type BadgeTone = "neutral" | "accent" | "danger" | "warning" | "success";
+type BadgeTone = "neutral" | "accent" | "danger" | "warning" | "success" | "highlight";
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     tone?: BadgeTone;
 }
@@ -234,7 +247,7 @@ interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
  */
 declare function Badge({ tone, className, ...rest }: BadgeProps): ReactElement;
 
-type ChipVariant = "soft" | "outline";
+type ChipVariant = "soft" | "outline" | "highlight";
 interface ChipProps extends HTMLAttributes<HTMLElement> {
     children: ReactNode;
     /** Unselected appearance. Default "soft". */
@@ -518,6 +531,14 @@ declare function Field({ label, children, hint, error, required, className }: Fi
 type InputSize = "sm" | "md" | "lg";
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     size?: InputSize;
+    /** Marks the value as failing validation — sets aria-invalid and the danger
+        border. Inside a Field the field's error state does this already. */
+    invalid?: boolean;
+    /** Decorative icon inside the leading edge. Icons carry no name here —
+        the input's label does the talking. */
+    iconLeft?: ReactNode;
+    /** Decorative icon inside the trailing edge. */
+    iconRight?: ReactNode;
     ref?: Ref<HTMLInputElement>;
 }
 /**
@@ -528,10 +549,10 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">
  *   <Input value={name} onChange={(e) => setName(e.target.value)} />
  * </Field>
  *
- * <Input aria-label="Amount" type="number" size="sm" />
+ * <Input aria-label="Search" iconLeft={<Icon name="search" size="sm" />} />
  * ```
  */
-declare function Input({ size, className, ...rest }: InputProps): ReactElement;
+declare function Input({ size, invalid, iconLeft, iconRight, className, ...rest }: InputProps): ReactElement;
 
 type PasswordInputProps = Omit<InputProps, "type">;
 /**
@@ -584,8 +605,9 @@ interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "siz
 declare function Select({ size, className, children, ...rest }: SelectProps): ReactElement;
 
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
-    /** Inline label — part of the click target. */
-    label: string;
+    /** Inline label — part of the click target. Rich content welcome (an
+        inline link, a Text run); the label element names the box either way. */
+    label: ReactNode;
     ref?: Ref<HTMLInputElement>;
 }
 /**
@@ -621,11 +643,19 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
  */
 declare function Radio({ label, className, ...rest }: RadioProps): ReactElement;
 
-interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
-    /** Inline label — part of the click target. */
-    label: string;
+interface SwitchBaseProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /** Busy blocks toggling for the same reason disabled does — a second tap
+        would queue a write against a value the first one is still deciding. */
+    loading?: boolean;
     ref?: Ref<HTMLInputElement>;
 }
+type SwitchLabelEnforcement = {
+    label: string;
+} | {
+    label?: undefined;
+    "aria-label": string;
+};
+type SwitchProps = SwitchBaseProps & SwitchLabelEnforcement;
 /**
  * On/off toggle. Checkbox under the hood with role="switch" — native
  * semantics and forms integration, switch announcement.
@@ -636,9 +666,10 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"
  *   checked={enabled}
  *   onChange={(e) => setEnabled(e.target.checked)}
  * />
+ * <Switch aria-label="Email on new posts" checked={on} loading={saving} onChange={toggle} />
  * ```
  */
-declare function Switch({ label, className, ...rest }: SwitchProps): ReactElement;
+declare function Switch({ label, loading, disabled, className, ...rest }: SwitchProps): ReactElement;
 
 interface SegmentOption<T extends string = string> {
     value: T;
@@ -650,6 +681,8 @@ interface SegmentedControlProps<T extends string = string> {
     options: readonly SegmentOption<T>[];
     value: T;
     onChange: (value: T) => void;
+    /** Disables the whole control — e.g. a choice locked while editing. */
+    disabled?: boolean;
     className?: string;
 }
 /**
@@ -668,7 +701,7 @@ interface SegmentedControlProps<T extends string = string> {
  * />
  * ```
  */
-declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, className, }: SegmentedControlProps<T>): ReactElement;
+declare function SegmentedControl<T extends string = string>({ label, options, value, onChange, disabled, className, }: SegmentedControlProps<T>): ReactElement;
 
 interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "value" | "onChange"> {
     /** Accessible name. */
@@ -706,9 +739,10 @@ interface ListGroupProps extends HTMLAttributes<HTMLUListElement> {
  * ```
  */
 declare function ListGroup({ className, ...rest }: ListGroupProps): ReactElement;
-interface ListItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title" | "onClick"> {
-    title: string;
-    description?: string;
+type ListItemSurface = "card" | "sunken" | "accent" | "plain";
+interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "onClick"> {
+    title: ReactNode;
+    description?: ReactNode;
     /** Slot before the text — Avatar, Icon, … */
     leading?: ReactNode;
     /** Slot after the text — Badge, chevron, … */
@@ -717,9 +751,19 @@ interface ListItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, "title" |
     onClick?: () => void;
     /** Makes the whole row a link. Wins over onClick. */
     href?: string;
+    /** What the row paints behind itself. Inside a ListGroup the group is the
+        card, so grouped rows default to painting nothing; standalone rows
+        default to their own card. `accent` is the tinted, accent-edged prompt
+        row. The row paints it itself because a background drawn by a wrapper
+        brings its own corner radius, which peeks past the row's in all four
+        corners. */
+    surface?: ListItemSurface;
 }
-/** One row. Static by default; interactive as one whole-row button/link. */
-declare function ListItem({ title, description, leading, trailing, onClick, href, className, ...rest }: ListItemProps): ReactElement;
+/**
+ * One row. Static by default; interactive as one whole-row button/link.
+ * An `<li>` inside a ListGroup, a standalone `<div>` row anywhere else.
+ */
+declare function ListItem({ title, description, leading, trailing, onClick, href, surface, className, ...rest }: ListItemProps): ReactElement;
 
 interface EmptyStateProps {
     title: string;