@mason-ds/vue 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -28,6 +28,7 @@ __export(index_exports, {
   Divider: () => Divider,
   Link: () => Link,
   MasonProvider: () => MasonProvider,
+  Radio: () => Radio,
   Select: () => Select,
   Spinner: () => Spinner,
   Stack: () => Stack,
@@ -863,6 +864,21 @@ function fieldErrorStyle() {
     ...typographyStyle("body.sm")
   };
 }
+function visuallyHiddenControlStyle() {
+  return {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: "0",
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: "0",
+    borderStyle: "solid",
+    borderColor: "transparent"
+  };
+}
 
 // src/field.ts
 var fieldSeq = 0;
@@ -1150,6 +1166,7 @@ var Select = (0, import_vue13.defineComponent)({
 var import_vue14 = require("vue");
 
 // src/checkboxStyles.ts
+var CONTROL_SIZE = "1.125rem";
 function checkboxRootStyle() {
   return {
     display: "flex",
@@ -1168,14 +1185,19 @@ function checkboxLabelStyle(disabled = false) {
     ...typographyStyle("body.md")
   };
 }
-function checkboxControlStyle() {
+function checkboxIndicatorStyle() {
   return {
-    width: "1em",
-    height: "1em",
-    margin: "0",
-    marginBlockStart: "0.15em",
-    accentColor: cssVar("color.action.primary.bg"),
-    flexShrink: "0"
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: CONTROL_SIZE,
+    height: CONTROL_SIZE,
+    marginBlockStart: "0.2em",
+    flexShrink: "0",
+    boxSizing: "border-box",
+    borderRadius: radiusVar("sm"),
+    borderStyle: "solid",
+    borderWidth: "1.5px"
   };
 }
 
@@ -1251,7 +1273,12 @@ var Checkbox = (0, import_vue14.defineComponent)({
               "aria-describedby": ids.describedBy,
               ...props.modelValue === void 0 ? null : { checked: props.modelValue },
               onChange: forwarded ? [emitChange, forwarded] : emitChange,
-              style: checkboxControlStyle()
+              style: visuallyHiddenControlStyle()
+            }),
+            (0, import_vue14.h)("span", {
+              "data-mason-slot": "indicator",
+              "aria-hidden": "true",
+              style: checkboxIndicatorStyle()
             }),
             label ? (0, import_vue14.h)("span", { "data-mason-slot": "label-text" }, label) : null
           ]
@@ -1298,6 +1325,177 @@ var Checkbox = (0, import_vue14.defineComponent)({
     };
   }
 });
+
+// src/Radio.ts
+var import_vue15 = require("vue");
+
+// src/radioStyles.ts
+var CONTROL_SIZE2 = "1.125rem";
+function radioRootStyle() {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: "0"
+  };
+}
+function radioLabelStyle(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 radioIndicatorStyle() {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: CONTROL_SIZE2,
+    height: CONTROL_SIZE2,
+    marginBlockStart: "0.2em",
+    flexShrink: "0",
+    boxSizing: "border-box",
+    borderRadius: "999px",
+    borderStyle: "solid",
+    borderWidth: "1.5px"
+  };
+}
+
+// src/Radio.ts
+var Radio = (0, import_vue15.defineComponent)({
+  name: "MasonRadio",
+  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: [String, Number, Boolean],
+      default: void 0
+    },
+    value: {
+      type: [String, Number, 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) => {
+        const input = event.target;
+        emit("update:modelValue", props.value === void 0 ? input.value : props.value);
+      };
+      const forwarded = attrChange;
+      const checked = props.modelValue === void 0 || props.value === void 0 ? void 0 : props.modelValue === props.value;
+      const children = [
+        (0, import_vue15.h)(
+          "label",
+          {
+            "data-mason-slot": "label",
+            for: ids.controlId,
+            style: radioLabelStyle(props.disabled)
+          },
+          [
+            (0, import_vue15.h)("input", {
+              ...controlAttrs,
+              type: "radio",
+              id: ids.controlId,
+              "data-mason-slot": "control",
+              disabled: props.disabled,
+              value: props.value,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": ids.describedBy,
+              ...checked === void 0 ? null : { checked },
+              onChange: forwarded ? [emitChange, forwarded] : emitChange,
+              style: visuallyHiddenControlStyle()
+            }),
+            (0, import_vue15.h)("span", {
+              "data-mason-slot": "indicator",
+              "aria-hidden": "true",
+              style: radioIndicatorStyle()
+            }),
+            label ? (0, import_vue15.h)("span", { "data-mason-slot": "label-text" }, label) : null
+          ]
+        )
+      ];
+      if (description) {
+        children.push(
+          (0, import_vue15.h)(
+            "p",
+            {
+              "data-mason-slot": "description",
+              id: ids.descriptionId,
+              style: fieldDescriptionStyle()
+            },
+            description
+          )
+        );
+      }
+      if (error) {
+        children.push(
+          (0, import_vue15.h)(
+            "p",
+            {
+              "data-mason-slot": "error",
+              id: ids.errorId,
+              role: "alert",
+              style: fieldErrorStyle()
+            },
+            error
+          )
+        );
+      }
+      return (0, import_vue15.h)(
+        "div",
+        {
+          "data-mason-component": "radio",
+          "data-invalid": invalid || void 0,
+          "data-disabled": props.disabled || void 0,
+          class: mergeClassName(attrClass),
+          style: [radioRootStyle(), attrStyle]
+        },
+        children
+      );
+    };
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
@@ -1308,6 +1506,7 @@ var Checkbox = (0, import_vue14.defineComponent)({
   Divider,
   Link,
   MasonProvider,
+  Radio,
   Select,
   Spinner,
   Stack,