@atom-learning/components 5.4.0 → 5.4.2

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

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as c}from"../../stitches.js";import{Box as g}from"../box/Box.js";import{Tabs as w}from"../tabs/Tabs.js";import{useSegmentedControl as E}from"./SegmentedControlContext.js";const C=c(w.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}}),R=c(g,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),L=s=>{const{theme:u,defaultValue:l}=E(),a=t.useRef([]),d=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===l),[i,f]=t.useState(d!==-1?d:0),[m,h]=t.useState({left:0,height:0,width:0}),[p,b]=t.useState(!1),v=e=>{f(e),b(!0)},n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();h({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:u,defaultValue:l,...s},t.createElement(R,{css:{...m},interacted:p}),t.Children.map(s.children,(e,o)=>t.cloneElement(e,{onClick:()=>v(o),ref:r=>a.current[o]=r})))};export{L as SegmentedControlItemList};
+import C from"invariant";import*as t from"react";import{styled as d}from"../../stitches.js";import{Box as w}from"../box/Box.js";import{Tabs as b}from"../tabs/Tabs.js";import{SegmentedControlContext as E}from"./SegmentedControlContext.js";import{SegmentedControlItem as m}from"./SegmentedControlItem.js";const y=d(b.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}}),x=d(w,{content:"",position:"absolute",bg:"white",borderRadius:"$2",variants:{interacted:{true:{transition:"all 0.3s ease"},false:{transition:"none"}}}}),l=s=>{const{theme:c,defaultValue:f,value:p}=t.useContext(E),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===p),[u,h]=t.useState({left:0,height:0,width:0}),[v,g]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();h({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(y,{theme:c,defaultValue:f,...s},t.createElement(x,{css:{...u},interacted:v}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error(`Child passed to ${l.displayName} is not a valid element`);return C(e.type===m,`Children of type ${e==null?void 0:e.type} aren't permitted. Only an ${m.displayName} component is allowed in ${l.displayName}`),t.cloneElement(e,{onClick:r=>{g(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{l 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 * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Box } from '../box'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\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 } = useSegmentedControl()\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const defaultSelectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === defaultValue\n  )\n  const [selectedIndex, setSelectedIndex] = React.useState(\n    defaultSelectedIndex !== -1 ? defaultSelectedIndex : 0\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 setSelection = (index: number) => {\n    setSelectedIndex(index)\n    setHasInteracted(true)\n  }\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        React.cloneElement(child as React.ReactElement, {\n          onClick: () => setSelection(index),\n          ref: (el) => (tabsRef.current[index] = el)\n        })\n      )}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","Box","SegmentedControlItemList","props","theme","defaultValue","useSegmentedControl","tabsRef","React","defaultSelectedIndex","child","selectedIndex","setSelectedIndex","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","setSelection","index","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","el"],"mappings":"iNAOA,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,CAAa,EAAIC,EAE1BC,EAAAA,EAAUC,EAAM,OAA+B,CAAE,CAAA,EAEjDC,EAAuBD,EAAM,SAAS,QAAQL,EAAM,QAAQ,EAAE,UACjEO,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EACM,CAACM,EAAeC,CAAgB,EAAIJ,EAAM,SAC9CC,IAAyB,GAAKA,EAAuB,CACvD,EACM,CAACI,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAAgBC,GAAkB,CACtCN,EAAiBM,CAAK,EACtBF,EAAiB,EAAI,CACvB,EAEMG,EAA0BX,EAAM,YAAY,IAAM,CACtD,MAAMY,EAAab,EAAQ,QAAQI,GACnC,GAAI,CAACS,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAA,EACrCN,EAAmB,CAAE,KAAMM,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACV,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMe,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcjB,EAAQ,QAC5B,OAAAiB,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,CAACZ,EAAeQ,CAAuB,CAAC,EAE3CX,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUW,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BX,EAAM,UAAU,IAAM,CACpBW,EACF,CAAA,EAAG,CAACR,EAAeQ,CAAuB,CAAC,EAGzCX,EAAA,cAACX,EAAA,CAAkB,MAAOO,EAAO,aAAcC,EAAe,GAAGF,GAC/DK,EAAA,cAACR,EAAA,CACC,IAAK,CACH,GAAGa,CACL,EACA,WAAYE,CACd,CAAA,EACCP,EAAM,SAAS,IAAIL,EAAM,SAAU,CAACO,EAAOQ,IAC1CV,EAAM,aAAaE,EAA6B,CAC9C,QAAS,IAAMO,EAAaC,CAAK,EACjC,IAAMQ,GAAQnB,EAAQ,QAAQW,GAASQ,CACzC,CAAC,CACH,CACF,CAEJ"}
+{"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: React.FC = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n) => {\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.displayName} is not a valid element`\n          )\n        }\n\n        invariant(\n          child.type === SegmentedControlItem,\n          `Children of type ${child?.type} aren't permitted. Only an ${SegmentedControlItem.displayName} component is allowed in ${SegmentedControlItemList.displayName}`\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","invariant","SegmentedControlItem","e","el"],"mappings":"+SASA,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,GACG,CACH,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,EAAE,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,GACnC,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,wBACrCJ,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,WAAW,CAC5B,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,CAC/DI,EAAAA,EAAA,cAACP,EAAA,CACC,IAAK,CACH,GAAGY,CACL,EACA,WAAYE,CACd,CAAA,EACCP,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,mBAAmBT,EAAyB,oCAC9C,EAGF,OAAAsB,EACEb,EAAM,OAASc,EACf,oBAAoBd,GAAA,YAAAA,EAAO,kCAAkCc,EAAqB,uCAAuCvB,EAAyB,aACpJ,EAEOK,EAAM,aACXI,EAGA,CACE,QAAUe,GAAM,CACdX,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQe,CAAC,CAChD,EACA,IAAMC,GAAQlB,EAAQ,QAAQc,GAASI,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}

package/dist/components/segmented-control/SegmentedControlRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SegmentedControlTheme } from './SegmentedControlContext';
+import type { SegmentedControlTheme } from './SegmentedControl.types';
 declare const StyledSegmentedControlRoot: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>>, {}, {
     sm: string;
     md: string;
@@ -1834,5 +1834,5 @@ declare const StyledSegmentedControlRoot: import("@atom-learning/stitches-react/
 export interface SegmentedControlRootProps extends React.ComponentProps<typeof StyledSegmentedControlRoot> {
     theme?: SegmentedControlTheme;
 }
-export declare const SegmentedControlRoot: ({ size, children, theme, defaultValue, ...props }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
+export declare const SegmentedControlRoot: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as a}from"../../stitches.js";import{Tabs as l}from"../tabs/Tabs.js";import{SegmentedControlProvider as n}from"./SegmentedControlContext.js";const s=a(l,{"& > div":{border:"none"},variants:{size:{sm:{width:"unset"},md:{},lg:{}}}}),d=({size:e,children:o,theme:m="primary",defaultValue:t="",...i})=>r.createElement(n,{size:e,theme:m,defaultValue:t},r.createElement(s,{...i,size:e,defaultValue:t},o));export{d as SegmentedControlRoot};
+import*as t from"react";import{styled as v}from"../../stitches.js";import{Tabs as c}from"../tabs/Tabs.js";import{SegmentedControlContext as f}from"./SegmentedControlContext.js";const h=v(c,{"& > div":{border:"none"},variants:{size:{sm:{width:"unset"},md:{},lg:{}}}}),g=({size:n,theme:m="primary",defaultValue:e,children:u,...o})=>{const a=o.value!==void 0,[i,s]=t.useState(e),r=a?o.value:i,l=a?o.onValueChange:s;t.useEffect(()=>{!a&&e&&s(e)},[e,a]);const d=t.useMemo(()=>({size:n,theme:m,defaultValue:e,onValueChange:l,value:r}),[n,m,e,l,r]);return t.createElement(f.Provider,{value:d},t.createElement(h,{size:n,value:r,onValueChange:l,...o},u))};export{g as SegmentedControlRoot};
 //# sourceMappingURL=SegmentedControlRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport {\n  SegmentedControlProvider,\n  SegmentedControlTheme\n} from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(Tabs, {\n  '& > div': { border: 'none' },\n  variants: {\n    size: {\n      sm: {\n        width: 'unset'\n      },\n      md: {},\n      lg: {}\n    }\n  }\n})\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  children,\n  theme = 'primary',\n  defaultValue = '',\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => (\n  <SegmentedControlProvider\n    size={size}\n    theme={theme}\n    defaultValue={defaultValue}\n  >\n    <StyledSegmentedControlRoot\n      {...props}\n      size={size}\n      defaultValue={defaultValue}\n    >\n      {children}\n    </StyledSegmentedControlRoot>\n  </SegmentedControlProvider>\n)\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","children","theme","defaultValue","props","React","SegmentedControlProvider"],"mappings":"kLASA,MAAMA,EAA6BC,EAAOC,EAAM,CAC9C,UAAW,CAAE,OAAQ,MAAO,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,OACT,EACA,GAAI,CACJ,EAAA,GAAI,CAAA,CACN,CACF,CACF,CAAC,EAOYC,EAAuB,CAAC,CACnC,KAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EAAe,MACZC,CACL,IACEC,EAAA,cAACC,EAAA,CACC,KAAMN,EACN,MAAOE,EACP,aAAcC,GAEdE,EAAA,cAACT,EAAA,CACE,GAAGQ,EACJ,KAAMJ,EACN,aAAcG,CAAAA,EAEbF,CACH,CACF"}
+{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(Tabs, {\n  '& > div': { border: 'none' },\n  variants: {\n    size: {\n      sm: {\n        width: 'unset'\n      },\n      md: {},\n      lg: {}\n    }\n  }\n})\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","theme","defaultValue","children","props","isControlled","internalValue","setInternalValue","React","currentValue","handleValueChange","value","SegmentedControlContext"],"mappings":"iLAOA,MAAMA,EAA6BC,EAAOC,EAAM,CAC9C,UAAW,CAAE,OAAQ,MAAO,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,OACT,EACA,GAAI,CACJ,EAAA,GAAI,CAAA,CACN,CACF,CACF,CAAC,EAOYC,EAAuB,CAAC,CACnC,KAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EACA,SAAAC,KACGC,CACL,IAA6E,CAC3E,MAAMC,EAAeD,EAAM,QAAU,OAE/B,CAACE,EAAeC,CAAgB,EAAIC,EAAM,SAASN,CAAY,EAE/DO,EAAeJ,EAAeD,EAAM,MAAQE,EAC5CI,EAAoBL,EACtBD,EAAM,cACNG,EAEJC,EAAM,UAAU,IAAM,CAChB,CAACH,GAAgBH,GACnBK,EAAiBL,CAAY,CAEjC,EAAG,CAACA,EAAcG,CAAY,CAAC,EAE/B,MAAMM,EAAQH,EAAM,QAClB,KAAO,CACL,KAAAR,EACA,MAAAC,EACA,aAAAC,EACA,cAAeQ,EACf,MAAOD,CACT,GACA,CAACT,EAAMC,EAAOC,EAAcQ,EAAmBD,CAAY,CAC7D,EAEA,OACED,EAAA,cAACI,EAAwB,SAAxB,CAAiC,MAAOD,CACvCH,EAAAA,EAAA,cAACZ,EAAA,CACC,KAAMI,EACN,MAAOS,EACP,cAAeC,EACd,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}