@epilot/volt-ui-experimental-griffel 0.2.1 → 0.3.0

package/dist/components/popover/popover.js

@@ -1,21 +1,29 @@
-import { jsx as r } from "react/jsx-runtime";
-import * as e from "react";
-import { Root as d, Anchor as u, Content as g, Portal as v, Trigger as y } from "../../vendor/@radix-ui/react-popover/dist/index.js";
-import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as p } from "../../packages/volt-runtime/dist/renderer/contract.js";
-import { mergeClasses as P } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as x } from "../../styles/make-styles.js";
-import { spacingGroup2 as b, grayA1 as h, spacingElement2 as s, grayA12 as R, body as T, radiusXl as A } from "../../tokens/index.js";
-const N = x({
+import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
+import * as t from "react";
+import { Root as d, Anchor as v, Content as g, Portal as x, Trigger as y } from "../../vendor/@radix-ui/react-popover/dist/index.js";
+import { shorthands as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as s } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { mergeClasses as N } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { useDensity as b } from "../density-provider/density-provider.js";
+import { makeVoltStyles as h } from "../../styles/make-styles.js";
+import { spacingGroup2 as P, grayA1 as w, radiusXl as D, spacingElement2 as i, grayA12 as R, body as T } from "../../tokens/index.js";
+const j = h({
   popup: {
     backgroundColor: T,
     color: R,
     transformOrigin: "var(--radix-popover-content-transform-origin)",
-    ...i.borderRadius(A),
-    ...i.border("1px", "solid", h),
+    ...p.borderRadius(D),
+    ...p.border("1px", "solid", w),
     // v1 shadow-md
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
     outlineStyle: "none",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationDuration: "0.01ms",
+      animationIterationCount: "1",
+      "&[data-state='open']": {
+        animationDuration: "0.01ms"
+      }
+    },
     "&[data-state='open']": {
       animationName: {
         from: { opacity: 0, transform: "scale(0.95)" },
@@ -28,7 +36,7 @@ const N = x({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(-${s}) scale(0.95)`
+          transform: `translateY(-${i}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -37,7 +45,7 @@ const N = x({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(${s}) scale(0.95)`
+          transform: `translateX(${i}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -46,7 +54,7 @@ const N = x({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(-${s}) scale(0.95)`
+          transform: `translateX(-${i}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -55,7 +63,7 @@ const N = x({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(${s}) scale(0.95)`
+          transform: `translateY(${i}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -70,69 +78,106 @@ const N = x({
     }
   },
   popupPadding: {
-    ...i.padding(b)
+    ...p.padding(P)
   }
-}), k = e.forwardRef(
-  function(o, a) {
-    return /* @__PURE__ */ r(d, { "data-slot": "popover", ...o });
+}), Y = t.forwardRef(
+  function(o, e) {
+    return /* @__PURE__ */ a.jsxDEV(d, { "data-slot": "popover", ...o }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/popover/popover.tsx",
+      lineNumber: 90,
+      columnNumber: 12
+    }, this);
   }
-), z = e.forwardRef(function({ className: o, ...a }, t) {
-  return /* @__PURE__ */ r(
+), $ = t.forwardRef(function({ className: o, ...e }, r) {
+  return /* @__PURE__ */ a.jsxDEV(
     y,
     {
-      ref: t,
+      ref: r,
       "data-slot": "popover-trigger",
-      [p]: "popover-trigger",
+      [s]: "popover-trigger",
       className: o,
-      ...a
-    }
+      ...e
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/popover/popover.tsx",
+      lineNumber: 103,
+      columnNumber: 5
+    },
+    this
   );
-}), D = e.forwardRef(
-  function(o, a) {
-    return /* @__PURE__ */ r(
-      v,
+}), _ = t.forwardRef(
+  function(o, e) {
+    return /* @__PURE__ */ a.jsxDEV(
+      x,
       {
         "data-slot": "popover-portal",
-        [p]: "popover-portal",
+        [s]: "popover-portal",
         ...o
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/popover/popover.tsx",
+        lineNumber: 120,
+        columnNumber: 7
+      },
+      this
     );
   }
-), F = e.forwardRef(function({ className: o, ...a }, t) {
-  return /* @__PURE__ */ r(
-    u,
+), z = t.forwardRef(function({ className: o, ...e }, r) {
+  return /* @__PURE__ */ a.jsxDEV(
+    v,
     {
-      ref: t,
+      ref: r,
       "data-slot": "popover-anchor",
-      [p]: "popover-anchor",
+      [s]: "popover-anchor",
       className: o,
-      ...a
-    }
+      ...e
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/popover/popover.tsx",
+      lineNumber: 138,
+      columnNumber: 5
+    },
+    this
   );
-}), O = e.forwardRef(function({ className: o, align: a = "center", sideOffset: t = 4, flush: c = !1, ...f }, l) {
-  const m = N();
-  return /* @__PURE__ */ r(
+}), F = t.forwardRef(function({ className: o, align: e = "center", sideOffset: r = 4, flush: c = !1, ...f }, u) {
+  const l = j(), m = b();
+  return /* @__PURE__ */ a.jsxDEV(
     g,
     {
-      ref: l,
+      ref: u,
       "data-slot": "popover-content",
-      [p]: "popover-content",
-      align: a,
-      sideOffset: t,
-      className: P(
-        m.popup,
-        !c && m.popupPadding,
+      [s]: "popover-content",
+      ...m !== void 0 ? { "data-density": m } : {},
+      align: e,
+      sideOffset: r,
+      className: N(
+        l.popup,
+        !c && l.popupPadding,
         o
       ),
       ...f
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/popover/popover.tsx",
+      lineNumber: 166,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  k as Popover,
-  F as PopoverAnchor,
-  O as PopoverContent,
-  D as PopoverPortal,
-  z as PopoverTrigger
+  Y as Popover,
+  z as PopoverAnchor,
+  F as PopoverContent,
+  _ as PopoverPortal,
+  $ as PopoverTrigger
 };
 //# sourceMappingURL=popover.js.map

package/dist/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeVoltStyles({\n  popup: {\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    transformOrigin: \"var(--radix-popover-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    // v1 shadow-md\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    outlineStyle: \"none\",\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0, transform: \"scale(0.95)\" },\n        to: { opacity: 1, transform: \"scale(1)\" },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='open'][data-side='bottom']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='left']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='right']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='top']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1, transform: \"scale(1)\" },\n        to: { opacity: 0, transform: \"scale(0.95)\" },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  popupPadding: {\n    ...shorthands.padding(tokens.spacingGroup2),\n  },\n})\n\nexport type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>\n\nexport const Popover = React.forwardRef<HTMLElement, PopoverProps>(\n  function Popover(props, _ref) {\n    return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n  }\n)\n\nexport type PopoverTriggerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Trigger\n>\n\nexport const PopoverTrigger = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Trigger>,\n  PopoverTriggerProps\n>(function PopoverTrigger({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Trigger\n      ref={ref}\n      data-slot=\"popover-trigger\"\n      {...{ [SLOT_ATTR]: \"popover-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverPortalProps = React.ComponentProps<\n  typeof PopoverPrimitive.Portal\n>\n\nexport const PopoverPortal = React.forwardRef<HTMLElement, PopoverPortalProps>(\n  function PopoverPortal(props, _ref) {\n    return (\n      <PopoverPrimitive.Portal\n        data-slot=\"popover-portal\"\n        {...{ [SLOT_ATTR]: \"popover-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type PopoverAnchorProps = React.ComponentProps<\n  typeof PopoverPrimitive.Anchor\n>\n\nexport const PopoverAnchor = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Anchor>,\n  PopoverAnchorProps\n>(function PopoverAnchor({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Anchor\n      ref={ref}\n      data-slot=\"popover-anchor\"\n      {...{ [SLOT_ATTR]: \"popover-anchor\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverContentProps = React.ComponentProps<\n  typeof PopoverPrimitive.Content\n> & {\n  flush?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(function PopoverContent(\n  { className, align = \"center\", sideOffset = 4, flush = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <PopoverPrimitive.Content\n      ref={ref}\n      data-slot=\"popover-content\"\n      {...{ [SLOT_ATTR]: \"popover-content\" }}\n      align={align}\n      sideOffset={sideOffset}\n      className={mergeClasses(\n        styles.popup,\n        !flush && styles.popupPadding,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.body","tokens.grayA12","shorthands","tokens.radiusXl","tokens.grayA1","tokens.spacingElement2","tokens.spacingGroup2","Popover","React","props","_ref","PopoverPrimitive.Root","PopoverTrigger","className","ref","jsx","PopoverPrimitive.Trigger","SLOT_ATTR","PopoverPortal","PopoverPrimitive.Portal","PopoverAnchor","PopoverPrimitive.Anchor","PopoverContent","align","sideOffset","flush","styles","PopoverPrimitive.Content","mergeClasses"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { useDensity } from \"../density-provider/density-provider\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst useStyles = makeVoltStyles({\n  popup: {\n    backgroundColor: tokens.body,\n    color: tokens.grayA12,\n    transformOrigin: \"var(--radix-popover-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.border(\"1px\", \"solid\", tokens.grayA1),\n    // v1 shadow-md\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    outlineStyle: \"none\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      animationDuration: \"0.01ms\",\n      animationIterationCount: \"1\",\n      \"&[data-state='open']\": {\n        animationDuration: \"0.01ms\",\n      },\n    },\n    \"&[data-state='open']\": {\n      animationName: {\n        from: { opacity: 0, transform: \"scale(0.95)\" },\n        to: { opacity: 1, transform: \"scale(1)\" },\n      },\n      animationDuration: \"150ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    },\n    \"&[data-state='open'][data-side='bottom']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='left']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='right']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateX(-${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateX(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='open'][data-side='top']\": {\n      animationName: {\n        from: {\n          opacity: 0,\n          transform: `translateY(${tokens.spacingElement2}) scale(0.95)`,\n        },\n        to: { opacity: 1, transform: \"translateY(0) scale(1)\" },\n      },\n    },\n    \"&[data-state='closed']\": {\n      animationName: {\n        from: { opacity: 1, transform: \"scale(1)\" },\n        to: { opacity: 0, transform: \"scale(0.95)\" },\n      },\n      animationDuration: \"100ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  popupPadding: {\n    ...shorthands.padding(tokens.spacingGroup2),\n  },\n})\n\nexport type PopoverProps = React.ComponentProps<typeof PopoverPrimitive.Root>\n\nexport const Popover = React.forwardRef<HTMLElement, PopoverProps>(\n  function Popover(props, _ref) {\n    return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n  }\n)\n\nexport type PopoverTriggerProps = React.ComponentProps<\n  typeof PopoverPrimitive.Trigger\n>\n\nexport const PopoverTrigger = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Trigger>,\n  PopoverTriggerProps\n>(function PopoverTrigger({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Trigger\n      ref={ref}\n      data-slot=\"popover-trigger\"\n      {...{ [SLOT_ATTR]: \"popover-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverPortalProps = React.ComponentProps<\n  typeof PopoverPrimitive.Portal\n>\n\nexport const PopoverPortal = React.forwardRef<HTMLElement, PopoverPortalProps>(\n  function PopoverPortal(props, _ref) {\n    return (\n      <PopoverPrimitive.Portal\n        data-slot=\"popover-portal\"\n        {...{ [SLOT_ATTR]: \"popover-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type PopoverAnchorProps = React.ComponentProps<\n  typeof PopoverPrimitive.Anchor\n>\n\nexport const PopoverAnchor = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Anchor>,\n  PopoverAnchorProps\n>(function PopoverAnchor({ className, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Anchor\n      ref={ref}\n      data-slot=\"popover-anchor\"\n      {...{ [SLOT_ATTR]: \"popover-anchor\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type PopoverContentProps = React.ComponentProps<\n  typeof PopoverPrimitive.Content\n> & {\n  flush?: boolean\n}\n\nexport const PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  PopoverContentProps\n>(function PopoverContent(\n  { className, align = \"center\", sideOffset = 4, flush = false, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment.\n  const override = useDensity()\n\n  return (\n    <PopoverPrimitive.Content\n      ref={ref}\n      data-slot=\"popover-content\"\n      {...{ [SLOT_ATTR]: \"popover-content\" }}\n      {...(override !== undefined ? { \"data-density\": override } : {})}\n      align={align}\n      sideOffset={sideOffset}\n      className={mergeClasses(\n        styles.popup,\n        !flush && styles.popupPadding,\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useStyles","makeVoltStyles","tokens.body","tokens.grayA12","shorthands","tokens.radiusXl","tokens.grayA1","tokens.spacingElement2","tokens.spacingGroup2","Popover","React","props","_ref","PopoverPrimitive.Root","PopoverTrigger","className","ref","jsxDEV","PopoverPrimitive.Trigger","SLOT_ATTR","PopoverPortal","PopoverPrimitive.Portal","PopoverAnchor","PopoverPrimitive.Anchor","PopoverContent","align","sideOffset","flush","styles","override","useDensity","PopoverPrimitive.Content","mergeClasses"],"mappings":";;;;;;;;;AAUA,MAAMA,IAAYC,EAAe;AAAA,EAC/B,OAAO;AAAA,IACL,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA,IACP,iBAAiB;AAAA,IACjB,GAAGC,EAAW,aAAaC,CAAe;AAAA,IAC1C,GAAGD,EAAW,OAAO,OAAO,SAASE,CAAa;AAAA;AAAA,IAElD,WAAW;AAAA,IACX,cAAc;AAAA,IACd,2CAA2C;AAAA,MACzC,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,MACzB,wBAAwB;AAAA,QACtB,mBAAmB;AAAA,MAAA;AAAA,IACrB;AAAA,IAEF,wBAAwB;AAAA,MACtB,eAAe;AAAA,QACb,MAAM,EAAE,SAAS,GAAG,WAAW,cAAA;AAAA,QAC/B,IAAI,EAAE,SAAS,GAAG,WAAW,WAAA;AAAA,MAAW;AAAA,MAE1C,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,IAE3B,4CAA4C;AAAA,MAC1C,eAAe;AAAA,QACb,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,WAAW,eAAeC,CAAsB;AAAA,QAAA;AAAA,QAElD,IAAI,EAAE,SAAS,GAAG,WAAW,yBAAA;AAAA,MAAyB;AAAA,IACxD;AAAA,IAEF,0CAA0C;AAAA,MACxC,eAAe;AAAA,QACb,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,WAAW,cAAcA,CAAsB;AAAA,QAAA;AAAA,QAEjD,IAAI,EAAE,SAAS,GAAG,WAAW,yBAAA;AAAA,MAAyB;AAAA,IACxD;AAAA,IAEF,2CAA2C;AAAA,MACzC,eAAe;AAAA,QACb,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,WAAW,eAAeA,CAAsB;AAAA,QAAA;AAAA,QAElD,IAAI,EAAE,SAAS,GAAG,WAAW,yBAAA;AAAA,MAAyB;AAAA,IACxD;AAAA,IAEF,yCAAyC;AAAA,MACvC,eAAe;AAAA,QACb,MAAM;AAAA,UACJ,SAAS;AAAA,UACT,WAAW,cAAcA,CAAsB;AAAA,QAAA;AAAA,QAEjD,IAAI,EAAE,SAAS,GAAG,WAAW,yBAAA;AAAA,MAAyB;AAAA,IACxD;AAAA,IAEF,0BAA0B;AAAA,MACxB,eAAe;AAAA,QACb,MAAM,EAAE,SAAS,GAAG,WAAW,WAAA;AAAA,QAC/B,IAAI,EAAE,SAAS,GAAG,WAAW,cAAA;AAAA,MAAc;AAAA,MAE7C,mBAAmB;AAAA,MACnB,yBAAyB;AAAA,IAAA;AAAA,EAC3B;AAAA,EAEF,cAAc;AAAA,IACZ,GAAGH,EAAW,QAAQI,CAAoB;AAAA,EAAA;AAE9C,CAAC,GAIYC,IAAUC,EAAM;AAAA,EAC3B,SAAiBC,GAAOC,GAAM;AAC5B,oCAAQC,GAAA,EAAsB,aAAU,WAAW,GAAGF,EAAA,GAA/C,QAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAA,IAAsD;AAAA,EAC/D;AACF,GAMaG,IAAiBJ,EAAM,WAGlC,SAAwB,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AACtD,SACEC,gBAAAA,EAAAA;AAAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAAJ;AAAA,MACC,GAAGJ;AAAA,IAAA;AAAA,IALN;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAQJ,CAAC,GAMYS,IAAgBV,EAAM;AAAA,EACjC,SAAuBC,GAAOC,GAAM;AAClC,WACEK,gBAAAA,EAAAA;AAAAA,MAACI;AAAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACJ,CAACF,CAAS,GAAG;AAAA,QAClB,GAAGR;AAAA,MAAA;AAAA,MAHN;AAAA,MAAA;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAMJ;AACF,GAMaW,IAAgBZ,EAAM,WAGjC,SAAuB,EAAE,WAAAK,GAAW,GAAGJ,EAAA,GAASK,GAAK;AACrD,SACEC,gBAAAA,EAAAA;AAAAA,IAACM;AAAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MACnB,WAAAJ;AAAA,MACC,GAAGJ;AAAA,IAAA;AAAA,IALN;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAQJ,CAAC,GAQYa,IAAiBd,EAAM,WAGlC,SACA,EAAE,WAAAK,GAAW,OAAAU,IAAQ,UAAU,YAAAC,IAAa,GAAG,OAAAC,IAAQ,IAAO,GAAGhB,EAAA,GACjEK,GACA;AACA,QAAMY,IAAS5B,EAAA,GAET6B,IAAWC,EAAA;AAEjB,SACEb,gBAAAA,EAAAA;AAAAA,IAACc;AAAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,aAAU;AAAA,MACJ,CAACG,CAAS,GAAG;AAAA,MAClB,GAAIU,MAAa,SAAY,EAAE,gBAAgBA,EAAA,IAAa,CAAA;AAAA,MAC7D,OAAAJ;AAAA,MACA,YAAAC;AAAA,MACA,WAAWM;AAAAA,QACTJ,EAAO;AAAA,QACP,CAACD,KAASC,EAAO;AAAA,QACjBb;AAAA,MAAA;AAAA,MAED,GAAGJ;AAAA,IAAA;AAAA,IAZN;AAAA,IAAA;AAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA;AAAA,IAAA;AAAA,EAAA;AAeJ,CAAC;"}

package/dist/components/radio/radio.js

@@ -1,14 +1,14 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import * as c from "react";
-import { Root as h, Item as b, Indicator as x } from "../../vendor/@radix-ui/react-radio-group/dist/index.js";
-import { shorthands as t } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as s } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { j as o } from "../../vendor/react/jsx-dev-runtime.js";
+import * as l from "react";
+import { Root as g, Item as x, Indicator as b } from "../../vendor/@radix-ui/react-radio-group/dist/index.js";
+import { shorthands as i } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as n } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as p } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as C } from "../../styles/make-styles.js";
-import { errorA8 as l, accentA7 as k, semAccentContrast as m, errorA10 as w, semErrorSoft as y, grayA3 as u, semAccentSolid as R, accentA8 as v, accentA12 as A, semAccentSoft as S, spacingElement3 as I } from "../../tokens/index.js";
-const j = c.forwardRef(
-  function(o, r) {
-    return /* @__PURE__ */ e(
+import { makeVoltStyles as h } from "../../styles/make-styles.js";
+import { errorA8 as v, accentA7 as k, spacingElement3 as N, semAccentContrast as d, errorA10 as w, semFocusRing as m, semErrorSoft as C, grayA3 as u, semAccentSolid as R, semAccentOnSoft as y, semAccentSoft as j } from "../../tokens/index.js";
+const S = l.forwardRef(
+  function(e, r) {
+    return /* @__PURE__ */ o.jsxDEV(
       "svg",
       {
         ref: r,
@@ -19,15 +19,27 @@ const j = c.forwardRef(
         strokeWidth: "2",
         strokeLinecap: "round",
         strokeLinejoin: "round",
-        ...o,
-        children: /* @__PURE__ */ e("circle", { cx: "12", cy: "12", r: "10" })
-      }
+        ...e,
+        children: /* @__PURE__ */ o.jsxDEV("circle", { cx: "12", cy: "12", r: "10" }, void 0, !1, {
+          fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/radio/radio.tsx",
+          lineNumber: 23,
+          columnNumber: 9
+        }, this)
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/radio/radio.tsx",
+        lineNumber: 12,
+        columnNumber: 7
+      },
+      this
     );
   }
-), f = C({
+), f = h({
   group: {
     display: "grid",
-    ...t.gap(I)
+    ...i.gap(N)
   },
   item: {
     boxSizing: "border-box",
@@ -40,40 +52,43 @@ const j = c.forwardRef(
     height: "1rem",
     flexShrink: 0,
     borderRadius: "9999px",
-    ...t.border("1px", "solid", k),
-    backgroundColor: S,
-    color: A,
+    ...i.border("1px", "solid", k),
+    backgroundColor: j,
+    color: y,
     // Tailwind `shadow-xs` — literal per CONVENTIONS B7
     boxShadow: "0 1px 2px 0 #0000000d",
     transitionProperty: "color, box-shadow",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
     ":focus-visible": {
       outlineOffset: "2px",
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: v
+      outlineColor: m
     },
     "&[data-disabled]": {
       cursor: "not-allowed",
       backgroundColor: u,
-      ...t.borderColor("transparent")
+      ...i.borderColor("transparent")
     },
     "&[data-state='checked']": {
       backgroundColor: R,
-      color: m
+      color: d
     },
     "&[data-state='checked'][data-disabled]": {
       backgroundColor: u
     },
     "&[aria-invalid='true'], &[data-invalid]": {
-      backgroundColor: y,
-      ...t.borderColor(l),
-      outlineColor: l
+      backgroundColor: C,
+      ...i.borderColor(v),
+      outlineColor: m
     },
     "&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]": {
       backgroundColor: w,
-      ...t.borderColor("transparent")
+      ...i.borderColor("transparent")
     }
   },
   indicator: {
@@ -85,7 +100,7 @@ const j = c.forwardRef(
     height: "100%"
   },
   icon: {
-    color: m,
+    color: d,
     position: "absolute",
     top: "50%",
     left: "50%",
@@ -94,45 +109,73 @@ const j = c.forwardRef(
     transform: "translate(-50%, -50%)",
     pointerEvents: "none"
   }
-}), W = c.forwardRef(function({ className: o, ...r }, i) {
+}), T = l.forwardRef(function({ className: e, ...r }, t) {
   const a = f();
-  return /* @__PURE__ */ e(
-    h,
+  return /* @__PURE__ */ o.jsxDEV(
+    g,
     {
-      ref: i,
+      ref: t,
       "data-slot": "radio-group",
-      [s]: "radio-group",
-      className: p(a.group, o),
+      [n]: "radio-group",
+      className: p(a.group, e),
       ...r
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/radio/radio.tsx",
+      lineNumber: 116,
+      columnNumber: 5
+    },
+    this
   );
-}), B = c.forwardRef(function({ className: o, children: r, ...i }, a) {
-  const n = f();
-  return /* @__PURE__ */ g(
-    b,
+}), L = l.forwardRef(function({ className: e, children: r, ...t }, a) {
+  const s = f();
+  return /* @__PURE__ */ o.jsxDEV(
+    x,
     {
       ref: a,
       "data-slot": "radio-group-item",
-      [s]: "radio-group-item",
-      className: p(n.item, o),
-      ...i,
+      [n]: "radio-group-item",
+      className: p(s.item, e),
+      ...t,
       children: [
-        /* @__PURE__ */ e(
-          x,
+        /* @__PURE__ */ o.jsxDEV(
+          b,
           {
             "data-slot": "radio-group-indicator",
-            [s]: "radio-group-indicator",
-            className: n.indicator,
-            children: /* @__PURE__ */ e(j, { className: n.icon })
-          }
+            [n]: "radio-group-indicator",
+            className: s.indicator,
+            children: /* @__PURE__ */ o.jsxDEV(S, { className: s.icon }, void 0, !1, {
+              fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/radio/radio.tsx",
+              lineNumber: 149,
+              columnNumber: 9
+            }, this)
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/radio/radio.tsx",
+            lineNumber: 144,
+            columnNumber: 7
+          },
+          this
         ),
         r
       ]
-    }
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/radio/radio.tsx",
+      lineNumber: 137,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
-  W as RadioGroup,
-  B as RadioGroupItem
+  T as RadioGroup,
+  L as RadioGroupItem
 };
 //# sourceMappingURL=radio.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeVoltStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.accentA12,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.semErrorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]\":\n      {\n        backgroundColor: tokens.errorA10,\n        ...shorthands.borderColor(\"transparent\"),\n      },\n  },\n  indicator: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    color: tokens.semAccentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\nexport type RadioGroupProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n>\n\nexport const RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(function RadioGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"radio-group\"\n      {...{ [SLOT_ATTR]: \"radio-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type RadioGroupItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n>\n\nexport const RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(function RadioGroupItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </RadioGroupPrimitive.Indicator>\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsx","useStyles","makeVoltStyles","shorthands","tokens.spacingElement3","tokens.accentA7","tokens.semAccentSoft","tokens.accentA12","tokens.accentA8","tokens.grayA3","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semErrorSoft","tokens.errorA8","tokens.errorA10","RadioGroup","className","styles","RadioGroupPrimitive.Root","SLOT_ATTR","mergeClasses","RadioGroupItem","children","jsxs","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"mappings":";;;;;;;;AAQA,MAAMA,IAAaC,EAAM;AAAA,EACvB,SAAoBC,GAAOC,GAAK;AAC9B,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,QAAO;AAAA,QACP,aAAY;AAAA,QACZ,eAAc;AAAA,QACd,gBAAe;AAAA,QACd,GAAGD;AAAA,QAEJ,4BAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrC;AACF,GAEMG,IAAYC,EAAe;AAAA,EAC/B,OAAO;AAAA,IACL,SAAS;AAAA,IACT,GAAGC,EAAW,IAAIC,CAAsB;AAAA,EAAA;AAAA,EAE1C,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,GAAGD,EAAW,OAAO,OAAO,SAASE,CAAe;AAAA,IACpD,iBAAiBC;AAAAA,IACjB,OAAOC;AAAAA;AAAAA,IAEP,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,kBAAkB;AAAA,MAChB,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,cAAcC;AAAAA,IAAO;AAAA,IAEvB,oBAAoB;AAAA,MAClB,QAAQ;AAAA,MACR,iBAAiBC;AAAAA,MACjB,GAAGN,EAAW,YAAY,aAAa;AAAA,IAAA;AAAA,IAEzC,2BAA2B;AAAA,MACzB,iBAAiBO;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,0CAA0C;AAAA,MACxC,iBAAiBF;AAAAA,IAAO;AAAA,IAE1B,2CAA2C;AAAA,MACzC,iBAAiBG;AAAAA,MACjB,GAAGT,EAAW,YAAYU,CAAc;AAAA,MACxC,cAAcA;AAAAA,IAAO;AAAA,IAEvB,uFACE;AAAA,MACE,iBAAiBC;AAAAA,MACjB,GAAGX,EAAW,YAAY,aAAa;AAAA,IAAA;AAAA,EACzC;AAAA,EAEJ,WAAW;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAOQ;AAAAA,IACP,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,eAAe;AAAA,EAAA;AAEnB,CAAC,GAMYI,IAAalB,EAAM,WAG9B,SAAoB,EAAE,WAAAmB,GAAW,GAAGlB,EAAA,GAASC,GAAK;AAClD,QAAMkB,IAAShB,EAAA;AAEf,SACE,gBAAAD;AAAA,IAACkB;AAAAA,IAAA;AAAA,MACC,KAAAnB;AAAA,MACA,aAAU;AAAA,MACJ,CAACoB,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,OAAOD,CAAS;AAAA,MAC9C,GAAGlB;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC,GAMYuB,IAAiBxB,EAAM,WAGlC,SAAwB,EAAE,WAAAmB,GAAW,UAAAM,GAAU,GAAGxB,EAAA,GAASC,GAAK;AAChE,QAAMkB,IAAShB,EAAA;AAEf,SACE,gBAAAsB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAzB;AAAA,MACA,aAAU;AAAA,MACJ,CAACoB,CAAS,GAAG;AAAA,MACnB,WAAWC,EAAaH,EAAO,MAAMD,CAAS;AAAA,MAC7C,GAAGlB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAE;AAAA,UAACyB;AAAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACJ,CAACN,CAAS,GAAG;AAAA,YACnB,WAAWF,EAAO;AAAA,YAElB,UAAA,gBAAAjB,EAACJ,GAAA,EAAW,WAAWqB,EAAO,KAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAErCK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { mergeClasses, shorthands } from \"@epilot/volt-ui-runtime\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeVoltStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nconst CircleIcon = React.forwardRef<SVGSVGElement, React.ComponentProps<\"svg\">>(\n  function CircleIcon(props, ref) {\n    return (\n      <svg\n        ref={ref}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        {...props}\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"10\" />\n      </svg>\n    )\n  }\n)\n\nconst useStyles = makeVoltStyles({\n  group: {\n    display: \"grid\",\n    ...shorthands.gap(tokens.spacingElement3),\n  },\n  item: {\n    boxSizing: \"border-box\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    position: \"relative\",\n    aspectRatio: \"1 / 1\",\n    width: \"1rem\",\n    height: \"1rem\",\n    flexShrink: 0,\n    borderRadius: \"9999px\",\n    ...shorthands.border(\"1px\", \"solid\", tokens.accentA7),\n    backgroundColor: tokens.semAccentSoft,\n    color: tokens.semAccentOnSoft,\n    // Tailwind `shadow-xs` — literal per CONVENTIONS B7\n    boxShadow: \"0 1px 2px 0 #0000000d\",\n    transitionProperty: \"color, box-shadow\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    \"@media (prefers-reduced-motion: reduce)\": {\n      transitionDuration: \"0.01ms\",\n    },\n    \":focus-visible\": {\n      outlineOffset: \"2px\",\n      outlineWidth: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-disabled]\": {\n      cursor: \"not-allowed\",\n      backgroundColor: tokens.grayA3,\n      ...shorthands.borderColor(\"transparent\"),\n    },\n    \"&[data-state='checked']\": {\n      backgroundColor: tokens.semAccentSolid,\n      color: tokens.semAccentContrast,\n    },\n    \"&[data-state='checked'][data-disabled]\": {\n      backgroundColor: tokens.grayA3,\n    },\n    \"&[aria-invalid='true'], &[data-invalid]\": {\n      backgroundColor: tokens.semErrorSoft,\n      ...shorthands.borderColor(tokens.errorA8),\n      outlineColor: tokens.semFocusRing,\n    },\n    \"&[data-state='checked'][aria-invalid='true'], &[data-state='checked'][data-invalid]\":\n      {\n        backgroundColor: tokens.errorA10,\n        ...shorthands.borderColor(\"transparent\"),\n      },\n  },\n  indicator: {\n    position: \"relative\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n  icon: {\n    color: tokens.semAccentContrast,\n    position: \"absolute\",\n    top: \"50%\",\n    left: \"50%\",\n    width: \"0.5rem\",\n    height: \"0.5rem\",\n    transform: \"translate(-50%, -50%)\",\n    pointerEvents: \"none\",\n  },\n})\n\nexport type RadioGroupProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Root\n>\n\nexport const RadioGroup = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(function RadioGroup({ className, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Root\n      ref={ref}\n      data-slot=\"radio-group\"\n      {...{ [SLOT_ATTR]: \"radio-group\" }}\n      className={mergeClasses(styles.group, className)}\n      {...props}\n    />\n  )\n})\n\nexport type RadioGroupItemProps = React.ComponentProps<\n  typeof RadioGroupPrimitive.Item\n>\n\nexport const RadioGroupItem = React.forwardRef<\n  React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(function RadioGroupItem({ className, children, ...props }, ref) {\n  const styles = useStyles()\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      data-slot=\"radio-group-item\"\n      {...{ [SLOT_ATTR]: \"radio-group-item\" }}\n      className={mergeClasses(styles.item, className)}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        {...{ [SLOT_ATTR]: \"radio-group-indicator\" }}\n        className={styles.indicator}\n      >\n        <CircleIcon className={styles.icon} />\n      </RadioGroupPrimitive.Indicator>\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\n"],"names":["CircleIcon","React","props","ref","jsxDEV","useStyles","makeVoltStyles","shorthands","tokens.spacingElement3","tokens.accentA7","tokens.semAccentSoft","tokens.semAccentOnSoft","tokens.semFocusRing","tokens.grayA3","tokens.semAccentSolid","tokens.semAccentContrast","tokens.semErrorSoft","tokens.errorA8","tokens.errorA10","RadioGroup","className","styles","RadioGroupPrimitive.Root","SLOT_ATTR","mergeClasses","RadioGroupItem","children","RadioGroupPrimitive.Item","RadioGroupPrimitive.Indicator"],"mappings":"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"}