@mason-ds/react 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -21,11 +21,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Badge: () => Badge,
+  Box: () => Box,
   Button: () => Button,
   Callout: () => Callout,
   Card: () => Card,
   Checkbox: () => Checkbox,
+  Container: () => Container,
   Divider: () => Divider,
+  Grid: () => Grid,
   Link: () => Link,
   MasonProvider: () => MasonProvider,
   Radio: () => Radio,
@@ -33,7 +36,8 @@ __export(index_exports, {
   Spinner: () => Spinner,
   Stack: () => Stack,
   Text: () => Text,
-  TextField: () => TextField
+  TextField: () => TextField,
+  Toggle: () => Toggle
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -51,6 +55,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}`);
 }
@@ -74,7 +81,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",
@@ -90,7 +97,7 @@ function textStyle({
   };
 }
 
-// src/Text.tsx
+// src/primitives/Text.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Text({
   as = "p",
@@ -117,7 +124,7 @@ function Text({
   );
 }
 
-// src/stackStyles.ts
+// src/primitives/stackStyles.ts
 var FLEX_ALIGN = {
   start: "flex-start",
   center: "center",
@@ -150,7 +157,7 @@ function stackStyle({
   };
 }
 
-// src/Stack.tsx
+// src/primitives/Stack.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Stack({
   direction = "column",
@@ -180,8 +187,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
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Box({
+  as = "div",
+  padding,
+  tone = "transparent",
+  radius,
+  bordered = false,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const Component = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Grid({
+  columns = 2,
+  gap = "md",
+  align,
+  justify,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "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
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Container({
+  as = "div",
+  maxWidth = "lg",
+  padding,
+  center = true,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const Component = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    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"
@@ -196,7 +351,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),
@@ -206,8 +361,8 @@ function cardStyle({
   };
 }
 
-// src/Card.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+// src/primitives/Card.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Card({
   padding = "md",
   elevation = "sm",
@@ -219,7 +374,7 @@ function Card({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       "data-mason-component": "card",
@@ -235,7 +390,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") {
@@ -257,15 +412,15 @@ function dividerStyle(orientation = "horizontal") {
   };
 }
 
-// src/Divider.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+// src/primitives/Divider.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Divider({
   orientation = "horizontal",
   className,
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "hr",
     {
       "data-mason-component": "divider",
@@ -278,7 +433,7 @@ function Divider({
   );
 }
 
-// src/linkStyles.ts
+// src/primitives/linkStyles.ts
 function linkStyle({
   tone = "link",
   underline = "hover"
@@ -292,8 +447,8 @@ function linkStyle({
   };
 }
 
-// src/Link.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+// src/primitives/Link.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Link({
   tone = "link",
   underline = "hover",
@@ -304,7 +459,7 @@ function Link({
   ...rest
 }) {
   const externalProps = external ? { target: "_blank", rel: "noreferrer noopener" } : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "a",
     {
       "data-mason-component": "link",
@@ -319,7 +474,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"),
@@ -339,8 +494,8 @@ function spinnerStyle(size = "md") {
   };
 }
 
-// src/Spinner.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+// src/primitives/Spinner.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Spinner({
   size = "md",
   label,
@@ -348,7 +503,7 @@ function Spinner({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "span",
     {
       "data-mason-component": "spinner",
@@ -363,14 +518,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"),
@@ -394,14 +542,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",
@@ -411,9 +552,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),
@@ -422,8 +560,8 @@ function buttonStyle({
   };
 }
 
-// src/Button.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+// src/primitives/Button.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function Button({
   variant = "primary",
   size = "md",
@@ -438,7 +576,7 @@ function Button({
   ...rest
 }) {
   const isDisabled = disabled || loading;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "button",
     {
       type,
@@ -449,20 +587,20 @@ function Button({
       "aria-busy": loading || void 0,
       className: mergeClassName(className),
       style: {
-        ...buttonStyle({ variant, size, disabled, loading }),
+        ...buttonStyle({ size }),
         ...style
       },
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spinner, { size: "inherit", "data-mason-slot": "spinner" }) : leadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-mason-slot": "leading", children: leadingSlot }) : null,
-        children ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-mason-slot": "label", children }) : null,
-        trailingSlot && !loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-mason-slot": "trailing", children: trailingSlot }) : null
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Spinner, { size: "inherit", "data-mason-slot": "spinner" }) : leadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-mason-slot": "leading", children: leadingSlot }) : null,
+        children ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-mason-slot": "label", children }) : null,
+        trailingSlot && !loading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-mason-slot": "trailing", children: trailingSlot }) : null
       ]
     }
   );
 }
 
-// src/badgeStyles.ts
+// src/primitives/badgeStyles.ts
 function badgeStyle({
   tone = "neutral",
   size = "sm"
@@ -491,8 +629,8 @@ function badgeStyle({
   };
 }
 
-// src/Badge.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+// src/primitives/Badge.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Badge({
   tone = "neutral",
   size = "sm",
@@ -501,7 +639,7 @@ function Badge({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "span",
     {
       "data-mason-component": "badge",
@@ -515,7 +653,7 @@ function Badge({
   );
 }
 
-// src/calloutStyles.ts
+// src/primitives/calloutStyles.ts
 function calloutStyle(tone = "info") {
   return {
     display: "flex",
@@ -544,8 +682,8 @@ function calloutBodyStyle() {
   return { margin: 0, ...typographyStyle("body.sm") };
 }
 
-// src/Callout.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+// src/primitives/Callout.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Callout({
   tone = "info",
   title,
@@ -555,7 +693,7 @@ function Callout({
   children,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       "data-mason-component": "callout",
@@ -564,20 +702,20 @@ function Callout({
       style: { ...calloutStyle(tone), ...style },
       ...rest,
       children: [
-        iconSlot ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-mason-slot": "icon", "aria-hidden": "true", children: iconSlot }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { "data-mason-slot": "content", style: calloutContentStyle(), children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { "data-mason-slot": "title", style: calloutTitleStyle(), children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-mason-slot": "body", style: calloutBodyStyle(), children }) : null
+        iconSlot ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "data-mason-slot": "icon", "aria-hidden": "true", children: iconSlot }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { "data-mason-slot": "content", style: calloutContentStyle(), children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { "data-mason-slot": "title", style: calloutTitleStyle(), children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-mason-slot": "body", style: calloutBodyStyle(), children }) : null
         ] })
       ]
     }
   );
 }
 
-// src/field.tsx
+// src/compounds/field.tsx
 var import_react = require("react");
 
-// src/fieldStyles.ts
+// src/compounds/fieldStyles.ts
 var CONTROL_FONT = {
   sm: "body.sm",
   md: "body.md",
@@ -641,10 +779,12 @@ function fieldErrorStyle() {
 function visuallyHiddenControlStyle() {
   return {
     position: "absolute",
+    left: 0,
+    top: 0,
     width: 1,
     height: 1,
     padding: 0,
-    margin: -1,
+    margin: 0,
     overflow: "hidden",
     clip: "rect(0, 0, 0, 0)",
     whiteSpace: "nowrap",
@@ -654,8 +794,8 @@ function visuallyHiddenControlStyle() {
   };
 }
 
-// src/field.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+// src/compounds/field.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function useFieldIds({
   id,
   description,
@@ -681,7 +821,7 @@ function FieldFrame({
   style,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
       "data-mason-component": component,
@@ -691,7 +831,7 @@ function FieldFrame({
       className: mergeClassName(className),
       style: { ...fieldRootStyle(), ...style },
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "label",
           {
             "data-mason-slot": "label",
@@ -701,7 +841,7 @@ function FieldFrame({
           }
         ) : null,
         children,
-        description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "p",
           {
             "data-mason-slot": "description",
@@ -710,7 +850,7 @@ function FieldFrame({
             children: description
           }
         ) : null,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "p",
           {
             "data-mason-slot": "error",
@@ -725,8 +865,8 @@ function FieldFrame({
   );
 }
 
-// src/TextField.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+// src/compounds/TextField.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function TextField({
   label,
   description,
@@ -741,7 +881,7 @@ function TextField({
 }) {
   const ids = useFieldIds({ id, description, error });
   const isInvalid = invalid ?? Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     FieldFrame,
     {
       component: "text-field",
@@ -754,7 +894,7 @@ function TextField({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "input",
         {
           ...rest,
@@ -770,8 +910,8 @@ function TextField({
   );
 }
 
-// src/Select.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+// src/compounds/Select.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Select({
   label,
   description,
@@ -788,7 +928,7 @@ function Select({
 }) {
   const ids = useFieldIds({ id, description, error });
   const isInvalid = invalid ?? Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     FieldFrame,
     {
       component: "select",
@@ -801,7 +941,7 @@ function Select({
       disabled,
       className,
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "select",
         {
           ...rest,
@@ -812,7 +952,7 @@ function Select({
           "aria-describedby": ids.describedBy,
           style: fieldControlStyle({ size, invalid: isInvalid, disabled }),
           children: [
-            placeholder ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: "", children: placeholder }) : null,
+            placeholder ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("option", { value: "", children: placeholder }) : null,
             children
           ]
         }
@@ -821,10 +961,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"),
@@ -857,8 +998,8 @@ function checkboxIndicatorStyle() {
   };
 }
 
-// src/Checkbox.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+// src/compounds/Checkbox.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Checkbox({
   label,
   description,
@@ -872,7 +1013,7 @@ function Checkbox({
 }) {
   const ids = useFieldIds({ id, description, error });
   const isInvalid = invalid ?? Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       "data-mason-component": "checkbox",
@@ -881,14 +1022,14 @@ function Checkbox({
       className: mergeClassName(className),
       style: { ...checkboxRootStyle(), ...style },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "label",
           {
             "data-mason-slot": "label",
             htmlFor: ids.controlId,
             style: checkboxLabelStyle(disabled),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "input",
                 {
                   ...rest,
@@ -901,12 +1042,12 @@ function Checkbox({
                   style: visuallyHiddenControlStyle()
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "data-mason-slot": "indicator", "aria-hidden": "true", style: checkboxIndicatorStyle() }),
-              label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { "data-mason-slot": "label-text", children: label }) : null
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "data-mason-slot": "indicator", "aria-hidden": "true", style: checkboxIndicatorStyle() }),
+              label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "data-mason-slot": "label-text", children: label }) : null
             ]
           }
         ),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "p",
           {
             "data-mason-slot": "description",
@@ -915,7 +1056,7 @@ function Checkbox({
             children: description
           }
         ) : null,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "p",
           {
             "data-mason-slot": "error",
@@ -930,10 +1071,11 @@ function Checkbox({
   );
 }
 
-// src/radioStyles.ts
+// src/compounds/radioStyles.ts
 var CONTROL_SIZE2 = "1.125rem";
 function radioRootStyle() {
   return {
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     gap: spacingVar("stack", "sm"),
@@ -966,8 +1108,8 @@ function radioIndicatorStyle() {
   };
 }
 
-// src/Radio.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+// src/compounds/Radio.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Radio({
   label,
   description,
@@ -981,7 +1123,7 @@ function Radio({
 }) {
   const ids = useFieldIds({ id, description, error });
   const isInvalid = invalid ?? Boolean(error);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
       "data-mason-component": "radio",
@@ -990,14 +1132,14 @@ function Radio({
       className: mergeClassName(className),
       style: { ...radioRootStyle(), ...style },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "label",
           {
             "data-mason-slot": "label",
             htmlFor: ids.controlId,
             style: radioLabelStyle(disabled),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "input",
                 {
                   ...rest,
@@ -1010,12 +1152,140 @@ function Radio({
                   style: visuallyHiddenControlStyle()
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "data-mason-slot": "indicator", "aria-hidden": "true", style: radioIndicatorStyle() }),
-              label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "data-mason-slot": "label-text", children: label }) : null
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "data-mason-slot": "indicator", "aria-hidden": "true", style: radioIndicatorStyle() }),
+              label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "data-mason-slot": "label-text", children: label }) : null
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "p",
+          {
+            "data-mason-slot": "description",
+            id: ids.descriptionId,
+            style: fieldDescriptionStyle(),
+            children: description
+          }
+        ) : null,
+        error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "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
+var import_jsx_runtime19 = require("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__ */ (0, import_jsx_runtime19.jsxs)(
+    "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__ */ (0, import_jsx_runtime19.jsxs)(
+          "label",
+          {
+            "data-mason-slot": "label",
+            htmlFor: ids.controlId,
+            style: toggleLabelStyle(disabled),
+            children: [
+              label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "data-mason-slot": "label-text", children: label }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "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__ */ (0, import_jsx_runtime19.jsx)("span", { "data-mason-slot": "indicator", "aria-hidden": "true", style: toggleIndicatorStyle(size), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { "data-mason-slot": "thumb", style: toggleThumbStyle(size) }) })
             ]
           }
         ),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "p",
           {
             "data-mason-slot": "description",
@@ -1024,7 +1294,7 @@ function Radio({
             children: description
           }
         ) : null,
-        error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        error ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "p",
           {
             "data-mason-slot": "error",
@@ -1041,11 +1311,14 @@ function Radio({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
+  Box,
   Button,
   Callout,
   Card,
   Checkbox,
+  Container,
   Divider,
+  Grid,
   Link,
   MasonProvider,
   Radio,
@@ -1053,6 +1326,7 @@ function Radio({
   Spinner,
   Stack,
   Text,
-  TextField
+  TextField,
+  Toggle
 });
 //# sourceMappingURL=index.cjs.map