@mason-ds/vue 0.2.0

package/dist/index.cjs

@@ -0,0 +1,1317 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Badge: () => Badge,
+  Button: () => Button,
+  Callout: () => Callout,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  Divider: () => Divider,
+  Link: () => Link,
+  MasonProvider: () => MasonProvider,
+  Select: () => Select,
+  Spinner: () => Spinner,
+  Stack: () => Stack,
+  Text: () => Text,
+  TextField: () => TextField
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.ts
+var import_vue = require("vue");
+var MasonProvider = (0, import_vue.defineComponent)({
+  name: "MasonProvider",
+  props: {
+    theme: {
+      type: String,
+      default: "light"
+    }
+  },
+  setup(props, { slots }) {
+    return () => (0, import_vue.h)(
+      "div",
+      {
+        "data-mason-provider": "",
+        "data-mason-theme": props.theme
+      },
+      slots.default?.()
+    );
+  }
+});
+
+// src/Text.ts
+var import_vue2 = require("vue");
+
+// src/styles.ts
+var import_tokens = require("@mason-ds/tokens");
+function cssVar(path) {
+  return `var(${(0, import_tokens.getSemanticCssVar)(path)})`;
+}
+function spacingVar(axis, level) {
+  return cssVar(`spacing.${axis}.${level}`);
+}
+function radiusVar(level) {
+  return cssVar(`radius.${level}`);
+}
+function shadowVar(level) {
+  return cssVar(`shadow.${level}`);
+}
+function textColorVar(tone) {
+  return cssVar(`color.text.${tone}`);
+}
+function typographyStyle(variant) {
+  return {
+    fontFamily: cssVar(`font.${variant}.family`),
+    fontSize: cssVar(`font.${variant}.size`),
+    fontWeight: cssVar(`font.${variant}.weight`),
+    lineHeight: cssVar(`font.${variant}.lineHeight`),
+    letterSpacing: cssVar(`font.${variant}.letterSpacing`)
+  };
+}
+function mergeClassName(...parts) {
+  const merged = parts.filter(Boolean).join(" ");
+  return merged.length > 0 ? merged : void 0;
+}
+
+// src/textStyles.ts
+function textStyle({
+  variant = "body.md",
+  tone = "primary",
+  align,
+  truncate = false
+}) {
+  return {
+    margin: "0",
+    color: textColorVar(tone),
+    ...typographyStyle(variant),
+    ...align ? { textAlign: align } : null,
+    ...truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : null
+  };
+}
+
+// src/Text.ts
+var Text = (0, import_vue2.defineComponent)({
+  name: "MasonText",
+  inheritAttrs: false,
+  props: {
+    as: {
+      type: String,
+      default: "p"
+    },
+    variant: {
+      type: String,
+      default: "body.md"
+    },
+    tone: {
+      type: String,
+      default: "primary"
+    },
+    align: {
+      type: String,
+      default: void 0
+    },
+    truncate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue2.h)(
+        props.as,
+        {
+          ...rest,
+          "data-mason-component": "text",
+          "data-variant": props.variant,
+          class: mergeClassName(attrClass),
+          style: [
+            textStyle({
+              variant: props.variant,
+              tone: props.tone,
+              align: props.align,
+              truncate: props.truncate
+            }),
+            attrStyle
+          ]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/Stack.ts
+var import_vue3 = require("vue");
+
+// src/stackStyles.ts
+var FLEX_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var FLEX_JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between"
+};
+function stackStyle({
+  direction = "column",
+  gap = "md",
+  align,
+  justify,
+  wrap = false,
+  inline = false
+}) {
+  return {
+    display: inline ? "inline-flex" : "flex",
+    flexDirection: direction,
+    gap: spacingVar(direction === "row" ? "inline" : "stack", gap),
+    flexWrap: wrap ? "wrap" : "nowrap",
+    minWidth: "0",
+    ...align ? { alignItems: FLEX_ALIGN[align] } : null,
+    ...justify ? { justifyContent: FLEX_JUSTIFY[justify] } : null
+  };
+}
+
+// src/Stack.ts
+var Stack = (0, import_vue3.defineComponent)({
+  name: "MasonStack",
+  inheritAttrs: false,
+  props: {
+    direction: {
+      type: String,
+      default: "column"
+    },
+    gap: {
+      type: String,
+      default: "md"
+    },
+    align: {
+      type: String,
+      default: void 0
+    },
+    justify: {
+      type: String,
+      default: void 0
+    },
+    wrap: {
+      type: Boolean,
+      default: false
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue3.h)(
+        "div",
+        {
+          ...rest,
+          "data-mason-component": "stack",
+          "data-direction": props.direction,
+          class: mergeClassName(attrClass),
+          style: [
+            stackStyle({
+              direction: props.direction,
+              gap: props.gap,
+              align: props.align,
+              justify: props.justify,
+              wrap: props.wrap,
+              inline: props.inline
+            }),
+            attrStyle
+          ]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/Card.ts
+var import_vue4 = require("vue");
+
+// src/cardStyles.ts
+var TONE_BG = {
+  surface: "color.bg.surface",
+  canvas: "color.bg.canvas",
+  elevated: "color.bg.elevated"
+};
+function cardStyle({
+  padding = "md",
+  elevation = "sm",
+  radius = "md",
+  tone = "surface",
+  bordered = true
+}) {
+  return {
+    display: "block",
+    padding: spacingVar("inset", padding),
+    backgroundColor: cssVar(TONE_BG[tone]),
+    color: cssVar("color.text.primary"),
+    border: bordered ? `1px solid ${cssVar("color.border.subtle")}` : "none",
+    borderRadius: radiusVar(radius),
+    boxShadow: shadowVar(elevation),
+    boxSizing: "border-box",
+    minWidth: "0"
+  };
+}
+
+// src/Card.ts
+var Card = (0, import_vue4.defineComponent)({
+  name: "MasonCard",
+  inheritAttrs: false,
+  props: {
+    padding: {
+      type: String,
+      default: "md"
+    },
+    elevation: {
+      type: String,
+      default: "sm"
+    },
+    radius: {
+      type: String,
+      default: "md"
+    },
+    tone: {
+      type: String,
+      default: "surface"
+    },
+    bordered: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue4.h)(
+        "div",
+        {
+          ...rest,
+          "data-mason-component": "card",
+          "data-tone": props.tone,
+          class: mergeClassName(attrClass),
+          style: [
+            cardStyle({
+              padding: props.padding,
+              elevation: props.elevation,
+              radius: props.radius,
+              tone: props.tone,
+              bordered: props.bordered
+            }),
+            attrStyle
+          ]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/Divider.ts
+var import_vue5 = require("vue");
+
+// src/dividerStyles.ts
+function dividerStyle(orientation = "horizontal") {
+  const line = `1px solid ${cssVar("color.border.subtle")}`;
+  if (orientation === "vertical") {
+    return {
+      alignSelf: "stretch",
+      width: "0",
+      minHeight: "1em",
+      margin: "0",
+      border: "none",
+      borderInlineStart: line
+    };
+  }
+  return {
+    width: "100%",
+    height: "0",
+    margin: "0",
+    border: "none",
+    borderBlockStart: line
+  };
+}
+
+// src/Divider.ts
+var Divider = (0, import_vue5.defineComponent)({
+  name: "MasonDivider",
+  inheritAttrs: false,
+  props: {
+    orientation: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue5.h)("hr", {
+        ...rest,
+        "data-mason-component": "divider",
+        "data-orientation": props.orientation,
+        "aria-orientation": props.orientation === "vertical" ? "vertical" : void 0,
+        class: mergeClassName(attrClass),
+        style: [dividerStyle(props.orientation), attrStyle]
+      });
+    };
+  }
+});
+
+// src/Link.ts
+var import_vue6 = require("vue");
+
+// src/linkStyles.ts
+function linkStyle({
+  tone = "link",
+  underline = "hover"
+}) {
+  return {
+    color: tone === "inherit" ? "inherit" : textColorVar("link"),
+    textDecoration: underline === "always" ? "underline" : "none",
+    textUnderlineOffset: "0.15em",
+    borderRadius: radiusVar("sm"),
+    cursor: "pointer"
+  };
+}
+
+// src/Link.ts
+var Link = (0, import_vue6.defineComponent)({
+  name: "MasonLink",
+  inheritAttrs: false,
+  props: {
+    tone: {
+      type: String,
+      default: "link"
+    },
+    underline: {
+      type: String,
+      default: "hover"
+    },
+    /** Adds `target="_blank"` and a safe `rel`. */
+    external: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      const externalAttrs = props.external ? { target: "_blank", rel: "noreferrer noopener" } : null;
+      return (0, import_vue6.h)(
+        "a",
+        {
+          "data-mason-component": "link",
+          "data-tone": props.tone,
+          "data-underline": props.underline,
+          ...externalAttrs,
+          ...rest,
+          class: mergeClassName(attrClass),
+          style: [
+            linkStyle({ tone: props.tone, underline: props.underline }),
+            attrStyle
+          ]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/Button.ts
+var import_vue8 = require("vue");
+
+// src/Spinner.ts
+var import_vue7 = require("vue");
+
+// src/spinnerStyles.ts
+var SIZE_DIMENSION = {
+  sm: cssVar("font.body.sm.size"),
+  md: cssVar("font.body.md.size"),
+  lg: cssVar("font.display.lg.size"),
+  inherit: "1em"
+};
+function spinnerStyle(size = "md") {
+  const dimension = SIZE_DIMENSION[size];
+  return {
+    width: dimension,
+    height: dimension,
+    border: "2px solid currentColor",
+    borderTopColor: "transparent",
+    borderRadius: "50%",
+    display: "inline-block",
+    flexShrink: "0"
+  };
+}
+
+// src/Spinner.ts
+var Spinner = (0, import_vue7.defineComponent)({
+  name: "MasonSpinner",
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** Announced while loading. Without it the spinner is `aria-hidden`. */
+    label: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue7.h)("span", {
+        ...rest,
+        "data-mason-component": "spinner",
+        "data-size": props.size,
+        role: props.label ? "status" : void 0,
+        "aria-label": props.label,
+        "aria-hidden": props.label ? void 0 : "true",
+        class: mergeClassName(attrClass),
+        style: [spinnerStyle(props.size), attrStyle]
+      });
+    };
+  }
+});
+
+// src/buttonStyles.ts
+function actionColors(variant) {
+  return {
+    bg: `color.action.${variant}.bg`,
+    text: `color.action.${variant}.text`,
+    border: `color.action.${variant}.border`
+  };
+}
+var sizeStyles = {
+  sm: {
+    paddingBlock: cssVar("spacing.inset.sm"),
+    paddingInline: cssVar("spacing.inset.md"),
+    gap: cssVar("spacing.inline.sm"),
+    radius: cssVar("radius.sm"),
+    font: "label.sm"
+  },
+  md: {
+    paddingBlock: cssVar("spacing.inset.md"),
+    paddingInline: cssVar("spacing.inset.lg"),
+    gap: cssVar("spacing.inline.md"),
+    radius: cssVar("radius.md"),
+    font: "label.md"
+  },
+  lg: {
+    paddingBlock: cssVar("spacing.inset.lg"),
+    paddingInline: `calc(${cssVar("spacing.inset.lg")} + ${cssVar("spacing.inset.md")})`,
+    gap: cssVar("spacing.inline.md"),
+    radius: cssVar("radius.lg"),
+    font: "label.lg"
+  }
+};
+function buttonStyle({
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false
+}) {
+  const inactive = disabled || loading;
+  const colors = actionColors(inactive ? "disabled" : variant);
+  const sizing = sizeStyles[size];
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: sizing.gap,
+    paddingBlock: sizing.paddingBlock,
+    paddingInline: sizing.paddingInline,
+    margin: "0",
+    backgroundColor: cssVar(colors.bg),
+    color: cssVar(colors.text),
+    border: `1px solid ${cssVar(colors.border)}`,
+    borderRadius: sizing.radius,
+    boxSizing: "border-box",
+    ...typographyStyle(sizing.font),
+    textDecoration: "none",
+    whiteSpace: "nowrap"
+  };
+}
+
+// src/Button.ts
+var Button = (0, import_vue8.defineComponent)({
+  name: "MasonButton",
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: "button"
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const isDisabled = (0, import_vue8.computed)(() => props.disabled || props.loading);
+    return () => {
+      const children = [];
+      if (props.loading) {
+        children.push((0, import_vue8.h)(Spinner, { size: "inherit", "data-mason-slot": "spinner" }));
+      } else if (slots.leading) {
+        children.push((0, import_vue8.h)("span", { "data-mason-slot": "leading" }, slots.leading()));
+      }
+      if (slots.default) {
+        children.push((0, import_vue8.h)("span", { "data-mason-slot": "label" }, slots.default()));
+      }
+      if (slots.trailing && !props.loading) {
+        children.push((0, import_vue8.h)("span", { "data-mason-slot": "trailing" }, slots.trailing()));
+      }
+      const attrClass = attrs.class;
+      const attrStyle = attrs.style;
+      return (0, import_vue8.h)(
+        "button",
+        {
+          ...attrs,
+          type: props.type,
+          "data-mason-component": "button",
+          "data-variant": props.variant,
+          "data-size": props.size,
+          disabled: isDisabled.value,
+          "aria-busy": props.loading || void 0,
+          class: mergeClassName(attrClass),
+          style: [
+            buttonStyle({
+              variant: props.variant,
+              size: props.size,
+              disabled: props.disabled,
+              loading: props.loading
+            }),
+            attrStyle
+          ]
+        },
+        children
+      );
+    };
+  }
+});
+
+// src/Badge.ts
+var import_vue9 = require("vue");
+
+// src/badgeStyles.ts
+function badgeStyle({
+  tone = "neutral",
+  size = "sm"
+}) {
+  const colors = tone === "neutral" ? {
+    bg: cssVar("color.bg.canvas"),
+    text: cssVar("color.text.secondary"),
+    border: cssVar("color.border.subtle")
+  } : {
+    bg: cssVar(`color.feedback.${tone}.bg`),
+    text: cssVar(`color.feedback.${tone}.text`),
+    border: cssVar(`color.feedback.${tone}.border`)
+  };
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: spacingVar("inline", "sm"),
+    paddingBlock: "0.125em",
+    paddingInline: spacingVar("inset", "sm"),
+    backgroundColor: colors.bg,
+    color: colors.text,
+    border: `1px solid ${colors.border}`,
+    borderRadius: radiusVar("full"),
+    ...typographyStyle(size === "sm" ? "label.sm" : "label.md"),
+    whiteSpace: "nowrap"
+  };
+}
+
+// src/Badge.ts
+var Badge = (0, import_vue9.defineComponent)({
+  name: "MasonBadge",
+  inheritAttrs: false,
+  props: {
+    tone: {
+      type: String,
+      default: "neutral"
+    },
+    size: {
+      type: String,
+      default: "sm"
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      return (0, import_vue9.h)(
+        "span",
+        {
+          ...rest,
+          "data-mason-component": "badge",
+          "data-tone": props.tone,
+          "data-size": props.size,
+          class: mergeClassName(attrClass),
+          style: [
+            badgeStyle({ tone: props.tone, size: props.size }),
+            attrStyle
+          ]
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+
+// src/Callout.ts
+var import_vue10 = require("vue");
+
+// src/calloutStyles.ts
+function calloutStyle(tone = "info") {
+  return {
+    display: "flex",
+    gap: spacingVar("inline", "md"),
+    padding: spacingVar("inset", "md"),
+    backgroundColor: cssVar(`color.feedback.${tone}.bg`),
+    color: cssVar(`color.feedback.${tone}.text`),
+    border: `1px solid ${cssVar(`color.feedback.${tone}.border`)}`,
+    borderRadius: radiusVar("md"),
+    boxSizing: "border-box",
+    ...typographyStyle("body.md")
+  };
+}
+function calloutContentStyle() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: "0"
+  };
+}
+function calloutTitleStyle() {
+  return { margin: "0", ...typographyStyle("label.md") };
+}
+function calloutBodyStyle() {
+  return { margin: "0", ...typographyStyle("body.sm") };
+}
+
+// src/Callout.ts
+var Callout = (0, import_vue10.defineComponent)({
+  name: "MasonCallout",
+  inheritAttrs: false,
+  props: {
+    tone: {
+      type: String,
+      default: "info"
+    },
+    /** Heading text; the `title` slot takes precedence. */
+    title: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const { class: attrClass, style: attrStyle, ...rest } = attrs;
+      const title = slots.title?.() ?? props.title;
+      const body = slots.default?.();
+      const content = [];
+      if (title) {
+        content.push(
+          (0, import_vue10.h)("p", { "data-mason-slot": "title", style: calloutTitleStyle() }, title)
+        );
+      }
+      if (body) {
+        content.push(
+          (0, import_vue10.h)("div", { "data-mason-slot": "body", style: calloutBodyStyle() }, body)
+        );
+      }
+      const children = [];
+      if (slots.icon) {
+        children.push(
+          (0, import_vue10.h)(
+            "span",
+            { "data-mason-slot": "icon", "aria-hidden": "true" },
+            slots.icon()
+          )
+        );
+      }
+      children.push(
+        (0, import_vue10.h)(
+          "div",
+          { "data-mason-slot": "content", style: calloutContentStyle() },
+          content
+        )
+      );
+      return (0, import_vue10.h)(
+        "div",
+        {
+          ...rest,
+          "data-mason-component": "callout",
+          "data-tone": props.tone,
+          class: mergeClassName(attrClass),
+          style: [calloutStyle(props.tone), attrStyle]
+        },
+        children
+      );
+    };
+  }
+});
+
+// src/TextField.ts
+var import_vue12 = require("vue");
+
+// src/field.ts
+var import_vue11 = require("vue");
+
+// src/fieldStyles.ts
+var CONTROL_FONT = {
+  sm: "body.sm",
+  md: "body.md",
+  lg: "body.lg"
+};
+var LABEL_FONT = {
+  sm: "label.sm",
+  md: "label.md",
+  lg: "label.lg"
+};
+var CONTROL_PADDING_BLOCK = { sm: "sm", md: "sm", lg: "md" };
+var CONTROL_PADDING_INLINE = { sm: "sm", md: "md", lg: "md" };
+function fieldRootStyle() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: "0"
+  };
+}
+function fieldLabelStyle(size = "md") {
+  return {
+    color: cssVar("color.text.primary"),
+    ...typographyStyle(LABEL_FONT[size])
+  };
+}
+function fieldControlStyle({
+  size = "md",
+  invalid = false,
+  disabled = false
+}) {
+  return {
+    width: "100%",
+    boxSizing: "border-box",
+    margin: "0",
+    paddingBlock: spacingVar("inset", CONTROL_PADDING_BLOCK[size]),
+    paddingInline: spacingVar("inset", CONTROL_PADDING_INLINE[size]),
+    backgroundColor: disabled ? cssVar("color.action.disabled.bg") : cssVar("color.field.bg"),
+    color: disabled ? cssVar("color.text.disabled") : cssVar("color.field.text"),
+    border: `1px solid ${cssVar(
+      invalid ? "color.field.borderInvalid" : "color.field.border"
+    )}`,
+    borderRadius: radiusVar("md"),
+    ...typographyStyle(CONTROL_FONT[size])
+  };
+}
+function fieldDescriptionStyle() {
+  return {
+    margin: "0",
+    color: cssVar("color.text.secondary"),
+    ...typographyStyle("body.sm")
+  };
+}
+function fieldErrorStyle() {
+  return {
+    margin: "0",
+    color: cssVar("color.text.danger"),
+    ...typographyStyle("body.sm")
+  };
+}
+
+// src/field.ts
+var fieldSeq = 0;
+function nextFieldId() {
+  fieldSeq += 1;
+  return `mason-field-${fieldSeq}`;
+}
+function fieldIds(controlId, hasDescription, hasError) {
+  const descriptionId = `${controlId}-description`;
+  const errorId = `${controlId}-error`;
+  return {
+    controlId,
+    descriptionId,
+    errorId,
+    describedBy: [hasDescription ? descriptionId : null, hasError ? errorId : null].filter(Boolean).join(" ") || void 0
+  };
+}
+function renderFieldFrame({
+  component,
+  ids,
+  size,
+  invalid,
+  disabled,
+  label,
+  description,
+  error,
+  attrClass,
+  attrStyle,
+  control
+}) {
+  const children = [];
+  if (label) {
+    children.push(
+      (0, import_vue11.h)(
+        "label",
+        {
+          "data-mason-slot": "label",
+          for: ids.controlId,
+          style: fieldLabelStyle(size)
+        },
+        label
+      )
+    );
+  }
+  children.push(control);
+  if (description) {
+    children.push(
+      (0, import_vue11.h)(
+        "p",
+        {
+          "data-mason-slot": "description",
+          id: ids.descriptionId,
+          style: fieldDescriptionStyle()
+        },
+        description
+      )
+    );
+  }
+  if (error) {
+    children.push(
+      (0, import_vue11.h)(
+        "p",
+        {
+          "data-mason-slot": "error",
+          id: ids.errorId,
+          role: "alert",
+          style: fieldErrorStyle()
+        },
+        error
+      )
+    );
+  }
+  return (0, import_vue11.h)(
+    "div",
+    {
+      "data-mason-component": component,
+      "data-size": size,
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      class: mergeClassName(attrClass),
+      style: [fieldRootStyle(), attrStyle]
+    },
+    children
+  );
+}
+
+// src/TextField.ts
+var TextField = (0, import_vue12.defineComponent)({
+  name: "MasonTextField",
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      default: void 0
+    },
+    description: {
+      type: String,
+      default: void 0
+    },
+    /** Present error text switches the field to its invalid styling. */
+    error: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    invalid: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: String,
+      default: void 0
+    },
+    modelValue: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { slots, attrs, emit }) {
+    const autoId = nextFieldId();
+    return () => {
+      const {
+        class: attrClass,
+        style: attrStyle,
+        onInput: attrInput,
+        ...controlAttrs
+      } = attrs;
+      const label = slots.label?.() ?? props.label;
+      const description = slots.description?.() ?? props.description;
+      const error = slots.error?.() ?? props.error;
+      const invalid = props.invalid ?? Boolean(error);
+      const ids = fieldIds(props.id ?? autoId, Boolean(description), Boolean(error));
+      const emitInput = (event) => {
+        emit("update:modelValue", event.target.value);
+      };
+      const forwarded = attrInput;
+      const control = (0, import_vue12.h)("input", {
+        ...controlAttrs,
+        id: ids.controlId,
+        "data-mason-slot": "control",
+        disabled: props.disabled,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": ids.describedBy,
+        ...props.modelValue === void 0 ? null : { value: props.modelValue },
+        onInput: forwarded ? [emitInput, forwarded] : emitInput,
+        style: fieldControlStyle({
+          size: props.size,
+          invalid,
+          disabled: props.disabled
+        })
+      });
+      return renderFieldFrame({
+        component: "text-field",
+        ids,
+        size: props.size,
+        invalid,
+        disabled: props.disabled,
+        label,
+        description,
+        error,
+        attrClass,
+        attrStyle,
+        control
+      });
+    };
+  }
+});
+
+// src/Select.ts
+var import_vue13 = require("vue");
+var Select = (0, import_vue13.defineComponent)({
+  name: "MasonSelect",
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      default: void 0
+    },
+    description: {
+      type: String,
+      default: void 0
+    },
+    error: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    invalid: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: String,
+      default: void 0
+    },
+    /** Rendered as a leading empty `<option>`. */
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    modelValue: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { slots, attrs, emit }) {
+    const autoId = nextFieldId();
+    return () => {
+      const {
+        class: attrClass,
+        style: attrStyle,
+        onChange: attrChange,
+        ...controlAttrs
+      } = attrs;
+      const label = slots.label?.() ?? props.label;
+      const description = slots.description?.() ?? props.description;
+      const error = slots.error?.() ?? props.error;
+      const invalid = props.invalid ?? Boolean(error);
+      const ids = fieldIds(props.id ?? autoId, Boolean(description), Boolean(error));
+      const emitChange = (event) => {
+        emit("update:modelValue", event.target.value);
+      };
+      const forwarded = attrChange;
+      const options = [];
+      if (props.placeholder) {
+        options.push((0, import_vue13.h)("option", { value: "" }, props.placeholder));
+      }
+      const provided = slots.default?.();
+      if (provided) {
+        options.push(provided);
+      }
+      const control = (0, import_vue13.h)(
+        "select",
+        {
+          ...controlAttrs,
+          id: ids.controlId,
+          "data-mason-slot": "control",
+          disabled: props.disabled,
+          "aria-invalid": invalid || void 0,
+          "aria-describedby": ids.describedBy,
+          ...props.modelValue === void 0 ? null : { value: props.modelValue },
+          onChange: forwarded ? [emitChange, forwarded] : emitChange,
+          style: fieldControlStyle({
+            size: props.size,
+            invalid,
+            disabled: props.disabled
+          })
+        },
+        options
+      );
+      return renderFieldFrame({
+        component: "select",
+        ids,
+        size: props.size,
+        invalid,
+        disabled: props.disabled,
+        label,
+        description,
+        error,
+        attrClass,
+        attrStyle,
+        control
+      });
+    };
+  }
+});
+
+// src/Checkbox.ts
+var import_vue14 = require("vue");
+
+// src/checkboxStyles.ts
+function checkboxRootStyle() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: "0"
+  };
+}
+function checkboxLabelStyle(disabled = false) {
+  return {
+    display: "inline-flex",
+    alignItems: "flex-start",
+    gap: spacingVar("inline", "sm"),
+    cursor: disabled ? "not-allowed" : "pointer",
+    color: disabled ? cssVar("color.text.disabled") : cssVar("color.text.primary"),
+    ...typographyStyle("body.md")
+  };
+}
+function checkboxControlStyle() {
+  return {
+    width: "1em",
+    height: "1em",
+    margin: "0",
+    marginBlockStart: "0.15em",
+    accentColor: cssVar("color.action.primary.bg"),
+    flexShrink: "0"
+  };
+}
+
+// src/Checkbox.ts
+var Checkbox = (0, import_vue14.defineComponent)({
+  name: "MasonCheckbox",
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      default: void 0
+    },
+    description: {
+      type: String,
+      default: void 0
+    },
+    error: {
+      type: String,
+      default: void 0
+    },
+    invalid: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: String,
+      default: void 0
+    },
+    modelValue: {
+      type: Boolean,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { slots, attrs, emit }) {
+    const autoId = nextFieldId();
+    return () => {
+      const {
+        class: attrClass,
+        style: attrStyle,
+        onChange: attrChange,
+        ...controlAttrs
+      } = attrs;
+      const label = slots.label?.() ?? props.label;
+      const description = slots.description?.() ?? props.description;
+      const error = slots.error?.() ?? props.error;
+      const invalid = props.invalid ?? Boolean(error);
+      const ids = fieldIds(props.id ?? autoId, Boolean(description), Boolean(error));
+      const emitChange = (event) => {
+        emit("update:modelValue", event.target.checked);
+      };
+      const forwarded = attrChange;
+      const children = [
+        (0, import_vue14.h)(
+          "label",
+          {
+            "data-mason-slot": "label",
+            for: ids.controlId,
+            style: checkboxLabelStyle(props.disabled)
+          },
+          [
+            (0, import_vue14.h)("input", {
+              ...controlAttrs,
+              type: "checkbox",
+              id: ids.controlId,
+              "data-mason-slot": "control",
+              disabled: props.disabled,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": ids.describedBy,
+              ...props.modelValue === void 0 ? null : { checked: props.modelValue },
+              onChange: forwarded ? [emitChange, forwarded] : emitChange,
+              style: checkboxControlStyle()
+            }),
+            label ? (0, import_vue14.h)("span", { "data-mason-slot": "label-text" }, label) : null
+          ]
+        )
+      ];
+      if (description) {
+        children.push(
+          (0, import_vue14.h)(
+            "p",
+            {
+              "data-mason-slot": "description",
+              id: ids.descriptionId,
+              style: fieldDescriptionStyle()
+            },
+            description
+          )
+        );
+      }
+      if (error) {
+        children.push(
+          (0, import_vue14.h)(
+            "p",
+            {
+              "data-mason-slot": "error",
+              id: ids.errorId,
+              role: "alert",
+              style: fieldErrorStyle()
+            },
+            error
+          )
+        );
+      }
+      return (0, import_vue14.h)(
+        "div",
+        {
+          "data-mason-component": "checkbox",
+          "data-invalid": invalid || void 0,
+          "data-disabled": props.disabled || void 0,
+          class: mergeClassName(attrClass),
+          style: [checkboxRootStyle(), attrStyle]
+        },
+        children
+      );
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Button,
+  Callout,
+  Card,
+  Checkbox,
+  Divider,
+  Link,
+  MasonProvider,
+  Select,
+  Spinner,
+  Stack,
+  Text,
+  TextField
+});
+//# sourceMappingURL=index.cjs.map