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

package/dist/components/toggle/toggle.js

@@ -1,29 +1,33 @@
-import { jsx as s } from "react/jsx-runtime";
+import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
 import * as l from "react";
-import { Root as d } from "../../vendor/@radix-ui/react-toggle/dist/index.js";
-import { shorthands as o } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
-import { SLOT_ATTR as m } from "../../packages/volt-runtime/dist/renderer/contract.js";
+import { Root as m } from "../../vendor/@radix-ui/react-toggle/dist/index.js";
+import { shorthands as e } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/index.js";
+import { SLOT_ATTR as d } from "../../packages/volt-runtime/dist/renderer/contract.js";
 import { mergeClasses as g } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
 import { makeVoltStyles as c } from "../../styles/make-styles.js";
-import { radius2xl as u, spacingElement2 as h, radiusXl as f, radiusLg as p, spacingElement1 as b, errorA4 as v, errorA3 as C, errorA8 as k, semErrorSoft as y, semErrorLight as S, accentA4 as A, accentA3 as x, accentA8 as R, semAccentSoft as T, semAccentLight as W, fontWeightSemibold as E } from "../../tokens/index.js";
-const w = c({
+import { radius2xl as u, spacingElement2 as h, radiusXl as f, radiusLg as p, spacingElement1 as b, errorA4 as v, semErrorOnSoft as k, errorA3 as x, semErrorSoft as C, semErrorLight as S, accentA4 as y, semAccentOnSoft as E, accentA3 as R, semAccentSoft as A, semAccentLight as T, semFocusRing as W, fontWeightSemibold as w } from "../../tokens/index.js";
+const j = c({
   root: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    ...o.gap(b),
+    ...e.gap(b),
     flexShrink: 0,
     cursor: "pointer",
-    fontWeight: E,
+    fontWeight: w,
     transitionProperty: "all",
     transitionDuration: "150ms",
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-    ...o.borderStyle("none"),
-    ...o.borderWidth(0),
+    "@media (prefers-reduced-motion: reduce)": {
+      transitionDuration: "0.01ms"
+    },
+    ...e.borderStyle("none"),
+    ...e.borderWidth(0),
     ":focus-visible": {
       outlineWidth: "2px",
       outlineOffset: "2px",
-      outlineStyle: "solid"
+      outlineStyle: "solid",
+      outlineColor: W
     },
     ":disabled, &[data-disabled]": {
       pointerEvents: "none",
@@ -38,31 +42,27 @@ const w = c({
   // Variants
   default: {
     backgroundColor: "transparent",
-    color: W,
+    color: T,
     ":hover": {
-      backgroundColor: T
-    },
-    ":focus-visible": {
-      outlineColor: R
+      backgroundColor: A
     },
     "&[data-state='on']": {
-      backgroundColor: x
+      backgroundColor: R,
+      color: E
     },
     "&[data-state='on']:hover": {
-      backgroundColor: A
+      backgroundColor: y
     }
   },
   destructive: {
     backgroundColor: "transparent",
     color: S,
     ":hover": {
-      backgroundColor: y
-    },
-    ":focus-visible": {
-      outlineColor: k
+      backgroundColor: C
     },
     "&[data-state='on']": {
-      backgroundColor: C
+      backgroundColor: x,
+      color: k
     },
     "&[data-state='on']:hover": {
       backgroundColor: v
@@ -72,8 +72,8 @@ const w = c({
   sm: {
     height: "1.5rem",
     minWidth: "1.5rem",
-    ...o.borderRadius(p),
-    ...o.paddingInline("0.375rem"),
+    ...e.borderRadius(p),
+    ...e.paddingInline("0.375rem"),
     "& svg": {
       width: "0.875rem",
       height: "0.875rem"
@@ -82,8 +82,8 @@ const w = c({
   base: {
     height: "2rem",
     minWidth: "2rem",
-    ...o.borderRadius(f),
-    ...o.paddingInline(h),
+    ...e.borderRadius(f),
+    ...e.paddingInline(h),
     "& svg": {
       width: "1rem",
       height: "1rem"
@@ -92,33 +92,41 @@ const w = c({
   lg: {
     height: "2.5rem",
     minWidth: "2.5rem",
-    ...o.borderRadius(u),
-    ...o.paddingInline("0.625rem"),
+    ...e.borderRadius(u),
+    ...e.paddingInline("0.625rem"),
     "& svg": {
       width: "1.25rem",
       height: "1.25rem"
     }
   }
-}), P = l.forwardRef(function({ className: r, variant: t = "default", size: i = "base", ...n }, a) {
-  const e = w();
-  return /* @__PURE__ */ s(
-    d,
+}), P = l.forwardRef(function({ className: r, variant: t = "default", size: i = "base", ...n }, s) {
+  const o = j();
+  return /* @__PURE__ */ a.jsxDEV(
+    m,
     {
-      ref: a,
+      ref: s,
       "data-slot": "toggle",
-      [m]: "toggle",
+      [d]: "toggle",
       className: g(
-        e.root,
-        e[t],
-        e[i],
+        o.root,
+        o[t],
+        o[i],
         r
       ),
       ...n
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/toggle/toggle.tsx",
+      lineNumber: 122,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {
   P as Toggle,
-  w as useToggleStyles
+  j as useToggleStyles
 };
 //# sourceMappingURL=toggle.js.map

package/dist/components/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\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\nexport type ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.semAccentLight,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.accentA8,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentA3,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.semErrorLight,\n    \":hover\": {\n      backgroundColor: tokens.semErrorSoft,\n    },\n    \":focus-visible\": {\n      outlineColor: tokens.errorA8,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.errorA3,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\nexport type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {\n  variant?: ToggleVariant\n  size?: ToggleSize\n}\n\nexport const Toggle = React.forwardRef<\n  React.ComponentRef<typeof TogglePrimitive.Root>,\n  ToggleProps\n>(function Toggle(\n  { className, variant = \"default\", size = \"base\", ...props },\n  ref\n) {\n  const styles = useToggleStyles()\n\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      data-slot=\"toggle\"\n      {...{ [SLOT_ATTR]: \"toggle\" }}\n      className={mergeClasses(\n        styles.root,\n        styles[variant],\n        styles[size],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useToggleStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semAccentLight","tokens.semAccentSoft","tokens.accentA8","tokens.accentA3","tokens.accentA4","tokens.semErrorLight","tokens.semErrorSoft","tokens.errorA8","tokens.errorA3","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","Toggle","React","className","variant","size","props","ref","styles","jsx","TogglePrimitive.Root","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;;;AAWO,MAAMA,IAAkBC,EAAe;AAAA,EAC5C,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,GAAGC,EAAW,IAAIC,CAAsB;AAAA,IACxC,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,YAAYC;AAAAA,IACZ,oBAAoB;AAAA,IACpB,oBAAoB;AAAA,IACpB,0BAA0B;AAAA,IAC1B,GAAGF,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,IAAA;AAAA,IAEhB,+BAA+B;AAAA,MAC7B,eAAe;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAAA;AAAA,EAGF,SAAS;AAAA,IACP,iBAAiB;AAAA,IACjB,OAAOG;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA,EAEF,aAAa;AAAA,IACX,iBAAiB;AAAA,IACjB,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,kBAAkB;AAAA,MAChB,cAAcC;AAAAA,IAAO;AAAA,IAEvB,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGZ,EAAW,aAAaa,CAAe;AAAA,IAC1C,GAAGb,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGA,EAAW,aAAac,CAAe;AAAA,IAC1C,GAAGd,EAAW,cAAce,CAAsB;AAAA,IAClD,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGf,EAAW,aAAagB,CAAgB;AAAA,IAC3C,GAAGhB,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,GAOYiB,IAASC,EAAM,WAG1B,SACA,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS1B,EAAA;AAEf,SACE,gBAAA2B;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAAA,QACTJ,EAAO;AAAA,QACPA,EAAOJ,CAAO;AAAA,QACdI,EAAOH,CAAI;AAAA,QACXF;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\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\nexport type ToggleVariant = \"default\" | \"destructive\"\nexport type ToggleSize = \"sm\" | \"base\" | \"lg\"\n\nexport const useToggleStyles = makeVoltStyles({\n  root: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    ...shorthands.gap(tokens.spacingElement1),\n    flexShrink: 0,\n    cursor: \"pointer\",\n    fontWeight: tokens.fontWeightSemibold,\n    transitionProperty: \"all\",\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    ...shorthands.borderStyle(\"none\"),\n    ...shorthands.borderWidth(0),\n    \":focus-visible\": {\n      outlineWidth: \"2px\",\n      outlineOffset: \"2px\",\n      outlineStyle: \"solid\",\n      outlineColor: tokens.semFocusRing,\n    },\n    \":disabled, &[data-disabled]\": {\n      pointerEvents: \"none\",\n      opacity: 0.5,\n    },\n    \"& svg\": {\n      flexShrink: 0,\n      pointerEvents: \"none\",\n      color: \"currentColor\",\n    },\n  },\n  // Variants\n  default: {\n    backgroundColor: \"transparent\",\n    color: tokens.semAccentLight,\n    \":hover\": {\n      backgroundColor: tokens.semAccentSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentA3,\n      color: tokens.semAccentOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.semErrorLight,\n    \":hover\": {\n      backgroundColor: tokens.semErrorSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.errorA3,\n      color: tokens.semErrorOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.errorA4,\n    },\n  },\n  // Sizes\n  sm: {\n    height: \"1.5rem\",\n    minWidth: \"1.5rem\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.paddingInline(\"0.375rem\"),\n    \"& svg\": {\n      width: \"0.875rem\",\n      height: \"0.875rem\",\n    },\n  },\n  base: {\n    height: \"2rem\",\n    minWidth: \"2rem\",\n    ...shorthands.borderRadius(tokens.radiusXl),\n    ...shorthands.paddingInline(tokens.spacingElement2),\n    \"& svg\": {\n      width: \"1rem\",\n      height: \"1rem\",\n    },\n  },\n  lg: {\n    height: \"2.5rem\",\n    minWidth: \"2.5rem\",\n    ...shorthands.borderRadius(tokens.radius2xl),\n    ...shorthands.paddingInline(\"0.625rem\"),\n    \"& svg\": {\n      width: \"1.25rem\",\n      height: \"1.25rem\",\n    },\n  },\n})\n\nexport type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & {\n  variant?: ToggleVariant\n  size?: ToggleSize\n}\n\nexport const Toggle = React.forwardRef<\n  React.ComponentRef<typeof TogglePrimitive.Root>,\n  ToggleProps\n>(function Toggle(\n  { className, variant = \"default\", size = \"base\", ...props },\n  ref\n) {\n  const styles = useToggleStyles()\n\n  return (\n    <TogglePrimitive.Root\n      ref={ref}\n      data-slot=\"toggle\"\n      {...{ [SLOT_ATTR]: \"toggle\" }}\n      className={mergeClasses(\n        styles.root,\n        styles[variant],\n        styles[size],\n        className\n      )}\n      {...props}\n    />\n  )\n})\n"],"names":["useToggleStyles","makeVoltStyles","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.semFocusRing","tokens.semAccentLight","tokens.semAccentSoft","tokens.accentA3","tokens.semAccentOnSoft","tokens.accentA4","tokens.semErrorLight","tokens.semErrorSoft","tokens.errorA3","tokens.semErrorOnSoft","tokens.errorA4","tokens.radiusLg","tokens.radiusXl","tokens.spacingElement2","tokens.radius2xl","Toggle","React","className","variant","size","props","ref","styles","jsxDEV","TogglePrimitive.Root","SLOT_ATTR","mergeClasses"],"mappings":"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"}

package/dist/components/tooltip/tooltip.js

@@ -1,31 +1,32 @@
-import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { j as a } from "../../vendor/react/jsx-dev-runtime.js";
 import * as e from "react";
-import { Root as y, Content as T, Arrow as x, Portal as w, Provider as b, Trigger as v } from "../../vendor/@radix-ui/react-tooltip/dist/index.js";
-import { shorthands as l } 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 R } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
-import { makeVoltStyles as h } from "../../styles/make-styles.js";
-import { spacingElement2 as C, radiusLg as N, error12 as c, gray12 as p, spacingElement1 as n, error1 as P, errorA12 as k, gray1 as z, textXs as S } from "../../tokens/index.js";
-const X = h({
+import { Root as x, Content as v, Arrow as N, Portal as b, Provider as w, Trigger as y } from "../../vendor/@radix-ui/react-tooltip/dist/index.js";
+import { shorthands as s } 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 T } from "../../packages/volt-runtime/dist/vendor/@griffel/core/src/mergeClasses.js";
+import { useDensity as h } from "../density-provider/density-provider.js";
+import { makeVoltStyles as R } from "../../styles/make-styles.js";
+import { spacingElement2 as k, radiusLg as D, error12 as f, gray12 as m, spacingElement1 as l, error1 as C, errorA12 as E, gray1 as j, textXs as V } from "../../tokens/index.js";
+const P = R({
   popup: {
     width: "fit-content",
     transformOrigin: "var(--radix-tooltip-content-transform-origin)",
-    ...l.borderRadius(N),
-    ...l.padding(C),
+    ...s.borderRadius(D),
+    ...s.padding(k),
     // v1 shadow-md; elevation has no token in this package.
     boxShadow: "0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a",
-    fontSize: S,
+    fontSize: V,
     // v1 leading-none; no line-height token exists.
     lineHeight: "1",
     textWrap: "balance",
     zIndex: 50,
     "&[data-variant='default']": {
-      backgroundColor: p,
-      color: z
+      backgroundColor: m,
+      color: j
     },
     "&[data-variant='destructive']": {
-      backgroundColor: k,
-      color: P
+      backgroundColor: E,
+      color: C
     },
     "&[data-state='open']": {
       animationName: {
@@ -39,7 +40,7 @@ const X = h({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(-${n}) scale(0.95)`
+          transform: `translateY(-${l}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -48,7 +49,7 @@ const X = h({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(${n}) scale(0.95)`
+          transform: `translateX(${l}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -57,7 +58,7 @@ const X = h({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateX(-${n}) scale(0.95)`
+          transform: `translateX(-${l}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateX(0) scale(1)" }
       }
@@ -66,7 +67,7 @@ const X = h({
       animationName: {
         from: {
           opacity: 0,
-          transform: `translateY(${n}) scale(0.95)`
+          transform: `translateY(${l}) scale(0.95)`
         },
         to: { opacity: 1, transform: "translateY(0) scale(1)" }
       }
@@ -86,75 +87,120 @@ const X = h({
     width: "0.625rem",
     height: "0.625rem",
     transform: "translateY(calc(-50% - 2px)) rotate(45deg)",
-    ...l.borderRadius("2px"),
+    ...s.borderRadius("2px"),
     "&[data-variant='default']": {
-      backgroundColor: p,
-      fill: p
+      backgroundColor: m,
+      fill: m
     },
     "&[data-variant='destructive']": {
-      backgroundColor: c,
-      fill: c
+      backgroundColor: f,
+      fill: f
     }
   }
-}), F = e.forwardRef(function({ delayDuration: t = 0, ...o }, a) {
-  return /* @__PURE__ */ r(
-    b,
+}), F = e.forwardRef(function({ delayDuration: t = 0, ...o }, r) {
+  return /* @__PURE__ */ a.jsxDEV(
+    w,
     {
       delayDuration: t,
       "data-slot": "tooltip-provider",
       ...o
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
+      lineNumber: 112,
+      columnNumber: 5
+    },
+    this
   );
 }), I = e.forwardRef(
   function(t, o) {
-    return /* @__PURE__ */ r(y, { "data-slot": "tooltip", ...t });
+    return /* @__PURE__ */ a.jsxDEV(x, { "data-slot": "tooltip", ...t }, void 0, !1, {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
+      lineNumber: 124,
+      columnNumber: 12
+    }, this);
   }
-), L = e.forwardRef(function({ className: t, ...o }, a) {
-  return /* @__PURE__ */ r(
-    v,
+), L = e.forwardRef(function({ className: t, ...o }, r) {
+  return /* @__PURE__ */ a.jsxDEV(
+    y,
     {
-      ref: a,
+      ref: r,
       "data-slot": "tooltip-trigger",
-      [s]: "tooltip-trigger",
+      [n]: "tooltip-trigger",
       className: t,
       ...o
-    }
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
+      lineNumber: 137,
+      columnNumber: 5
+    },
+    this
   );
 }), O = e.forwardRef(
   function(t, o) {
-    return /* @__PURE__ */ r(
-      w,
+    return /* @__PURE__ */ a.jsxDEV(
+      b,
       {
         "data-slot": "tooltip-portal",
-        [s]: "tooltip-portal",
+        [n]: "tooltip-portal",
         ...t
-      }
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
+        lineNumber: 154,
+        columnNumber: 7
+      },
+      this
     );
   }
-), H = e.forwardRef(function({ className: t, hideArrow: o = !1, variant: a = "default", children: d, ...f }, u) {
-  const m = X();
-  return /* @__PURE__ */ g(
-    T,
+), H = e.forwardRef(function({ className: t, hideArrow: o = !1, variant: r = "default", children: d, ...u }, g) {
+  const p = P(), c = h();
+  return /* @__PURE__ */ a.jsxDEV(
+    v,
     {
-      ref: u,
+      ref: g,
       "data-slot": "tooltip-content",
-      [s]: "tooltip-content",
-      "data-variant": a,
-      className: R(m.popup, t),
-      ...f,
+      [n]: "tooltip-content",
+      ...c !== void 0 ? { "data-density": c } : {},
+      "data-variant": r,
+      className: T(p.popup, t),
+      ...u,
       children: [
         d,
-        !o && /* @__PURE__ */ r(
-          x,
+        !o && /* @__PURE__ */ a.jsxDEV(
+          N,
           {
             "data-slot": "tooltip-arrow",
-            [s]: "tooltip-arrow",
-            "data-variant": a,
-            className: m.arrow
-          }
+            [n]: "tooltip-arrow",
+            "data-variant": r,
+            className: p.arrow
+          },
+          void 0,
+          !1,
+          {
+            fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
+            lineNumber: 195,
+            columnNumber: 9
+          },
+          this
         )
       ]
-    }
+    },
+    void 0,
+    !0,
+    {
+      fileName: "/Users/wilianmolinari/repos/volt-ui-rollout/release/packages/experimental-griffel/src/components/tooltip/tooltip.tsx",
+      lineNumber: 184,
+      columnNumber: 5
+    },
+    this
   );
 });
 export {

package/dist/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\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    width: \"fit-content\",\n    transformOrigin: \"var(--radix-tooltip-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.padding(tokens.spacingElement2),\n    // v1 shadow-md; elevation has no token in this package.\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    fontSize: tokens.textXs,\n    // v1 leading-none; no line-height token exists.\n    lineHeight: \"1\",\n    textWrap: \"balance\",\n    zIndex: 50,\n    \"&[data-variant='default']\": {\n      backgroundColor: tokens.gray12,\n      color: tokens.gray1,\n    },\n    \"&[data-variant='destructive']\": {\n      backgroundColor: tokens.errorA12,\n      color: tokens.error1,\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.spacingElement1}) 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.spacingElement1}) 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.spacingElement1}) 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.spacingElement1}) 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: \"0ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  arrow: {\n    position: \"relative\",\n    zIndex: 50,\n    width: \"0.625rem\",\n    height: \"0.625rem\",\n    transform: \"translateY(calc(-50% - 2px)) rotate(45deg)\",\n    ...shorthands.borderRadius(\"2px\"),\n    \"&[data-variant='default']\": {\n      backgroundColor: tokens.gray12,\n      fill: tokens.gray12,\n    },\n    \"&[data-variant='destructive']\": {\n      backgroundColor: tokens.error12,\n      fill: tokens.error12,\n    },\n  },\n})\n\nexport type TooltipProviderProps = React.ComponentProps<\n  typeof TooltipPrimitive.Provider\n>\n\nexport const TooltipProvider = React.forwardRef<\n  HTMLElement,\n  TooltipProviderProps\n>(function TooltipProvider({ delayDuration = 0, ...props }, _ref) {\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={delayDuration}\n      data-slot=\"tooltip-provider\"\n      {...props}\n    />\n  )\n})\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nexport const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(\n  function Tooltip(props, _ref) {\n    return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n  }\n)\n\nexport type TooltipTriggerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Trigger\n>\n\nexport const TooltipTrigger = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Trigger>,\n  TooltipTriggerProps\n>(function TooltipTrigger({ className, ...props }, ref) {\n  return (\n    <TooltipPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tooltip-trigger\"\n      {...{ [SLOT_ATTR]: \"tooltip-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type TooltipPortalProps = React.ComponentProps<\n  typeof TooltipPrimitive.Portal\n>\n\nexport const TooltipPortal = React.forwardRef<HTMLElement, TooltipPortalProps>(\n  function TooltipPortal(props, _ref) {\n    return (\n      <TooltipPrimitive.Portal\n        data-slot=\"tooltip-portal\"\n        {...{ [SLOT_ATTR]: \"tooltip-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type TooltipContentProps = React.ComponentProps<\n  typeof TooltipPrimitive.Content\n> & {\n  hideArrow?: boolean\n  variant?: \"default\" | \"destructive\"\n}\n\nexport const TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(function TooltipContent(\n  { className, hideArrow = false, variant = \"default\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n\n  return (\n    <TooltipPrimitive.Content\n      ref={ref}\n      data-slot=\"tooltip-content\"\n      {...{ [SLOT_ATTR]: \"tooltip-content\" }}\n      data-variant={variant}\n      className={mergeClasses(styles.popup, className)}\n      {...props}\n    >\n      {children}\n      {!hideArrow && (\n        <TooltipPrimitive.Arrow\n          data-slot=\"tooltip-arrow\"\n          {...{ [SLOT_ATTR]: \"tooltip-arrow\" }}\n          data-variant={variant}\n          className={styles.arrow}\n        />\n      )}\n    </TooltipPrimitive.Content>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.radiusLg","tokens.spacingElement2","tokens.textXs","tokens.gray12","tokens.gray1","tokens.errorA12","tokens.error1","tokens.spacingElement1","tokens.error12","TooltipProvider","React","delayDuration","props","_ref","jsx","TooltipPrimitive.Provider","Tooltip","TooltipPrimitive.Root","TooltipTrigger","className","ref","TooltipPrimitive.Trigger","SLOT_ATTR","TooltipPortal","TooltipPrimitive.Portal","TooltipContent","hideArrow","variant","children","styles","jsxs","TooltipPrimitive.Content","mergeClasses","TooltipPrimitive.Arrow"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\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    width: \"fit-content\",\n    transformOrigin: \"var(--radix-tooltip-content-transform-origin)\",\n    ...shorthands.borderRadius(tokens.radiusLg),\n    ...shorthands.padding(tokens.spacingElement2),\n    // v1 shadow-md; elevation has no token in this package.\n    boxShadow: \"0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a\",\n    fontSize: tokens.textXs,\n    // v1 leading-none; no line-height token exists.\n    lineHeight: \"1\",\n    textWrap: \"balance\",\n    zIndex: 50,\n    \"&[data-variant='default']\": {\n      backgroundColor: tokens.gray12,\n      color: tokens.gray1,\n    },\n    \"&[data-variant='destructive']\": {\n      backgroundColor: tokens.errorA12,\n      color: tokens.error1,\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.spacingElement1}) 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.spacingElement1}) 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.spacingElement1}) 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.spacingElement1}) 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: \"0ms\",\n      animationTimingFunction: \"cubic-bezier(0.4, 0, 1, 1)\",\n    },\n  },\n  arrow: {\n    position: \"relative\",\n    zIndex: 50,\n    width: \"0.625rem\",\n    height: \"0.625rem\",\n    transform: \"translateY(calc(-50% - 2px)) rotate(45deg)\",\n    ...shorthands.borderRadius(\"2px\"),\n    \"&[data-variant='default']\": {\n      backgroundColor: tokens.gray12,\n      fill: tokens.gray12,\n    },\n    \"&[data-variant='destructive']\": {\n      backgroundColor: tokens.error12,\n      fill: tokens.error12,\n    },\n  },\n})\n\nexport type TooltipProviderProps = React.ComponentProps<\n  typeof TooltipPrimitive.Provider\n>\n\nexport const TooltipProvider = React.forwardRef<\n  HTMLElement,\n  TooltipProviderProps\n>(function TooltipProvider({ delayDuration = 0, ...props }, _ref) {\n  return (\n    <TooltipPrimitive.Provider\n      delayDuration={delayDuration}\n      data-slot=\"tooltip-provider\"\n      {...props}\n    />\n  )\n})\n\nexport type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nexport const Tooltip = React.forwardRef<HTMLElement, TooltipProps>(\n  function Tooltip(props, _ref) {\n    return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n  }\n)\n\nexport type TooltipTriggerProps = React.ComponentProps<\n  typeof TooltipPrimitive.Trigger\n>\n\nexport const TooltipTrigger = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Trigger>,\n  TooltipTriggerProps\n>(function TooltipTrigger({ className, ...props }, ref) {\n  return (\n    <TooltipPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tooltip-trigger\"\n      {...{ [SLOT_ATTR]: \"tooltip-trigger\" }}\n      className={className}\n      {...props}\n    />\n  )\n})\n\nexport type TooltipPortalProps = React.ComponentProps<\n  typeof TooltipPrimitive.Portal\n>\n\nexport const TooltipPortal = React.forwardRef<HTMLElement, TooltipPortalProps>(\n  function TooltipPortal(props, _ref) {\n    return (\n      <TooltipPrimitive.Portal\n        data-slot=\"tooltip-portal\"\n        {...{ [SLOT_ATTR]: \"tooltip-portal\" }}\n        {...props}\n      />\n    )\n  }\n)\n\nexport type TooltipContentProps = React.ComponentProps<\n  typeof TooltipPrimitive.Content\n> & {\n  hideArrow?: boolean\n  variant?: \"default\" | \"destructive\"\n}\n\nexport const TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  TooltipContentProps\n>(function TooltipContent(\n  { className, hideArrow = false, variant = \"default\", children, ...props },\n  ref\n) {\n  const styles = useStyles()\n  // DENSITY-SPEC.md §4.4 — portal content boundary; see dialog.tsx's identical comment. Tooltip\n  // content rarely nests density-consuming children, but the mechanism is applied uniformly across\n  // every portal-content component rather than special-cased per component.\n  const override = useDensity()\n\n  return (\n    <TooltipPrimitive.Content\n      ref={ref}\n      data-slot=\"tooltip-content\"\n      {...{ [SLOT_ATTR]: \"tooltip-content\" }}\n      {...(override !== undefined ? { \"data-density\": override } : {})}\n      data-variant={variant}\n      className={mergeClasses(styles.popup, className)}\n      {...props}\n    >\n      {children}\n      {!hideArrow && (\n        <TooltipPrimitive.Arrow\n          data-slot=\"tooltip-arrow\"\n          {...{ [SLOT_ATTR]: \"tooltip-arrow\" }}\n          data-variant={variant}\n          className={styles.arrow}\n        />\n      )}\n    </TooltipPrimitive.Content>\n  )\n})\n"],"names":["useStyles","makeVoltStyles","shorthands","tokens.radiusLg","tokens.spacingElement2","tokens.textXs","tokens.gray12","tokens.gray1","tokens.errorA12","tokens.error1","tokens.spacingElement1","tokens.error12","TooltipProvider","React","delayDuration","props","_ref","jsxDEV","TooltipPrimitive.Provider","Tooltip","TooltipPrimitive.Root","TooltipTrigger","className","ref","TooltipPrimitive.Trigger","SLOT_ATTR","TooltipPortal","TooltipPrimitive.Portal","TooltipContent","hideArrow","variant","children","styles","override","useDensity","TooltipPrimitive.Content","mergeClasses","TooltipPrimitive.Arrow"],"mappings":"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"}