@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.11

package/dist/components/segmented-control/SegmentedControlItem.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as s}from"../../stitches.js";import{Tabs as d}from"../tabs/Tabs.js";import{SegmentedControlContext as l}from"./SegmentedControlContext.js";const m=s(d.Trigger,{position:"relative",bg:"transparent",borderRadius:"$2",p:0,zIndex:2,minWidth:"140px",border:"2px solid transparent",variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus-visible":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus-visible":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset",p:"$4 $24",gap:"$3"},md:{flex:1,p:"$24 $4",gap:"$4"},lg:{flex:1,p:"$24 $4",gap:"$4"}}},"& > div":{display:"none"},"& > span":{display:"flex",flexDirection:"column",alignItems:"center"},"&[data-state=active]":{boxShadow:"none",border:"2px solid transparent",fontWeight:600,color:"$textBold","&:focus-visible":{boxShadow:"none",borderColor:"$primary800"}},"&[data-state=inactive]":{fontWeight:400,color:"$grey900"},"&[disabled]":{opacity:.3}}),t=e.forwardRef(({children:r,...o},a)=>{const{size:i,theme:n}=e.useContext(l);return e.createElement(m,{...o,theme:n,size:i,ref:a},r)});t.displayName="SegmentedControlItem";export{t as SegmentedControlItem};
+import*as e from"react";import{styled as n}from"../../styled.js";import{Tabs as d}from"../tabs/Tabs.js";import{SegmentedControlContext as m}from"./SegmentedControlContext.js";const p=n(d.Trigger,{base:["relative","bg-transparent","rounded-lg","p-0","z-2","min-w-35","border-2","border-transparent","[&>div]:hidden","[&>span]:flex","[&>span]:flex-col","[&>span]:items-center","data-[state=active]:border-2","data-[state=active]:border-transparent","data-[state=active]:focus-visible:border-primary-800","data-[state=active]:focus-visible:shadow-none","data-[state=active]:font-semibold","data-[state=active]:shadow-none","data-[state=active]:text-(--text-bold)","data-[state=inactive]:font-normal","data-[state=inactive]:text-grey-900","disabled:opacity-30"],variants:{theme:{primary:["data-[state=inactive]:hover:bg-primary-300","focus-visible:border-primary-800"],marsh:["data-[state=inactive]:hover:bg-marsh-300","focus-visible:border-marsh-800"]},size:{sm:["flex-[unset]","gap-3","px-6","py-4"],md:["flex-1","gap-4","px-4","py-6"],lg:["flex-1","gap-4","px-4","py-6"]}}}),t=e.forwardRef(({children:a,...r},s)=>{const{size:o,theme:i}=e.useContext(m);return e.createElement(p,{...r,theme:i,size:o,ref:s},a)});t.displayName="SegmentedControlItem";export{t as SegmentedControlItem};
 //# sourceMappingURL=SegmentedControlItem.js.map

package/dist/components/segmented-control/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  position: 'relative',\n  bg: 'transparent',\n  borderRadius: '$2',\n  p: 0,\n  zIndex: 2,\n  minWidth: '140px',\n  border: '2px solid transparent',\n  variants: {\n    theme: {\n      primary: {\n        '&[data-state=inactive]:hover': {\n          bg: '$primary300'\n        },\n        '&:focus-visible': {\n          borderColor: '$primary800'\n        }\n      },\n      marsh: {\n        '&[data-state=inactive]:hover': {\n          bg: '$marsh300'\n        },\n        '&:focus-visible': {\n          borderColor: '$marsh800'\n        }\n      }\n    },\n    size: {\n      sm: {\n        flex: 'unset',\n        p: '$4 $24',\n        gap: '$3'\n      },\n      md: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      },\n      lg: {\n        flex: 1,\n        p: '$24 $4',\n        gap: '$4'\n      }\n    }\n  },\n  '& > div': { display: 'none' },\n  '& > span': {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center'\n  },\n  '&[data-state=active]': {\n    boxShadow: 'none',\n    border: '2px solid transparent',\n    fontWeight: 600,\n    color: '$textBold',\n    '&:focus-visible': {\n      boxShadow: 'none',\n      borderColor: '$primary800'\n    }\n  },\n  '&[data-state=inactive]': {\n    fontWeight: 400,\n    color: '$grey900'\n  },\n  '&[disabled]': {\n    opacity: 0.3\n  }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","SegmentedControlContext"],"mappings":"iLAMA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,SAAU,WACV,GAAI,cACJ,aAAc,KACd,EAAG,EACH,OAAQ,EACR,SAAU,QACV,OAAQ,wBACR,SAAU,CACR,MAAO,CACL,QAAS,CACP,+BAAgC,CAC9B,GAAI,aACN,EACA,kBAAmB,CACjB,YAAa,aACf,CACF,EACA,MAAO,CACL,+BAAgC,CAC9B,GAAI,WACN,EACA,kBAAmB,CACjB,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,QACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,KAAM,EACN,EAAG,SACH,IAAK,IACP,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,WAAY,CACV,QAAS,OACT,cAAe,SACf,WAAY,QACd,EACA,uBAAwB,CACtB,UAAW,OACX,OAAQ,wBACR,WAAY,IACZ,MAAO,YACP,kBAAmB,CACjB,UAAW,OACX,YAAa,aACf,CACF,EACA,yBAA0B,CACxB,WAAY,IACZ,MAAO,UACT,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,KAAaC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIL,EAAM,WAAWM,CAAuB,EAEhE,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CACnDF,EAAAA,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}
+{"version":3,"file":"SegmentedControlItem.js","sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  base: [\n    'relative',\n    'bg-transparent',\n    'rounded-lg',\n    'p-0',\n    'z-2',\n    'min-w-35',\n    'border-2',\n    'border-transparent',\n    '[&>div]:hidden',\n    '[&>span]:flex',\n    '[&>span]:flex-col',\n    '[&>span]:items-center',\n    'data-[state=active]:border-2',\n    'data-[state=active]:border-transparent',\n    'data-[state=active]:focus-visible:border-primary-800',\n    'data-[state=active]:focus-visible:shadow-none',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:shadow-none',\n    'data-[state=active]:text-(--text-bold)',\n    'data-[state=inactive]:font-normal',\n    'data-[state=inactive]:text-grey-900',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    theme: {\n      primary: [\n        'data-[state=inactive]:hover:bg-primary-300',\n        'focus-visible:border-primary-800'\n      ],\n      marsh: [\n        'data-[state=inactive]:hover:bg-marsh-300',\n        'focus-visible:border-marsh-800'\n      ]\n    },\n    size: {\n      sm: ['flex-[unset]', 'gap-3', 'px-6', 'py-4'],\n      md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n      lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n    }\n  }\n})\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"names":["StyledItem","styled","Tabs","SegmentedControlItem","React","children","props","ref","size","theme","SegmentedControlContext"],"mappings":"+KAOA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,KAAM,CACJ,WACA,iBACA,aACA,MACA,MACA,WACA,WACA,qBACA,iBACA,gBACA,oBACA,wBACA,+BACA,yCACA,uDACA,gDACA,oCACA,kCACA,yCACA,oCACA,sCACA,qBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CACP,6CACA,kCACF,EACA,MAAO,CACL,2CACA,gCACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,eAAgB,QAAS,OAAQ,MAAM,EAC5C,GAAI,CAAC,SAAU,QAAS,OAAQ,MAAM,EACtC,GAAI,CAAC,SAAU,QAAS,OAAQ,MAAM,CACxC,CACF,CACF,CAAC,EAEYC,EAAuBC,EAAM,WAGxC,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAGC,IAAQ,CACjC,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIL,EAAM,WAAWM,CAAuB,EAEhE,OACEN,EAAA,cAACJ,EAAA,CAAY,GAAGM,EAAO,MAAOG,EAAO,KAAMD,EAAM,IAAKD,CAAAA,EACnDF,CACH,CAEJ,CAAC,EAEDF,EAAqB,YAAc"}

package/dist/components/segmented-control/SegmentedControlItemList.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as l}from"../../stitches.js";import{Box as v}from"../box/Box.js";import{Tabs as g}from"../tabs/Tabs.js";import{SegmentedControlContext as b}from"./SegmentedControlContext.js";const C=l(g.TriggerList,{position:"relative",p:"$1",borderRadius:"$3",overflow:"hidden",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}},'& > div[role="tablist"]':{position:"relative"},"& > button":{zIndex:2}}),E=l(v,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),w=s=>{const{theme:d,defaultValue:c,value:m}=t.useContext(b),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===m),[u,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(C,{theme:d,defaultValue:c,...s},t.createElement(E,{css:{...u},interacted:h}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
+import*as t from"react";import{styled as l}from"../../styled.js";import{Tabs as v}from"../tabs/Tabs.js";import{SegmentedControlContext as g}from"./SegmentedControlContext.js";const b=l(v.TriggerList,{base:["relative","p-1","rounded-xl","overflow-hidden","[&>div[role=tablist]]:relative","[&>button]:z-2"],variants:{theme:{primary:["bg-primary-200"],marsh:["bg-marsh-200"]}}}),C=l("div",{base:["content-['']","absolute","bg-white","rounded-lg"],variants:{interacted:{true:["duration-300","ease-in","transition-all"],false:["transition-none"]}}}),w=s=>{const{theme:d,defaultValue:u,value:c}=t.useContext(g),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===c),[m,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(b,{theme:d,defaultValue:u,...s},t.createElement(C,{interacted:h,style:m}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
 //# sourceMappingURL=SegmentedControlItemList.js.map

package/dist/components/segmented-control/SegmentedControlItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  position: 'relative',\n  p: '$1',\n  borderRadius: '$3',\n  overflow: 'hidden',\n  variants: {\n    theme: {\n      primary: { bg: '$primary200' },\n      marsh: { bg: '$marsh200' }\n    }\n  },\n  '& > div[role=\"tablist\"]': {\n    position: 'relative'\n  },\n  '& > button': {\n    zIndex: 2\n  }\n})\n\nconst SelectionIndicator = styled(Box, {\n  content: '',\n  position: 'absolute',\n  bg: 'white',\n  borderRadius: '$2',\n  variants: {\n    interacted: {\n      true: {\n        transition: 'all 0.3s ease'\n      },\n      false: {\n        transition: 'none'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator\n        css={{\n          ...indicatorStyles\n        }}\n        interacted={hasInteracted}\n      />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"qNASA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,SAAU,WACV,EAAG,KACH,aAAc,KACd,SAAU,SACV,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,EACA,0BAA2B,CACzB,SAAU,UACZ,EACA,aAAc,CACZ,OAAQ,CACV,CACF,CAAC,EAEKC,EAAqBF,EAAOG,EAAK,CACrC,QAAS,GACT,SAAU,WACV,GAAI,QACJ,aAAc,KACd,SAAU,CACR,WAAY,CACV,KAAM,CACJ,WAAY,eACd,EACA,MAAO,CACL,WAAY,MACd,CACF,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAA,CAAE,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBACrCJ,EAAAA,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EAAwB,CAC1B,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACV,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,CAAAA,EAC/DI,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CAAAA,CACd,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,GAASE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}
+{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-xl',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: [\"content-['']\", 'absolute', 'bg-white', 'rounded-lg'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"+KAQA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,KAAM,CACJ,WACA,MACA,aACA,kBACA,iCACA,gBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,gBAAgB,EAC1B,MAAO,CAAC,cAAc,CACxB,CACF,CACF,CAAC,EAEKC,EAAqBF,EAAO,MAAO,CACvC,KAAM,CAAC,eAAgB,WAAY,WAAY,YAAY,EAC3D,SAAU,CACR,WAAY,CACV,KAAM,CAAC,eAAgB,UAAW,gBAAgB,EAClD,MAAO,CAAC,iBAAiB,CAC3B,CACF,CACF,CAAC,EAEYG,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAE,CAAA,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,CAAa,EAChD,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAsB,EAC3DJ,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EACF,CAAA,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACT,EAAA,CAAkB,MAAOM,EAAO,aAAcC,EAAe,GAAGF,CAC/DI,EAAAA,EAAA,cAACN,EAAA,CAAmB,WAAYa,EAAe,MAAOF,CAAiB,CAAA,EACtEL,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,CAAK,EAAIE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}