@mason-ds/react 0.2.0 → 0.2.2

package/dist/index.js

@@ -12,6 +12,9 @@ function cssVar(path) {
 function spacingVar(axis, level) {
   return cssVar(`spacing.${axis}.${level}`);
 }
+function containerMaxWidthVar(level) {
+  return cssVar(`spacing.layout.container.${level}`);
+}
 function radiusVar(level) {
   return cssVar(`radius.${level}`);
 }
@@ -35,7 +38,7 @@ function mergeClassName(...parts) {
   return merged.length > 0 ? merged : void 0;
 }
 
-// src/textStyles.ts
+// src/primitives/textStyles.ts
 function textStyle({
   variant = "body.md",
   tone = "primary",
@@ -51,7 +54,7 @@ function textStyle({
   };
 }
 
-// src/Text.tsx
+// src/primitives/Text.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 function Text({
   as = "p",
@@ -78,7 +81,7 @@ function Text({
   );
 }
 
-// src/stackStyles.ts
+// src/primitives/stackStyles.ts
 var FLEX_ALIGN = {
   start: "flex-start",
   center: "center",
@@ -111,7 +114,7 @@ function stackStyle({
   };
 }
 
-// src/Stack.tsx
+// src/primitives/Stack.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 function Stack({
   direction = "column",
@@ -141,8 +144,156 @@ function Stack({
   );
 }
 
-// src/cardStyles.ts
+// src/primitives/boxStyles.ts
 var TONE_BG = {
+  canvas: "color.bg.canvas",
+  surface: "color.bg.surface",
+  elevated: "color.bg.elevated"
+};
+function boxStyle({
+  padding,
+  tone = "transparent",
+  radius,
+  bordered = false
+}) {
+  return {
+    display: "block",
+    boxSizing: "border-box",
+    minWidth: 0,
+    ...padding ? { padding: spacingVar("inset", padding) } : null,
+    ...tone !== "transparent" ? { backgroundColor: cssVar(TONE_BG[tone]) } : null,
+    ...radius ? { borderRadius: radiusVar(radius) } : null,
+    ...bordered ? { border: `1px solid ${cssVar("color.border.subtle")}` } : null
+  };
+}
+
+// src/primitives/Box.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function Box({
+  as = "div",
+  padding,
+  tone = "transparent",
+  radius,
+  bordered = false,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const Component = as;
+  return /* @__PURE__ */ jsx4(
+    Component,
+    {
+      "data-mason-component": "box",
+      "data-tone": tone,
+      className: mergeClassName(className),
+      style: { ...boxStyle({ padding, tone, radius, bordered }), ...style },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/primitives/gridStyles.ts
+var GRID_ALIGN = {
+  start: "start",
+  center: "center",
+  end: "end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var GRID_JUSTIFY = {
+  start: "start",
+  center: "center",
+  end: "end",
+  between: "space-between"
+};
+function gridStyle({
+  columns = 2,
+  gap = "md",
+  align,
+  justify
+}) {
+  return {
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    gap: spacingVar("stack", gap),
+    minWidth: 0,
+    ...align ? { alignItems: GRID_ALIGN[align] } : null,
+    ...justify ? { justifyContent: GRID_JUSTIFY[justify] } : null
+  };
+}
+
+// src/primitives/Grid.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Grid({
+  columns = 2,
+  gap = "md",
+  align,
+  justify,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-mason-component": "grid",
+      "data-columns": columns,
+      className: mergeClassName(className),
+      style: { ...gridStyle({ columns, gap, align, justify }), ...style },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/primitives/containerStyles.ts
+function containerStyle({
+  maxWidth = "lg",
+  padding,
+  center = true
+}) {
+  return {
+    display: "block",
+    boxSizing: "border-box",
+    width: "100%",
+    minWidth: 0,
+    maxWidth: containerMaxWidthVar(maxWidth),
+    ...center ? { marginInline: "auto" } : null,
+    ...padding ? { paddingInline: spacingVar("inline", padding) } : null
+  };
+}
+
+// src/primitives/Container.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Container({
+  as = "div",
+  maxWidth = "lg",
+  padding,
+  center = true,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const Component = as;
+  return /* @__PURE__ */ jsx6(
+    Component,
+    {
+      "data-mason-component": "container",
+      "data-max-width": maxWidth,
+      className: mergeClassName(className),
+      style: { ...containerStyle({ maxWidth, padding, center }), ...style },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/primitives/cardStyles.ts
+var TONE_BG2 = {
   surface: "color.bg.surface",
   canvas: "color.bg.canvas",
   elevated: "color.bg.elevated"
@@ -157,7 +308,7 @@ function cardStyle({
   return {
     display: "block",
     padding: spacingVar("inset", padding),
-    backgroundColor: cssVar(TONE_BG[tone]),
+    backgroundColor: cssVar(TONE_BG2[tone]),
     color: cssVar("color.text.primary"),
     border: bordered ? `1px solid ${cssVar("color.border.subtle")}` : "none",
     borderRadius: radiusVar(radius),
@@ -167,8 +318,8 @@ function cardStyle({
   };
 }
 
-// src/Card.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+// src/primitives/Card.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Card({
   padding = "md",
   elevation = "sm",
@@ -180,7 +331,7 @@ function Card({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       "data-mason-component": "card",
@@ -196,7 +347,7 @@ function Card({
   );
 }
 
-// src/dividerStyles.ts
+// src/primitives/dividerStyles.ts
 function dividerStyle(orientation = "horizontal") {
   const line = `1px solid ${cssVar("color.border.subtle")}`;
   if (orientation === "vertical") {
@@ -218,15 +369,15 @@ function dividerStyle(orientation = "horizontal") {
   };
 }
 
-// src/Divider.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+// src/primitives/Divider.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Divider({
   orientation = "horizontal",
   className,
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx8(
     "hr",
     {
       "data-mason-component": "divider",
@@ -239,7 +390,7 @@ function Divider({
   );
 }
 
-// src/linkStyles.ts
+// src/primitives/linkStyles.ts
 function linkStyle({
   tone = "link",
   underline = "hover"
@@ -253,8 +404,8 @@ function linkStyle({
   };
 }
 
-// src/Link.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+// src/primitives/Link.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Link({
   tone = "link",
   underline = "hover",
@@ -265,7 +416,7 @@ function Link({
   ...rest
 }) {
   const externalProps = external ? { target: "_blank", rel: "noreferrer noopener" } : null;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx9(
     "a",
     {
       "data-mason-component": "link",
@@ -280,7 +431,7 @@ function Link({
   );
 }
 
-// src/spinnerStyles.ts
+// src/primitives/spinnerStyles.ts
 var SIZE_DIMENSION = {
   sm: cssVar("font.body.sm.size"),
   md: cssVar("font.body.md.size"),
@@ -300,8 +451,8 @@ function spinnerStyle(size = "md") {
   };
 }
 
-// src/Spinner.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+// src/primitives/Spinner.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Spinner({
   size = "md",
   label,
@@ -309,7 +460,7 @@ function Spinner({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx10(
     "span",
     {
       "data-mason-component": "spinner",
@@ -324,14 +475,7 @@ function Spinner({
   );
 }
 
-// src/buttonStyles.ts
-function actionColors(variant) {
-  return {
-    bg: `color.action.${variant}.bg`,
-    text: `color.action.${variant}.text`,
-    border: `color.action.${variant}.border`
-  };
-}
+// src/primitives/buttonStyles.ts
 var sizeStyles = {
   sm: {
     paddingBlock: cssVar("spacing.inset.sm"),
@@ -355,14 +499,7 @@ var sizeStyles = {
     font: "label.lg"
   }
 };
-function buttonStyle({
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  loading = false
-}) {
-  const inactive = disabled || loading;
-  const colors = actionColors(inactive ? "disabled" : variant);
+function buttonStyle({ size = "md" }) {
   const sizing = sizeStyles[size];
   return {
     display: "inline-flex",
@@ -372,9 +509,6 @@ function buttonStyle({
     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),
@@ -383,8 +517,8 @@ function buttonStyle({
   };
 }
 
-// src/Button.tsx
-import { jsx as jsx8, jsxs } from "react/jsx-runtime";
+// src/primitives/Button.tsx
+import { jsx as jsx11, jsxs } from "react/jsx-runtime";
 function Button({
   variant = "primary",
   size = "md",
@@ -410,20 +544,20 @@ function Button({
       "aria-busy": loading || void 0,
       className: mergeClassName(className),
       style: {
-        ...buttonStyle({ variant, size, disabled, loading }),
+        ...buttonStyle({ size }),
         ...style
       },
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsx8(Spinner, { size: "inherit", "data-mason-slot": "spinner" }) : leadingSlot ? /* @__PURE__ */ jsx8("span", { "data-mason-slot": "leading", children: leadingSlot }) : null,
-        children ? /* @__PURE__ */ jsx8("span", { "data-mason-slot": "label", children }) : null,
-        trailingSlot && !loading ? /* @__PURE__ */ jsx8("span", { "data-mason-slot": "trailing", children: trailingSlot }) : null
+        loading ? /* @__PURE__ */ jsx11(Spinner, { size: "inherit", "data-mason-slot": "spinner" }) : leadingSlot ? /* @__PURE__ */ jsx11("span", { "data-mason-slot": "leading", children: leadingSlot }) : null,
+        children ? /* @__PURE__ */ jsx11("span", { "data-mason-slot": "label", children }) : null,
+        trailingSlot && !loading ? /* @__PURE__ */ jsx11("span", { "data-mason-slot": "trailing", children: trailingSlot }) : null
       ]
     }
   );
 }
 
-// src/badgeStyles.ts
+// src/primitives/badgeStyles.ts
 function badgeStyle({
   tone = "neutral",
   size = "sm"
@@ -452,8 +586,8 @@ function badgeStyle({
   };
 }
 
-// src/Badge.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+// src/primitives/Badge.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Badge({
   tone = "neutral",
   size = "sm",
@@ -462,7 +596,7 @@ function Badge({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     "span",
     {
       "data-mason-component": "badge",
@@ -476,7 +610,7 @@ function Badge({
   );
 }
 
-// src/calloutStyles.ts
+// src/primitives/calloutStyles.ts
 function calloutStyle(tone = "info") {
   return {
     display: "flex",
@@ -505,8 +639,8 @@ function calloutBodyStyle() {
   return { margin: 0, ...typographyStyle("body.sm") };
 }
 
-// src/Callout.tsx
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+// src/primitives/Callout.tsx
+import { jsx as jsx13, jsxs as jsxs2 } from "react/jsx-runtime";
 function Callout({
   tone = "info",
   title,
@@ -525,20 +659,20 @@ function Callout({
       style: { ...calloutStyle(tone), ...style },
       ...rest,
       children: [
-        iconSlot ? /* @__PURE__ */ jsx10("span", { "data-mason-slot": "icon", "aria-hidden": "true", children: iconSlot }) : null,
+        iconSlot ? /* @__PURE__ */ jsx13("span", { "data-mason-slot": "icon", "aria-hidden": "true", children: iconSlot }) : null,
         /* @__PURE__ */ jsxs2("div", { "data-mason-slot": "content", style: calloutContentStyle(), children: [
-          title ? /* @__PURE__ */ jsx10("p", { "data-mason-slot": "title", style: calloutTitleStyle(), children: title }) : null,
-          children ? /* @__PURE__ */ jsx10("div", { "data-mason-slot": "body", style: calloutBodyStyle(), children }) : null
+          title ? /* @__PURE__ */ jsx13("p", { "data-mason-slot": "title", style: calloutTitleStyle(), children: title }) : null,
+          children ? /* @__PURE__ */ jsx13("div", { "data-mason-slot": "body", style: calloutBodyStyle(), children }) : null
         ] })
       ]
     }
   );
 }
 
-// src/field.tsx
+// src/compounds/field.tsx
 import { useId } from "react";
 
-// src/fieldStyles.ts
+// src/compounds/fieldStyles.ts
 var CONTROL_FONT = {
   sm: "body.sm",
   md: "body.md",
@@ -599,9 +733,26 @@ function fieldErrorStyle() {
     ...typographyStyle("body.sm")
   };
 }
+function visuallyHiddenControlStyle() {
+  return {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: 0,
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: 0,
+    borderStyle: "solid",
+    borderColor: "transparent"
+  };
+}
 
-// src/field.tsx
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+// src/compounds/field.tsx
+import { jsx as jsx14, jsxs as jsxs3 } from "react/jsx-runtime";
 function useFieldIds({
   id,
   description,
@@ -637,7 +788,7 @@ function FieldFrame({
       className: mergeClassName(className),
       style: { ...fieldRootStyle(), ...style },
       children: [
-        label ? /* @__PURE__ */ jsx11(
+        label ? /* @__PURE__ */ jsx14(
           "label",
           {
             "data-mason-slot": "label",
@@ -647,7 +798,7 @@ function FieldFrame({
           }
         ) : null,
         children,
-        description ? /* @__PURE__ */ jsx11(
+        description ? /* @__PURE__ */ jsx14(
           "p",
           {
             "data-mason-slot": "description",
@@ -656,7 +807,7 @@ function FieldFrame({
             children: description
           }
         ) : null,
-        error ? /* @__PURE__ */ jsx11(
+        error ? /* @__PURE__ */ jsx14(
           "p",
           {
             "data-mason-slot": "error",
@@ -671,8 +822,8 @@ function FieldFrame({
   );
 }
 
-// src/TextField.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+// src/compounds/TextField.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
 function TextField({
   label,
   description,
@@ -687,7 +838,7 @@ function TextField({
 }) {
   const ids = useFieldIds({ id, description, error });
   const isInvalid = invalid ?? Boolean(error);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     FieldFrame,
     {
       component: "text-field",
@@ -700,7 +851,7 @@ function TextField({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx15(
         "input",
         {
           ...rest,
@@ -716,8 +867,8 @@ function TextField({
   );
 }
 
-// src/Select.tsx
-import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/compounds/Select.tsx
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
 function Select({
   label,
   description,
@@ -734,7 +885,7 @@ function Select({
 }) {
   const ids = useFieldIds({ id, description, error });
   const isInvalid = invalid ?? Boolean(error);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     FieldFrame,
     {
       component: "select",
@@ -758,7 +909,7 @@ function Select({
           "aria-describedby": ids.describedBy,
           style: fieldControlStyle({ size, invalid: isInvalid, disabled }),
           children: [
-            placeholder ? /* @__PURE__ */ jsx13("option", { value: "", children: placeholder }) : null,
+            placeholder ? /* @__PURE__ */ jsx16("option", { value: "", children: placeholder }) : null,
             children
           ]
         }
@@ -767,9 +918,11 @@ function Select({
   );
 }
 
-// src/checkboxStyles.ts
+// src/compounds/checkboxStyles.ts
+var CONTROL_SIZE = "1.125rem";
 function checkboxRootStyle() {
   return {
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     gap: spacingVar("stack", "sm"),
@@ -786,19 +939,24 @@ 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"
   };
 }
 
-// src/Checkbox.tsx
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+// src/compounds/Checkbox.tsx
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
 function Checkbox({
   label,
   description,
@@ -828,7 +986,7 @@ function Checkbox({
             htmlFor: ids.controlId,
             style: checkboxLabelStyle(disabled),
             children: [
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx17(
                 "input",
                 {
                   ...rest,
@@ -838,14 +996,15 @@ function Checkbox({
                   disabled,
                   "aria-invalid": isInvalid || void 0,
                   "aria-describedby": ids.describedBy,
-                  style: checkboxControlStyle()
+                  style: visuallyHiddenControlStyle()
                 }
               ),
-              label ? /* @__PURE__ */ jsx14("span", { "data-mason-slot": "label-text", children: label }) : null
+              /* @__PURE__ */ jsx17("span", { "data-mason-slot": "indicator", "aria-hidden": "true", style: checkboxIndicatorStyle() }),
+              label ? /* @__PURE__ */ jsx17("span", { "data-mason-slot": "label-text", children: label }) : null
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsx14(
+        description ? /* @__PURE__ */ jsx17(
           "p",
           {
             "data-mason-slot": "description",
@@ -854,7 +1013,245 @@ function Checkbox({
             children: description
           }
         ) : null,
-        error ? /* @__PURE__ */ jsx14(
+        error ? /* @__PURE__ */ jsx17(
+          "p",
+          {
+            "data-mason-slot": "error",
+            id: ids.errorId,
+            role: "alert",
+            style: fieldErrorStyle(),
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/compounds/radioStyles.ts
+var CONTROL_SIZE2 = "1.125rem";
+function radioRootStyle() {
+  return {
+    position: "relative",
+    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/compounds/Radio.tsx
+import { jsx as jsx18, jsxs as jsxs6 } from "react/jsx-runtime";
+function Radio({
+  label,
+  description,
+  error,
+  invalid,
+  id,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}) {
+  const ids = useFieldIds({ id, description, error });
+  const isInvalid = invalid ?? Boolean(error);
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-mason-component": "radio",
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: mergeClassName(className),
+      style: { ...radioRootStyle(), ...style },
+      children: [
+        /* @__PURE__ */ jsxs6(
+          "label",
+          {
+            "data-mason-slot": "label",
+            htmlFor: ids.controlId,
+            style: radioLabelStyle(disabled),
+            children: [
+              /* @__PURE__ */ jsx18(
+                "input",
+                {
+                  ...rest,
+                  type: "radio",
+                  id: ids.controlId,
+                  "data-mason-slot": "control",
+                  disabled,
+                  "aria-invalid": isInvalid || void 0,
+                  "aria-describedby": ids.describedBy,
+                  style: visuallyHiddenControlStyle()
+                }
+              ),
+              /* @__PURE__ */ jsx18("span", { "data-mason-slot": "indicator", "aria-hidden": "true", style: radioIndicatorStyle() }),
+              label ? /* @__PURE__ */ jsx18("span", { "data-mason-slot": "label-text", children: label }) : null
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx18(
+          "p",
+          {
+            "data-mason-slot": "description",
+            id: ids.descriptionId,
+            style: fieldDescriptionStyle(),
+            children: description
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx18(
+          "p",
+          {
+            "data-mason-slot": "error",
+            id: ids.errorId,
+            role: "alert",
+            style: fieldErrorStyle(),
+            children: error
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/compounds/toggleStyles.ts
+var TRACK = {
+  sm: { width: "1.75rem", height: "1rem" },
+  md: { width: "2.25rem", height: "1.25rem" },
+  lg: { width: "2.75rem", height: "1.5rem" }
+};
+var THUMB = {
+  sm: "0.75rem",
+  md: "1rem",
+  lg: "1.25rem"
+};
+function toggleRootStyle() {
+  return {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: spacingVar("stack", "sm"),
+    minWidth: 0
+  };
+}
+function toggleLabelStyle(disabled = false) {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: spacingVar("inline", "sm"),
+    cursor: disabled ? "not-allowed" : "pointer",
+    color: disabled ? cssVar("color.text.disabled") : cssVar("color.text.primary"),
+    ...typographyStyle("label.md")
+  };
+}
+function toggleIndicatorStyle(size = "md") {
+  return {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    width: TRACK[size].width,
+    height: TRACK[size].height,
+    padding: "0.125rem",
+    flexShrink: 0,
+    boxSizing: "border-box",
+    borderRadius: radiusVar("full")
+  };
+}
+function toggleThumbStyle(size = "md") {
+  return {
+    width: THUMB[size],
+    height: THUMB[size],
+    borderRadius: radiusVar("full"),
+    flexShrink: 0
+  };
+}
+
+// src/compounds/Toggle.tsx
+import { jsx as jsx19, jsxs as jsxs7 } from "react/jsx-runtime";
+function Toggle({
+  label,
+  description,
+  error,
+  invalid,
+  size = "md",
+  id,
+  disabled = false,
+  className,
+  style,
+  ...rest
+}) {
+  const ids = useFieldIds({ id, description, error });
+  const isInvalid = invalid ?? Boolean(error);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "data-mason-component": "toggle",
+      "data-size": size,
+      "data-invalid": isInvalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: mergeClassName(className),
+      style: { ...toggleRootStyle(), ...style },
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "label",
+          {
+            "data-mason-slot": "label",
+            htmlFor: ids.controlId,
+            style: toggleLabelStyle(disabled),
+            children: [
+              label ? /* @__PURE__ */ jsx19("span", { "data-mason-slot": "label-text", children: label }) : null,
+              /* @__PURE__ */ jsx19(
+                "input",
+                {
+                  ...rest,
+                  type: "checkbox",
+                  role: "switch",
+                  id: ids.controlId,
+                  "data-mason-slot": "control",
+                  disabled,
+                  "aria-invalid": isInvalid || void 0,
+                  "aria-describedby": ids.describedBy,
+                  style: visuallyHiddenControlStyle()
+                }
+              ),
+              /* @__PURE__ */ jsx19("span", { "data-mason-slot": "indicator", "aria-hidden": "true", style: toggleIndicatorStyle(size), children: /* @__PURE__ */ jsx19("span", { "data-mason-slot": "thumb", style: toggleThumbStyle(size) }) })
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx19(
+          "p",
+          {
+            "data-mason-slot": "description",
+            id: ids.descriptionId,
+            style: fieldDescriptionStyle(),
+            children: description
+          }
+        ) : null,
+        error ? /* @__PURE__ */ jsx19(
           "p",
           {
             "data-mason-slot": "error",
@@ -870,17 +1267,22 @@ function Checkbox({
 }
 export {
   Badge,
+  Box,
   Button,
   Callout,
   Card,
   Checkbox,
+  Container,
   Divider,
+  Grid,
   Link,
   MasonProvider,
+  Radio,
   Select,
   Spinner,
   Stack,
   Text,
-  TextField
+  TextField,
+  Toggle
 };
 //# sourceMappingURL=index.js.map