@moodlehq/design-system 2.1.0 → 3.0.0

package/README.md

@@ -100,7 +100,12 @@ export default function App() {
 }
 ```
 
-> **Note:** Subpath imports such as `@moodlehq/design-system/button` are not currently supported. Please import components from `@moodlehq/design-system`.
+Components can also be imported individually via subpath imports. This is useful when loading files directly by URL (e.g. in Moodle plugins), as only the requested component is fetched:
+
+```js
+import '@moodlehq/design-system/css';
+import { Button } from '@moodlehq/design-system/components/button';
+```
 
 ### Fonts
 

package/css.d.ts

@@ -0,0 +1,5 @@
+// Required: TypeScript >= 5.6 with moduleResolution "bundler" and
+// noUncheckedSideEffectImports: true treats a missing `types` condition on a
+// package export as a hard error. This declaration satisfies that check for
+// the side-effect-only CSS import: import '@moodlehq/design-system/css'
+declare module '@moodlehq/design-system/css' {}

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

@@ -1,10 +1,12 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactElement } from 'react';
+type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'outline-primary' | 'outline-secondary' | 'outline-danger';
+type IconElement = ReactElement<'i' | 'svg'>;
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    label: string;
-    variant?: string;
+    label?: string;
+    variant?: ButtonVariant;
     size?: 'sm' | 'lg';
-    iconOnly?: boolean;
-    icon?: IconProp;
+    startIcon?: IconElement;
+    endIcon?: IconElement;
 }
-export declare const Button: ({ label, variant, size, iconOnly, icon, className, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ label, variant, size, startIcon, endIcon, className, type, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/Button.js

@@ -0,0 +1,37 @@
+import { isValidElement } from "react";
+import { jsxs } from "react/jsx-runtime";
+//#region components/button/Button.tsx
+var isIconElement = (el, propName) => {
+	return isValidElement(el) && (el.type === "i" || el.type === "svg");
+};
+var allowedVariants = [
+	"primary",
+	"secondary",
+	"danger",
+	"outline-primary",
+	"outline-secondary",
+	"outline-danger"
+];
+var Button = ({ label, variant, size, startIcon, endIcon, className, type = "button", ...props }) => {
+	const classes = [
+		"mds-btn",
+		"btn",
+		`btn-${variant && allowedVariants.includes(variant) ? variant : "primary"}`
+	];
+	if (size) classes.push(`btn-${size}`);
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsxs("button", {
+		className: classes.join(" "),
+		type,
+		...props,
+		children: [
+			isIconElement(startIcon, "startIcon") ? startIcon : null,
+			label,
+			isIconElement(endIcon, "endIcon") ? endIcon : null
+		]
+	});
+};
+//#endregion
+export { Button };
+
+//# sourceMappingURL=Button.js.map

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

@@ -0,0 +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;AAK1E,QAJc,eAAe,GAAG,KAAK,GAAG,SAAS,OAAO,GAAG,SAAS;;AAOtE,IAAM,kBAAmC;CACvC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,IAAa,UAAU,EACrB,OACA,SACA,MACA,WACA,SACA,WACA,OAAO,UACP,GAAG,YACc;CAsBjB,MAAM,UAAU;EAAC;EAAW;EAAO,OAJjC,WAAW,gBAAgB,SAAS,QAAyB,GACzD,UACA;EAEsD;AAC5D,KAAI,KACF,SAAQ,KAAK,OAAO,OAAO;AAE7B,KAAI,UACF,SAAQ,KAAK,UAAU;AAGzB,QACE,qBAAC,UAAD;EAAQ,WAAW,QAAQ,KAAK,IAAI;EAAQ;EAAM,GAAI;YAAtD;GACG,cAAc,WAAW,YAAY,GAAG,YAAY;GACpD;GACA,cAAc,SAAS,UAAU,GAAG,UAAU;GACxC"}

package/dist/components/button/index.js

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

package/dist/components/close-button/CloseButton.d.ts

@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes } from 'react';
+export interface CloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /**
+     * Accessible name announced by screen readers for the close button control.
+     * Must be a translated string provided by the caller.
+     */
+    'aria-label': string;
+    /**
+     * Visual size variant for the close icon button.
+     * Invalid values fall back to the default `md` size at runtime.
+     */
+    size?: string;
+}
+export declare const CloseButton: ({ "aria-label": ariaLabel, size, className, ...props }: CloseButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/close-button/CloseButton.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+//#region components/close-button/CloseButton.tsx
+var allowedSizes = [
+	"sm",
+	"md",
+	"lg"
+];
+var CloseButton = ({ "aria-label": ariaLabel, size, className, ...props }) => {
+	const classes = [
+		"mds-close-button",
+		"btn-close",
+		`mds-close-button--${size && allowedSizes.includes(size) ? size : "md"}`
+	];
+	if (className) classes.push(className);
+	return /* @__PURE__ */ jsx("button", {
+		className: classes.join(" "),
+		"aria-label": ariaLabel,
+		...props,
+		type: "button"
+	});
+};
+//#endregion
+export { CloseButton };
+
+//# sourceMappingURL=CloseButton.js.map

package/dist/components/close-button/CloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CloseButton.js","names":[],"sources":["../../../components/close-button/CloseButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\n\ntype CloseButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface CloseButtonProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> {\n  /**\n   * Accessible name announced by screen readers for the close button control.\n   * Must be a translated string provided by the caller.\n   */\n  'aria-label': string;\n\n  /**\n   * Visual size variant for the close icon button.\n   * Invalid values fall back to the default `md` size at runtime.\n   */\n  size?: string;\n}\n\nconst allowedSizes: CloseButtonSize[] = ['sm', 'md', 'lg'];\n\nexport const CloseButton = ({\n  'aria-label': ariaLabel,\n  size,\n  className,\n  ...props\n}: CloseButtonProps) => {\n  if (\n    import.meta.env.DEV &&\n    size &&\n    !allowedSizes.includes(size as CloseButtonSize)\n  ) {\n    console.warn(\n      `[MDS CloseButton] Invalid size \"${size}\". Falling back to \"md\". Allowed: ${allowedSizes.join(', ')}`,\n    );\n  }\n\n  const resolvedSize =\n    size && allowedSizes.includes(size as CloseButtonSize) ? size : 'md';\n\n  const classes = [\n    'mds-close-button',\n    'btn-close',\n    `mds-close-button--${resolvedSize}`,\n  ];\n  if (className) {\n    classes.push(className);\n  }\n\n  return (\n    <button\n      className={classes.join(' ')}\n      aria-label={ariaLabel}\n      {...props}\n      type=\"button\"\n    ></button>\n  );\n};\n"],"mappings":";;AAqBA,IAAM,eAAkC;CAAC;CAAM;CAAM;CAAK;AAE1D,IAAa,eAAe,EAC1B,cAAc,WACd,MACA,WACA,GAAG,YACmB;CActB,MAAM,UAAU;EACd;EACA;EACA,qBALA,QAAQ,aAAa,SAAS,KAAwB,GAAG,OAAO;EAMjE;AACD,KAAI,UACF,SAAQ,KAAK,UAAU;AAGzB,QACE,oBAAC,UAAD;EACE,WAAW,QAAQ,KAAK,IAAI;EAC5B,cAAY;EACZ,GAAI;EACJ,MAAK;EACG,CAAA"}

package/dist/components/close-button/index.d.ts

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

package/dist/components/close-button/index.js

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

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
-export { Alert } from './alert';
-export type { AlertProps } from './alert';
 export { Button } from './button';
 export type { ButtonProps } from './button';
-export { Icon } from './icon';
-export type { IconProps } from './icon';
+export { CloseButton } from './close-button';
+export type { CloseButtonProps } from './close-button';
+export { Radio } from './radio';
+export type { RadioProps } from './radio';

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,22 @@
+import { InputHTMLAttributes } from 'react';
+export interface RadioProps 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.
+     *
+     *  Use cases: hideLabel is appropriate when the visual label would be redundant or visually cluttered,
+     *  such as in dense tables where the column header acts as the label, or in icon-only UIs. Always ensure
+     *  an accessible name is provided via aria-label or label prop. */
+    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;
+    /** Pre-translated error message rendered below the label. Requires invalid={true} and
+     *  hideLabel={false} to be displayed. Only invalid feedback is supported; is-valid
+     *  and neutral feedback states are intentionally not implemented. */
+    invalidFeedback?: string;
+}
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/radio/Radio.js

@@ -0,0 +1,47 @@
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region components/radio/Radio.tsx
+var Radio = forwardRef(({ invalidFeedback, invalid, className, label, hideLabel = false, ...props }, ref) => {
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const isInvalid = !!invalid;
+	const classes = ["mds-form-check"];
+	if (!hideLabel) classes.push("form-check");
+	if (className) classes.push(className);
+	const ariaLabel = hideLabel ? props["aria-label"] ?? label : void 0;
+	const feedbackId = invalidFeedback && !hideLabel && invalid ? `${id}-feedback` : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.join(" "),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				className: [
+					"mds-form-check-input",
+					"form-check-input",
+					isInvalid ? "is-invalid" : ""
+				].filter(Boolean).join(" "),
+				type: "radio",
+				ref,
+				...props,
+				"aria-invalid": isInvalid ? true : void 0,
+				"aria-label": ariaLabel,
+				"aria-describedby": feedbackId,
+				id
+			}),
+			!hideLabel && /* @__PURE__ */ jsx("label", {
+				className: "mds-form-check-label form-check-label",
+				htmlFor: id,
+				children: label
+			}),
+			feedbackId && /* @__PURE__ */ jsx("div", {
+				id: feedbackId,
+				className: "mds-form-check-feedback invalid-feedback",
+				children: invalidFeedback
+			})
+		]
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+export { Radio };
+
+//# sourceMappingURL=Radio.js.map

package/dist/components/radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":[],"sources":["../../../components/radio/Radio.tsx"],"sourcesContent":["import { type InputHTMLAttributes, forwardRef, useId } from 'react';\n\n// Extend InputHTMLAttributes to allow passing any valid input attributes, but also add our custom props like feedback and label.\nexport interface RadioProps 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   *\n   *  Use cases: hideLabel is appropriate when the visual label would be redundant or visually cluttered,\n   *  such as in dense tables where the column header acts as the label, or in icon-only UIs. Always ensure\n   *  an accessible name is provided via aria-label or label prop. */\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  /** Pre-translated error message rendered below the label. Requires invalid={true} and\n   *  hideLabel={false} to be displayed. Only invalid feedback is supported; is-valid\n   *  and neutral feedback states are intentionally not implemented. */\n  invalidFeedback?: string;\n}\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n  (\n    {\n      invalidFeedback,\n      invalid,\n      className,\n      label,\n      hideLabel = false,\n      ...props\n    }: RadioProps,\n    ref,\n  ) => {\n    const generatedId = useId();\n    const id = props.id ?? generatedId;\n\n    // The invalid state on the input (border, aria-invalid) is independent of\n    // hideLabel — a label-less input can still be invalid. Only the feedback text\n    // requires a visible label for context and is suppressed when hideLabel is true.\n    const isInvalid = !!invalid;\n\n    if (import.meta.env.DEV) {\n      if (hideLabel && !props['aria-label'] && !label) {\n        console.warn(\n          'Radio: label prop or aria-label attribute is required for accessibility when hideLabel is true.',\n        );\n      }\n      if (!hideLabel && !label) {\n        console.warn(\n          'Radio: label prop is required when hideLabel is false. An empty label creates an inaccessible form control.',\n        );\n      }\n      if (hideLabel && invalidFeedback) {\n        console.warn(\n          'Radio: invalidFeedback is ignored when hideLabel is true. Feedback text requires a visible label to provide context.',\n        );\n      }\n      if (!hideLabel && invalidFeedback && !invalid) {\n        console.warn(\n          'Radio: invalidFeedback is provided without invalid={true}. Pass invalid={true} to apply invalid styling alongside the feedback text.',\n        );\n      }\n    }\n    // Build the class list for the radio wrapper div. mds-form-check is always applied\n    // as a stable hook for consumers; form-check and layout classes are added only when\n    // the label is visible (Bootstrap label/feedback styling and grid layout).\n    const classes = ['mds-form-check'];\n    if (!hideLabel) {\n      classes.push('form-check');\n    }\n    if (className) {\n      classes.push(className);\n    }\n\n    // When the label is hidden, derive aria-label from: caller's aria-label → label prop → undefined (warned above).\n    const ariaLabel = hideLabel ? (props['aria-label'] ?? label) : undefined;\n\n    // Link the input to its feedback text so screen readers announce the error message.\n    // The ID is only generated when feedback will actually be rendered.\n    const feedbackId =\n      invalidFeedback && !hideLabel && invalid ? `${id}-feedback` : undefined;\n\n    return (\n      <div className={classes.join(' ')}>\n        <input\n          className={[\n            'mds-form-check-input',\n            'form-check-input',\n            isInvalid ? 'is-invalid' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          type=\"radio\"\n          ref={ref}\n          {...props}\n          aria-invalid={isInvalid ? true : undefined}\n          aria-label={ariaLabel}\n          aria-describedby={feedbackId}\n          id={id} // Ensure we use the generated ID if no ID is provided, so the label can be properly associated with the input for accessibility.\n        />\n        {!hideLabel && (\n          <label className=\"mds-form-check-label form-check-label\" htmlFor={id}>\n            {label}\n          </label>\n        )}\n        {feedbackId && (\n          <div\n            id={feedbackId}\n            className=\"mds-form-check-feedback invalid-feedback\"\n          >\n            {invalidFeedback}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nRadio.displayName = 'Radio';\n"],"mappings":";;;AAwBA,IAAa,QAAQ,YAEjB,EACE,iBACA,SACA,WACA,OACA,YAAY,OACZ,GAAG,SAEL,QACG;CACH,MAAM,cAAc,OAAO;CAC3B,MAAM,KAAK,MAAM,MAAM;CAKvB,MAAM,YAAY,CAAC,CAAC;CA2BpB,MAAM,UAAU,CAAC,iBAAiB;AAClC,KAAI,CAAC,UACH,SAAQ,KAAK,aAAa;AAE5B,KAAI,UACF,SAAQ,KAAK,UAAU;CAIzB,MAAM,YAAY,YAAa,MAAM,iBAAiB,QAAS,KAAA;CAI/D,MAAM,aACJ,mBAAmB,CAAC,aAAa,UAAU,GAAG,GAAG,aAAa,KAAA;AAEhE,QACE,qBAAC,OAAD;EAAK,WAAW,QAAQ,KAAK,IAAI;YAAjC;GACE,oBAAC,SAAD;IACE,WAAW;KACT;KACA;KACA,YAAY,eAAe;KAC5B,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,MAAK;IACA;IACL,GAAI;IACJ,gBAAc,YAAY,OAAO,KAAA;IACjC,cAAY;IACZ,oBAAkB;IACd;IACJ,CAAA;GACD,CAAC,aACA,oBAAC,SAAD;IAAO,WAAU;IAAwC,SAAS;cAC/D;IACK,CAAA;GAET,cACC,oBAAC,OAAD;IACE,IAAI;IACJ,WAAU;cAET;IACG,CAAA;GAEJ;;EAGX;AACD,MAAM,cAAc"}

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

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

package/dist/components/radio/index.js

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