@moodlehq/design-system 3.2.0 → 4.1.0

package/README.md

@@ -109,13 +109,13 @@ import { Button } from '@moodlehq/design-system/components/button';
 
 ### Fonts
 
-The recommended typeface for Moodle Design System is **[Roboto](https://fonts.google.com/specimen/Roboto)**. The package does not bundle font files. Provide Roboto in your application:
+The recommended typeface for Moodle Design System is **[Noto Sans](https://fonts.google.com/specimen/Noto+Sans)**. The package does not bundle font files. Provide Noto Sans in your application:
 
 **Option 1: Google Fonts CDN**
 
 ```html
 <link
-  href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+  href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
   rel="stylesheet"
 />
 ```
@@ -125,15 +125,16 @@ Place font files in your project and add `@font-face` declarations:
 
 ```css
 @font-face {
-  font-family: 'Roboto';
-  src: url('./fonts/Roboto-VariableFont_wdth,wght.woff2') format('woff2');
+  font-family: 'Noto Sans';
+  src: url('./fonts/NotoSans-VariableFont_wdth,wght.woff2') format('woff2');
   font-weight: 100 900;
   font-style: normal;
 }
 
 @font-face {
-  font-family: 'Roboto';
-  src: url('./fonts/Roboto-Italic-VariableFont_wdth,wght.woff2') format('woff2');
+  font-family: 'Noto Sans';
+  src: url('./fonts/NotoSans-Italic-VariableFont_wdth,wght.woff2')
+    format('woff2');
   font-weight: 100 900;
   font-style: italic;
 }

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactElement } from 'react';
+type BadgeVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type IconElement = ReactElement<'i' | 'svg'>;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Visible badge text. Must be a caller-supplied translated string. */
+    label: string;
+    /** Colour/semantic variant. Defaults to `primary`. */
+    variant?: BadgeVariant;
+    /** When true, renders the low-contrast (subtle) style with a light background and border. */
+    subtle?: boolean;
+    /** When true, renders fully rounded pill shape instead of the default slight rounding. */
+    pill?: boolean;
+    /** Optional icon rendered before the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `endIcon`. */
+    startIcon?: IconElement;
+    /** Optional icon rendered after the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `startIcon`. */
+    endIcon?: IconElement;
+}
+export declare const Badge: ({ label, variant, subtle, pill, startIcon, endIcon, className, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/badge/Badge.js

@@ -0,0 +1,42 @@
+import { isValidElement } from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region components/badge/Badge.tsx
+var isIconElement = (el, propName) => {
+	return isValidElement(el) && (el.type === "i" || el.type === "svg");
+};
+var allowedVariants = [
+	"primary",
+	"secondary",
+	"success",
+	"danger",
+	"warning",
+	"info"
+];
+var Badge = ({ label, variant, subtle = false, pill = false, startIcon, endIcon, className, ...props }) => {
+	const resolvedVariant = variant && allowedVariants.includes(variant) ? variant : "primary";
+	const resolvedStartIcon = isIconElement(startIcon, "startIcon") ? startIcon : null;
+	let resolvedEndIcon = isIconElement(endIcon, "endIcon") ? endIcon : null;
+	if (resolvedStartIcon && resolvedEndIcon) resolvedEndIcon = null;
+	const classes = [
+		"mds-badge",
+		"badge",
+		`mds-badge--${resolvedVariant}`
+	];
+	if (resolvedStartIcon || resolvedEndIcon) classes.push("mds-badge--has-icon");
+	if (subtle) classes.push("mds-badge--subtle");
+	if (pill) classes.push("mds-badge--pill");
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("span", {
+		className: classes.join(" "),
+		...props,
+		children: [
+			resolvedStartIcon,
+			label,
+			resolvedEndIcon
+		]
+	});
+};
+//#endregion
+export { Badge };
+
+//# sourceMappingURL=Badge.js.map

package/dist/components/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":[],"sources":["../../../components/badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement } from 'react';\nimport { isValidElement } from 'react';\n\ntype BadgeVariant =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'danger'\n  | 'warning'\n  | 'info';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\n// Runtime guard — icon props must be <i> or <svg> elements\nconst isIconElement = (el: unknown, propName: string): el is IconElement => {\n  const valid = isValidElement(el) && (el.type === 'i' || el.type === 'svg');\n  if (!valid && el != null && import.meta.env.DEV) {\n    console.error(`Badge: \\`${propName}\\` must be an <i> or <svg> element.`);\n  }\n  return valid;\n};\n\nconst allowedVariants: BadgeVariant[] = [\n  'primary',\n  'secondary',\n  'success',\n  'danger',\n  'warning',\n  'info',\n];\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Visible badge text. Must be a caller-supplied translated string. */\n  label: string;\n  /** Colour/semantic variant. Defaults to `primary`. */\n  variant?: BadgeVariant;\n  /** When true, renders the low-contrast (subtle) style with a light background and border. */\n  subtle?: boolean;\n  /** When true, renders fully rounded pill shape instead of the default slight rounding. */\n  pill?: boolean;\n  /** Optional icon rendered before the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `endIcon`. */\n  startIcon?: IconElement;\n  /** Optional icon rendered after the label. Must be an `<i>` or `<svg>` element. Mutually exclusive with `startIcon`. */\n  endIcon?: IconElement;\n}\n\nexport const Badge = ({\n  label,\n  variant,\n  subtle = false,\n  pill = false,\n  startIcon,\n  endIcon,\n  className,\n  ...props\n}: BadgeProps) => {\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant as BadgeVariant)\n      ? variant\n      : 'primary';\n\n  const resolvedStartIcon = isIconElement(startIcon, 'startIcon')\n    ? startIcon\n    : null;\n  let resolvedEndIcon = isIconElement(endIcon, 'endIcon') ? endIcon : null;\n\n  if (import.meta.env.DEV) {\n    if (variant && !allowedVariants.includes(variant as BadgeVariant)) {\n      console.warn(\n        `[MDS Badge] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n      );\n    }\n    if (resolvedStartIcon && resolvedEndIcon) {\n      console.warn(\n        '[MDS Badge] `startIcon` and `endIcon` are mutually exclusive. Rendering `startIcon` only.',\n      );\n    }\n  }\n\n  // Only one icon can be rendered at a time; startIcon takes precedence when both are provided.\n  if (resolvedStartIcon && resolvedEndIcon) {\n    resolvedEndIcon = null;\n  }\n\n  const classes = ['mds-badge', 'badge', `mds-badge--${resolvedVariant}`];\n  if (resolvedStartIcon || resolvedEndIcon) classes.push('mds-badge--has-icon');\n  if (subtle) classes.push('mds-badge--subtle');\n  if (pill) classes.push('mds-badge--pill');\n  if (className) classes.push(className);\n\n  return (\n    <span className={classes.join(' ')} {...props}>\n      {resolvedStartIcon}\n      {label}\n      {resolvedEndIcon}\n    </span>\n  );\n};\n"],"mappings":";;;AAcA,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAM,kBAAkC;CACtC;CACA;CACA;CACA;CACA;CACA;AACF;AAiBA,IAAa,SAAS,EACpB,OACA,SACA,SAAS,OACT,OAAO,OACP,WACA,SACA,WACA,GAAG,YACa;CAChB,MAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAuB,IACvD,UACA;CAEN,MAAM,oBAAoB,cAAc,WAAW,WAAW,IAC1D,YACA;CACJ,IAAI,kBAAkB,cAAc,SAAS,SAAS,IAAI,UAAU;CAgBpE,IAAI,qBAAqB,iBACvB,kBAAkB;CAGpB,MAAM,UAAU;EAAC;EAAa;EAAS,cAAc;CAAiB;CACtE,IAAI,qBAAqB,iBAAiB,QAAQ,KAAK,qBAAqB;CAC5E,IAAI,QAAQ,QAAQ,KAAK,mBAAmB;CAC5C,IAAI,MAAM,QAAQ,KAAK,iBAAiB;CACxC,IAAI,WAAW,QAAQ,KAAK,SAAS;CAErC,OACE,qBAAC,QAAD;EAAM,WAAW,QAAQ,KAAK,GAAG;EAAG,GAAI;YAAxC;GACG;GACA;GACA;EACG;;AAEV"}

package/dist/components/badge/index.d.ts

@@ -0,0 +1 @@
+export * from './Badge';

package/dist/components/badge/index.js

@@ -0,0 +1,2 @@
+import { Badge } from "./Badge.js";
+export { Badge };

package/dist/components/button/Button.d.ts

@@ -1,12 +1,13 @@
 import { ButtonHTMLAttributes, ReactElement } from 'react';
-type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'outline-primary' | 'outline-secondary' | 'outline-danger';
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline-primary' | 'outline-secondary' | 'outline-danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
 type IconElement = ReactElement<'i' | 'svg'>;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     label?: string;
     variant?: ButtonVariant;
-    size?: 'sm' | 'lg';
+    size?: ButtonSize;
     startIcon?: IconElement;
     endIcon?: IconElement;
 }
-export declare const Button: ({ label, variant, size, startIcon, endIcon, className, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/button/Button.js

@@ -1,5 +1,5 @@
-import { isValidElement } from "react";
-import { jsxs } from "react/jsx-runtime";
+import { forwardRef, isValidElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region components/button/Button.tsx
 var isIconElement = (el, propName) => {
 	return isValidElement(el) && (el.type === "i" || el.type === "svg");
@@ -8,29 +8,43 @@ var allowedVariants = [
 	"primary",
 	"secondary",
 	"danger",
+	"ghost",
 	"outline-primary",
 	"outline-secondary",
 	"outline-danger"
 ];
-var Button = ({ label, variant, size, startIcon, endIcon, className, type = "button", ...props }) => {
+var allowedSizes = [
+	"sm",
+	"md",
+	"lg"
+];
+var Button = forwardRef(function Button({ label, variant, size, startIcon, endIcon, className, type = "button", ...props }, ref) {
+	const resolvedVariant = variant && allowedVariants.includes(variant) ? variant : "primary";
+	const resolvedSize = size && allowedSizes.includes(size) ? size : "md";
+	const resolvedStartIcon = isIconElement(startIcon, "startIcon") ? startIcon : null;
+	const resolvedEndIcon = isIconElement(endIcon, "endIcon") ? endIcon : null;
+	const isIconOnly = !label && Boolean(resolvedStartIcon || resolvedEndIcon);
 	const classes = [
 		"mds-btn",
 		"btn",
-		`btn-${variant && allowedVariants.includes(variant) ? variant : "primary"}`
+		`btn-${resolvedVariant}`,
+		`mds-btn--size-${resolvedSize}`
 	];
-	if (size) classes.push(`btn-${size}`);
+	if (isIconOnly) classes.push("mds-btn--icon-only");
 	if (className) classes.push(className);
-	return /* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsx("button", {
+		ref,
 		className: classes.join(" "),
 		type,
 		...props,
-		children: [
-			isIconElement(startIcon, "startIcon") ? startIcon : null,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			resolvedStartIcon,
 			label,
-			isIconElement(endIcon, "endIcon") ? endIcon : null
-		]
+			resolvedStartIcon ? null : resolvedEndIcon
+		] })
 	});
-};
+});
+Button.displayName = "Button";
 //#endregion
 export { Button };
 

package/dist/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../components/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactElement } from 'react';\nimport { isValidElement } from 'react';\n\ntype ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'outline-primary'\n  | 'outline-secondary'\n  | 'outline-danger';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  label?: string;\n  variant?: ButtonVariant;\n  size?: 'sm' | 'lg';\n  startIcon?: IconElement;\n  endIcon?: IconElement;\n}\n\n// Runtime guard — prop for icons must be <i> or <svg> elements\nconst isIconElement = (el: unknown, propName: string): el is IconElement => {\n  const valid = isValidElement(el) && (el.type === 'i' || el.type === 'svg');\n  if (!valid && el != null && import.meta.env.DEV) {\n    console.error(`Button: \\`${propName}\\` must be an <i> or <svg> element.`);\n  }\n  return valid;\n};\n\nconst allowedVariants: ButtonVariant[] = [\n  'primary',\n  'secondary',\n  'danger',\n  'outline-primary',\n  'outline-secondary',\n  'outline-danger',\n];\n\nexport const Button = ({\n  label,\n  variant,\n  size,\n  startIcon,\n  endIcon,\n  className,\n  type = 'button',\n  ...props\n}: ButtonProps) => {\n  // Warn in development if button has no accessible name\n  if (import.meta.env.DEV) {\n    const hasLabel = Boolean(label);\n    const hasAriaLabel = 'aria-label' in props;\n    if (!hasLabel && !hasAriaLabel) {\n      console.warn(\n        'Button: label prop or aria-label attribute is required for accessibility.',\n      );\n    }\n    if (variant && !allowedVariants.includes(variant as ButtonVariant)) {\n      console.warn(\n        `[MDS Button] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n      );\n    }\n  }\n\n  const resolvedVariant =\n    variant && allowedVariants.includes(variant as ButtonVariant)\n      ? variant\n      : 'primary';\n\n  const classes = ['mds-btn', 'btn', `btn-${resolvedVariant}`];\n  if (size) {\n    classes.push(`btn-${size}`);\n  }\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <button className={classes.join(' ')} type={type} {...props}>\n      {isIconElement(startIcon, 'startIcon') ? startIcon : null}\n      {label}\n      {isIconElement(endIcon, 'endIcon') ? endIcon : null}\n    </button>\n  );\n};\n"],"mappings":";;;AAsBA,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAM,kBAAmC;CACvC;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,UAAU,EACrB,OACA,SACA,MACA,WACA,SACA,WACA,OAAO,UACP,GAAG,YACc;CAsBjB,MAAM,UAAU;EAAC;EAAW;EAAO,OAJjC,WAAW,gBAAgB,SAAS,OAAwB,IACxD,UACA;CAEqD;CAC3D,IAAI,MACF,QAAQ,KAAK,OAAO,MAAM;CAE5B,IAAI,WACF,QAAQ,KAAK,SAAS;CAGxB,OACE,qBAAC,UAAD;EAAQ,WAAW,QAAQ,KAAK,GAAG;EAAS;EAAM,GAAI;YAAtD;GACG,cAAc,WAAW,WAAW,IAAI,YAAY;GACpD;GACA,cAAc,SAAS,SAAS,IAAI,UAAU;EACzC;;AAEZ"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../components/button/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactElement } from 'react';\nimport { forwardRef, isValidElement } from 'react';\n\ntype ButtonVariant =\n  | 'primary'\n  | 'secondary'\n  | 'danger'\n  | 'ghost'\n  | 'outline-primary'\n  | 'outline-secondary'\n  | 'outline-danger';\n\ntype ButtonSize = 'sm' | 'md' | 'lg';\n\ntype IconElement = ReactElement<'i' | 'svg'>;\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  label?: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  startIcon?: IconElement;\n  endIcon?: IconElement;\n}\n\n// Runtime guard — prop for icons must be <i> or <svg> elements\nconst isIconElement = (el: unknown, propName: string): el is IconElement => {\n  const valid = isValidElement(el) && (el.type === 'i' || el.type === 'svg');\n  if (!valid && el != null && import.meta.env.DEV) {\n    console.error(`Button: \\`${propName}\\` must be an <i> or <svg> element.`);\n  }\n  return valid;\n};\n\nconst allowedVariants: ButtonVariant[] = [\n  'primary',\n  'secondary',\n  'danger',\n  'ghost',\n  'outline-primary',\n  'outline-secondary',\n  'outline-danger',\n];\n\nconst allowedSizes: ButtonSize[] = ['sm', 'md', 'lg'];\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      label,\n      variant,\n      size,\n      startIcon,\n      endIcon,\n      className,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) {\n    const resolvedVariant =\n      variant && allowedVariants.includes(variant as ButtonVariant)\n        ? variant\n        : 'primary';\n    const resolvedSize =\n      size && allowedSizes.includes(size as ButtonSize) ? size : 'md';\n    const resolvedStartIcon = isIconElement(startIcon, 'startIcon')\n      ? startIcon\n      : null;\n    const resolvedEndIcon = isIconElement(endIcon, 'endIcon') ? endIcon : null;\n\n    if (import.meta.env.DEV) {\n      const hasAccessibleName =\n        Boolean(label) ||\n        Boolean(props['aria-label']?.trim()) ||\n        Boolean(props['aria-labelledby']?.trim());\n      if (!hasAccessibleName) {\n        console.warn(\n          'Button: provide a label, aria-label, or aria-labelledby for accessibility.',\n        );\n      }\n      if (variant && !allowedVariants.includes(variant as ButtonVariant)) {\n        console.warn(\n          `[MDS Button] Invalid variant \"${variant}\". Falling back to \"primary\". Allowed: ${allowedVariants.join(', ')}`,\n        );\n      }\n      if (size && !allowedSizes.includes(size as ButtonSize)) {\n        console.warn(\n          `[MDS Button] Invalid size \"${size}\". Falling back to \"md\". Allowed: ${allowedSizes.join(', ')}`,\n        );\n      }\n      if (resolvedStartIcon && resolvedEndIcon) {\n        console.warn(\n          'Button: pass either startIcon or endIcon, not both. Rendering startIcon only.',\n        );\n      }\n      if (!label && !resolvedStartIcon && !resolvedEndIcon) {\n        console.warn(\n          'Button: provide a label or icon so the button does not render as visually empty.',\n        );\n      }\n    }\n\n    const isIconOnly = !label && Boolean(resolvedStartIcon || resolvedEndIcon);\n\n    const classes = [\n      'mds-btn',\n      'btn',\n      `btn-${resolvedVariant}`,\n      `mds-btn--size-${resolvedSize}`,\n    ];\n    if (isIconOnly) {\n      classes.push('mds-btn--icon-only');\n    }\n    if (className) {\n      classes.push(className);\n    }\n\n    return (\n      <button ref={ref} className={classes.join(' ')} type={type} {...props}>\n        <>\n          {resolvedStartIcon}\n          {label}\n          {resolvedStartIcon ? null : resolvedEndIcon}\n        </>\n      </button>\n    );\n  },\n);\nButton.displayName = 'Button';\n"],"mappings":";;;AAyBA,IAAM,iBAAiB,IAAa,aAAwC;CAK1E,OAJc,eAAe,EAAE,MAAM,GAAG,SAAS,OAAO,GAAG,SAAS;AAKtE;AAEA,IAAM,kBAAmC;CACvC;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,IAAM,eAA6B;CAAC;CAAM;CAAM;AAAI;AAEpD,IAAa,SAAS,WACpB,SAAS,OACP,EACE,OACA,SACA,MACA,WACA,SACA,WACA,OAAO,UACP,GAAG,SAEL,KACA;CACA,MAAM,kBACJ,WAAW,gBAAgB,SAAS,OAAwB,IACxD,UACA;CACN,MAAM,eACJ,QAAQ,aAAa,SAAS,IAAkB,IAAI,OAAO;CAC7D,MAAM,oBAAoB,cAAc,WAAW,WAAW,IAC1D,YACA;CACJ,MAAM,kBAAkB,cAAc,SAAS,SAAS,IAAI,UAAU;CAkCtE,MAAM,aAAa,CAAC,SAAS,QAAQ,qBAAqB,eAAe;CAEzE,MAAM,UAAU;EACd;EACA;EACA,OAAO;EACP,iBAAiB;CACnB;CACA,IAAI,YACF,QAAQ,KAAK,oBAAoB;CAEnC,IAAI,WACF,QAAQ,KAAK,SAAS;CAGxB,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW,QAAQ,KAAK,GAAG;EAAS;EAAM,GAAI;YAC9D,qBAAA,UAAA,EAAA,UAAA;GACG;GACA;GACA,oBAAoB,OAAO;EAC5B,EAAA,CAAA;CACI,CAAA;AAEZ,CACF;AACA,OAAO,cAAc"}

package/dist/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,23 @@
+import { InputHTMLAttributes } from 'react';
+export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Visible label text. When hideLabel is true this also serves as the aria-label fallback
+     *  if no explicit aria-label prop is provided. */
+    label?: string;
+    /** When true, the visible label element is hidden. The input is still labelled accessibly
+     *  via aria-label (prop) → label (prop) in that order of precedence. Suppresses
+     *  invalidFeedback — feedback text requires a visible label to provide context. */
+    hideLabel?: boolean;
+    /** Marks the input as invalid: applies danger border/label colour and sets aria-invalid.
+     *  Independent of invalidFeedback — invalid styling can be shown without a message. */
+    invalid?: boolean;
+    /** Renders the checkbox in a mixed state, typically for "select all" parent controls.
+     *  This state is visual/semantic and should usually be controlled by parent logic. */
+    indeterminate?: boolean;
+    /** Optional supporting/helper text shown below the label in non-error state.
+     *  Hidden when hideLabel is true. */
+    supportingText?: string;
+    /** Pre-translated error message rendered below the label. Requires invalid={true} and
+     *  hideLabel={false} to be displayed. */
+    invalidFeedback?: string;
+}
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,68 @@
+import { forwardRef, useEffect, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/checkbox/Checkbox.tsx
+var Checkbox = forwardRef(({ invalidFeedback, invalid, indeterminate = false, supportingText, className, label, hideLabel = false, id: idProp, required, "aria-label": ariaLabelProp, ...inputProps }, ref) => {
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const hasVisibleLabel = !hideLabel;
+	const isInvalid = !!invalid;
+	const isIndeterminate = !!indeterminate;
+	const inputRef = useRef(null);
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = isIndeterminate;
+	}, [isIndeterminate]);
+	const classes = ["mds-checkbox"];
+	if (hasVisibleLabel) classes.push("form-check");
+	if (className) classes.push(className);
+	const ariaLabel = hideLabel ? ariaLabelProp ?? label : void 0;
+	const messageText = hasVisibleLabel ? isInvalid && invalidFeedback ? invalidFeedback : supportingText : void 0;
+	const hasInvalidFeedback = hasVisibleLabel && isInvalid && !!invalidFeedback;
+	const feedbackId = messageText ? `${id}-feedback` : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.join(" "),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				className: [
+					"mds-checkbox-input",
+					"form-check-input",
+					isInvalid ? "is-invalid" : ""
+				].filter(Boolean).join(" "),
+				ref: (node) => {
+					inputRef.current = node;
+					if (typeof ref === "function") ref(node);
+					else if (ref) ref.current = node;
+				},
+				...inputProps,
+				type: "checkbox",
+				required,
+				"aria-invalid": isInvalid ? true : void 0,
+				"aria-label": ariaLabel,
+				"aria-checked": isIndeterminate ? "mixed" : void 0,
+				"aria-describedby": feedbackId,
+				id
+			}),
+			hasVisibleLabel && /* @__PURE__ */ jsxs("label", {
+				className: "mds-checkbox-label form-check-label",
+				htmlFor: id,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "mds-checkbox-label-text",
+					children: label
+				}), required && /* @__PURE__ */ jsx("span", {
+					className: "mds-checkbox-required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			feedbackId && /* @__PURE__ */ jsx("div", {
+				id: feedbackId,
+				className: ["mds-checkbox-feedback", hasInvalidFeedback ? "invalid-feedback" : "mds-checkbox-supporting-text"].filter(Boolean).join(" "),
+				children: messageText
+			})
+		]
+	});
+});
+Checkbox.displayName = "Checkbox";
+//#endregion
+export { Checkbox };
+
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../components/checkbox/Checkbox.tsx"],"sourcesContent":["import {\n  type InputHTMLAttributes,\n  forwardRef,\n  useEffect,\n  useId,\n  useRef,\n} from 'react';\n\nexport interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** Visible label text. When hideLabel is true this also serves as the aria-label fallback\n   *  if no explicit aria-label prop is provided. */\n  label?: string;\n  /** When true, the visible label element is hidden. The input is still labelled accessibly\n   *  via aria-label (prop) → label (prop) in that order of precedence. Suppresses\n   *  invalidFeedback — feedback text requires a visible label to provide context. */\n  hideLabel?: boolean;\n  /** Marks the input as invalid: applies danger border/label colour and sets aria-invalid.\n   *  Independent of invalidFeedback — invalid styling can be shown without a message. */\n  invalid?: boolean;\n  /** Renders the checkbox in a mixed state, typically for \"select all\" parent controls.\n   *  This state is visual/semantic and should usually be controlled by parent logic. */\n  indeterminate?: boolean;\n  /** Optional supporting/helper text shown below the label in non-error state.\n   *  Hidden when hideLabel is true. */\n  supportingText?: string;\n  /** Pre-translated error message rendered below the label. Requires invalid={true} and\n   *  hideLabel={false} to be displayed. */\n  invalidFeedback?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      invalidFeedback,\n      invalid,\n      indeterminate = false,\n      supportingText,\n      className,\n      label,\n      hideLabel = false,\n      id: idProp,\n      required,\n      'aria-label': ariaLabelProp,\n      ...inputProps\n    }: CheckboxProps,\n    ref,\n  ) => {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const hasVisibleLabel = !hideLabel;\n    const isInvalid = !!invalid;\n    const isIndeterminate = !!indeterminate;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    useEffect(() => {\n      if (inputRef.current) inputRef.current.indeterminate = isIndeterminate;\n    }, [isIndeterminate]);\n\n    const warnDev = (condition: boolean, message: string) => {\n      if (import.meta.env.DEV && condition) {\n        console.warn(message);\n      }\n    };\n\n    if (import.meta.env.DEV) {\n      warnDev(\n        hideLabel && !ariaLabelProp && !label,\n        'Checkbox: label prop or aria-label attribute is required for accessibility when hideLabel is true.',\n      );\n      warnDev(\n        !hideLabel && !label,\n        'Checkbox: label prop is required when hideLabel is false. An empty label creates an inaccessible form control.',\n      );\n      warnDev(\n        hideLabel && !!invalidFeedback,\n        'Checkbox: invalidFeedback is ignored when hideLabel is true. Feedback text requires a visible label to provide context.',\n      );\n      warnDev(\n        !hideLabel && !!invalidFeedback && !invalid,\n        'Checkbox: invalidFeedback is provided without invalid={true}. Pass invalid={true} to apply invalid styling alongside the feedback text.',\n      );\n    }\n\n    const classes = ['mds-checkbox'];\n    if (hasVisibleLabel) classes.push('form-check');\n    if (className) {\n      classes.push(className);\n    }\n\n    const ariaLabel = hideLabel ? (ariaLabelProp ?? label) : undefined;\n    const messageText = hasVisibleLabel\n      ? isInvalid && invalidFeedback\n        ? invalidFeedback\n        : supportingText\n      : undefined;\n    const hasInvalidFeedback =\n      hasVisibleLabel && isInvalid && !!invalidFeedback;\n    const feedbackId = messageText ? `${id}-feedback` : undefined;\n\n    return (\n      <div className={classes.join(' ')}>\n        <input\n          className={[\n            'mds-checkbox-input',\n            'form-check-input',\n            isInvalid ? 'is-invalid' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          ref={(node) => {\n            // Keep a local ref for the native indeterminate property while still forwarding refs.\n            inputRef.current = node;\n            if (typeof ref === 'function') {\n              ref(node);\n            } else if (ref) {\n              ref.current = node;\n            }\n          }}\n          {...inputProps}\n          type=\"checkbox\"\n          required={required}\n          aria-invalid={isInvalid ? true : undefined}\n          aria-label={ariaLabel}\n          aria-checked={isIndeterminate ? 'mixed' : undefined}\n          aria-describedby={feedbackId}\n          id={id}\n        />\n        {hasVisibleLabel && (\n          <label className=\"mds-checkbox-label form-check-label\" htmlFor={id}>\n            <span className=\"mds-checkbox-label-text\">{label}</span>\n            {required && (\n              <span className=\"mds-checkbox-required\" aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </label>\n        )}\n        {feedbackId && (\n          <div\n            id={feedbackId}\n            className={[\n              'mds-checkbox-feedback',\n              hasInvalidFeedback\n                ? 'invalid-feedback'\n                : 'mds-checkbox-supporting-text',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            {messageText}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n"],"mappings":";;;AA8BA,IAAa,WAAW,YAEpB,EACE,iBACA,SACA,gBAAgB,OAChB,gBACA,WACA,OACA,YAAY,OACZ,IAAI,QACJ,UACA,cAAc,eACd,GAAG,cAEL,QACG;CACH,MAAM,cAAc,MAAM;CAC1B,MAAM,KAAK,UAAU;CACrB,MAAM,kBAAkB,CAAC;CACzB,MAAM,YAAY,CAAC,CAAC;CACpB,MAAM,kBAAkB,CAAC,CAAC;CAC1B,MAAM,WAAW,OAAgC,IAAI;CAErD,gBAAgB;EACd,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CACzD,GAAG,CAAC,eAAe,CAAC;CA2BpB,MAAM,UAAU,CAAC,cAAc;CAC/B,IAAI,iBAAiB,QAAQ,KAAK,YAAY;CAC9C,IAAI,WACF,QAAQ,KAAK,SAAS;CAGxB,MAAM,YAAY,YAAa,iBAAiB,QAAS,KAAA;CACzD,MAAM,cAAc,kBAChB,aAAa,kBACX,kBACA,iBACF,KAAA;CACJ,MAAM,qBACJ,mBAAmB,aAAa,CAAC,CAAC;CACpC,MAAM,aAAa,cAAc,GAAG,GAAG,aAAa,KAAA;CAEpD,OACE,qBAAC,OAAD;EAAK,WAAW,QAAQ,KAAK,GAAG;YAAhC;GACE,oBAAC,SAAD;IACE,WAAW;KACT;KACA;KACA,YAAY,eAAe;IAC7B,EACG,OAAO,OAAO,EACd,KAAK,GAAG;IACX,MAAM,SAAS;KAEb,SAAS,UAAU;KACnB,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;UACH,IAAI,KACT,IAAI,UAAU;IAElB;IACA,GAAI;IACJ,MAAK;IACK;IACV,gBAAc,YAAY,OAAO,KAAA;IACjC,cAAY;IACZ,gBAAc,kBAAkB,UAAU,KAAA;IAC1C,oBAAkB;IACd;GACL,CAAA;GACA,mBACC,qBAAC,SAAD;IAAO,WAAU;IAAsC,SAAS;cAAhE,CACE,oBAAC,QAAD;KAAM,WAAU;eAA2B;IAAY,CAAA,GACtD,YACC,oBAAC,QAAD;KAAM,WAAU;KAAwB,eAAY;eAAO;IAErD,CAAA,CAEH;;GAER,cACC,oBAAC,OAAD;IACE,IAAI;IACJ,WAAW,CACT,yBACA,qBACI,qBACA,8BACN,EACG,OAAO,OAAO,EACd,KAAK,GAAG;cAEV;GACE,CAAA;EAEJ;;AAET,CACF;AACA,SAAS,cAAc"}

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/components/checkbox/index.js

@@ -0,0 +1,2 @@
+import { Checkbox } from "./Checkbox.js";
+export { Checkbox };

package/dist/components/index.d.ts

@@ -1,7 +1,11 @@
 export { ActivityIcon } from './activity-icon';
 export type { ActivityIconProps } from './activity-icon';
+export { Badge } from './badge';
+export type { BadgeProps } from './badge';
 export { Button } from './button';
 export type { ButtonProps } from './button';
+export { Checkbox } from './checkbox';
+export type { CheckboxProps } from './checkbox';
 export { CloseButton } from './close-button';
 export type { CloseButtonProps } from './close-button';
 export { Radio } from './radio';