@epilot/zenith-react 0.1.0-next.1 → 0.1.0

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/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } 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 = makeZenithStyles({\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","makeZenithStyles","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","jsx","TogglePrimitive.Root","SLOT_ATTR","mergeClasses"],"mappings":";;;;;;AAWO,MAAMA,IAAkBC,EAAiB;AAAA,EAC9C,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,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAGF,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAcG;AAAAA,IAAO;AAAA,IAEvB,+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,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,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,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGb,EAAW,aAAac,CAAe;AAAA,IAC1C,GAAGd,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,aAAae,CAAe;AAAA,IAC1C,GAAGf,EAAW,cAAcgB,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,GAAGhB,EAAW,aAAaiB,CAAgB;AAAA,IAC3C,GAAGjB,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,GAOYkB,IAASC,EAAM,WAG1B,SACA,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS3B,EAAA;AAEf,SACE,gBAAA4B;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAA,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/zenith-runtime/v1\"\n\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } 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 = makeZenithStyles({\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.focusRing,\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.accentLight,\n    \":hover\": {\n      backgroundColor: tokens.accentSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.accentA3,\n      color: tokens.accentOnSoft,\n    },\n    \"&[data-state='on']:hover\": {\n      backgroundColor: tokens.accentA4,\n    },\n  },\n  destructive: {\n    backgroundColor: \"transparent\",\n    color: tokens.errorLight,\n    \":hover\": {\n      backgroundColor: tokens.errorSoft,\n    },\n    \"&[data-state='on']\": {\n      backgroundColor: tokens.errorA3,\n      color: tokens.errorOnSoft,\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","makeZenithStyles","shorthands","tokens.spacingElement1","tokens.fontWeightSemibold","tokens.focusRing","tokens.accentLight","tokens.accentSoft","tokens.accentA3","tokens.accentOnSoft","tokens.accentA4","tokens.errorLight","tokens.errorSoft","tokens.errorA3","tokens.errorOnSoft","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,EAAiB;AAAA,EAC9C,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,2CAA2C;AAAA,MACzC,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAGF,EAAW,YAAY,MAAM;AAAA,IAChC,GAAGA,EAAW,YAAY,CAAC;AAAA,IAC3B,kBAAkB;AAAA,MAChB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAcG;AAAAA,IAAO;AAAA,IAEvB,+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,OAAOC;AAAAA,IACP,UAAU;AAAA,MACR,iBAAiBC;AAAAA,IAAO;AAAA,IAE1B,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,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,sBAAsB;AAAA,MACpB,iBAAiBC;AAAAA,MACjB,OAAOC;AAAAA,IAAO;AAAA,IAEhB,4BAA4B;AAAA,MAC1B,iBAAiBC;AAAAA,IAAO;AAAA,EAC1B;AAAA;AAAA,EAGF,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,GAAGb,EAAW,aAAac,CAAe;AAAA,IAC1C,GAAGd,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,aAAae,CAAe;AAAA,IAC1C,GAAGf,EAAW,cAAcgB,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,GAAGhB,EAAW,aAAaiB,CAAgB;AAAA,IAC3C,GAAGjB,EAAW,cAAc,UAAU;AAAA,IACtC,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA;AAAA,EACV;AAEJ,CAAC,GAOYkB,IAASC,EAAM,WAG1B,SACA,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,MAAAC,IAAO,QAAQ,GAAGC,EAAA,GACpDC,GACA;AACA,QAAMC,IAAS3B,EAAA;AAEf,SACE,gBAAA4B;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,aAAU;AAAA,MACJ,CAACI,CAAS,GAAG;AAAA,MACnB,WAAWC;AAAA,QACTJ,EAAO;AAAA,QACPA,EAAOJ,CAAO;AAAA,QACdI,EAAOH,CAAI;AAAA,QACXF;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}