@atom-learning/components 4.3.2 → 4.5.0

package/dist/components/tabs/TabsTrigger.js

@@ -1,2 +1,2 @@
-import{Trigger as n}from"@radix-ui/react-tabs";import*as e from"react";import{styled as o}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as l}from"../../utilities/style/disabledStyle.js";import{Text as s}from"../text/Text.js";const t=o("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),m=o(n,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[disabled]":l,"&:not([disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${t}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...c()}}}),r=({children:i,...a})=>e.createElement(m,{...a},e.createElement(s,{size:"sm",as:"span"},i),e.createElement(t,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
+import{Trigger as l}from"@radix-ui/react-tabs";import*as e from"react";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as s}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as c}from"../../utilities/style/disabledStyle.js";import{Text as m}from"../text/Text.js";const o=r("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),p=r(l,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[disabled]":c,"&:not([disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${o}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...s()}}}),t=e.forwardRef(({children:i,...a},n)=>e.createElement(p,{...a,ref:n},e.createElement(m,{size:"sm",as:"span"},i),e.createElement(o,null)));t.displayName="TabsTrigger";export{t as TabsTrigger};
 //# sourceMappingURL=TabsTrigger.js.map

package/dist/components/tabs/TabsTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[disabled]': disabledStyle,\n  '&:not([disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\nexport const TabsTrigger = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledTabsTrigger> & { value: string }) => (\n  <StyledTabsTrigger {...rest}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","disabledStyle","focusVisibleStyleBlock","TabsTrigger","children","rest","React","Text"],"mappings":"ofAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,cAAeC,EACf,oBAAqB,CACnB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKJ,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGK,EACL,CAAA,CACF,CACF,CAAC,EAEYC,EAAc,CAAC,CAC1B,SAAAC,KACGC,CACL,IACEC,EAAA,cAACP,EAAA,CAAmB,GAAGM,GACrBC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAE,EAAA,cAACT,EAAA,IAAiC,CACpC,EAGFM,EAAY,YAAc"}
+{"version":3,"file":"TabsTrigger.js","sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { Text } from '../text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  position: 'absolute',\n  inset: 0,\n  height: 'calc(100% + 2px)',\n  opacity: 0,\n  bg: '$interactive1'\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  background: 'none',\n  border: 'none',\n  cursor: 'pointer',\n  flexShrink: 0,\n  p: '$4',\n  userSelect: 'none',\n  borderBottom: '2px solid transparent',\n  position: 'relative',\n  '&[data-state=\"active\"]': {\n    color: '$interactive1',\n    fontWeight: 600,\n    letterSpacing: '-0.005em',\n    borderColor: 'currentColor'\n  },\n  '&[disabled]': disabledStyle,\n  '&:not([disabled])': {\n    '&:hover, &:focus-visible': {\n      color: '$interactive2',\n      [`& ${StyledTabsTriggerHoverBackground}`]: {\n        opacity: 0.07\n      }\n    },\n    '&:active': {\n      color: '$interactive3'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  }\n})\n\nexport const TabsTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledTabsTrigger> & { value: string }\n>(({ children, ...rest }, ref) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n))\n\nTabsTrigger.displayName = 'TabsTrigger'\n"],"names":["StyledTabsTriggerHoverBackground","styled","StyledTabsTrigger","Trigger","disabledStyle","focusVisibleStyleBlock","TabsTrigger","React","children","rest","ref","Text"],"mappings":"ofAQA,MAAMA,EAAmCC,EAAO,MAAO,CACrD,SAAU,WACV,MAAO,EACP,OAAQ,mBACR,QAAS,EACT,GAAI,eACN,CAAC,EAEKC,EAAoBD,EAAOE,EAAS,CACxC,WAAY,OACZ,OAAQ,OACR,OAAQ,UACR,WAAY,EACZ,EAAG,KACH,WAAY,OACZ,aAAc,wBACd,SAAU,WACV,yBAA0B,CACxB,MAAO,gBACP,WAAY,IACZ,cAAe,WACf,YAAa,cACf,EACA,cAAeC,EACf,oBAAqB,CACnB,2BAA4B,CAC1B,MAAO,gBACP,CAAC,KAAKJ,KAAqC,CACzC,QAAS,GACX,CACF,EACA,WAAY,CACV,MAAO,eACT,EACA,kBAAmB,CACjB,GAAGK,GACL,CACF,CACF,CAAC,EAEYC,EAAcC,EAAM,WAG/B,CAAC,CAAE,SAAAC,KAAaC,CAAK,EAAGC,IACxBH,EAAA,cAACL,EAAA,CAAmB,GAAGO,EAAM,IAAKC,GAChCH,EAAA,cAACI,EAAA,CAAK,KAAK,KAAK,GAAG,MAAA,EAChBH,CACH,EACAD,EAAA,cAACP,EAAA,IAAiC,CACpC,CACD,EAEDM,EAAY,YAAc"}