@atom-learning/components 4.1.4 → 4.2.1

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

@@ -0,0 +1,2 @@
+import*as t from"react";import{styled as r}from"../../stitches.js";import{Flex as s}from"../flex/Flex.js";import{Tabs as n}from"../tabs/Tabs.js";import{useSegmentedControl as h}from"./SegmentedControlContext.js";const m=r(n.Trigger,{bg:"transparent",borderRadius:"$2",p:0,variants:{theme:{primary:{"&[data-state=inactive]:hover":{bg:"$primary300"},"&:focus":{borderColor:"$primary800"}},marsh:{"&[data-state=inactive]:hover":{bg:"$marsh300"},"&:focus":{borderColor:"$marsh800"}}},size:{sm:{flex:"unset"},md:{flex:1},lg:{flex:1}}},"& > div":{display:"none"},"&[data-state=active]":{bg:"white",boxShadow:"none",border:"2px solid transparent","& :is(h1,h2,h3,h4,h5,h6)":{fontWeight:600,color:"$textBold"},"&:hover":{bg:"white"},"&:focus-visible":{boxShadow:"none"}},"&[data-state=inactive]":{"& :is(h1,h2,h3,h4,h5,h6)":{fontWeight:400,color:"$grey900"}},"&[disabled]":{opacity:.3}}),d=r(s,{variants:{size:{sm:{p:"$4 $24",gap:"$3"},md:{p:"$24 $5",gap:"$4"},lg:{p:"$24 $5",gap:"$4"}}}}),l=({children:o,...a})=>{const{size:e,theme:i}=h();return t.createElement(m,{...a,theme:i,size:e},t.createElement(d,{size:e,direction:"column",align:"center",justify:"center"},o))};export{l as SegmentedControlItem};
+//# sourceMappingURL=SegmentedControlItem.js.map

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

@@ -0,0 +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 { Flex } from '../flex'\nimport { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledItem = styled(Tabs.Trigger, {\n  bg: 'transparent',\n  borderRadius: '$2',\n  p: 0,\n  variants: {\n    theme: {\n      primary: {\n        '&[data-state=inactive]:hover': {\n          bg: '$primary300'\n        },\n        '&:focus': {\n          borderColor: '$primary800'\n        }\n      },\n      marsh: {\n        '&[data-state=inactive]:hover': {\n          bg: '$marsh300'\n        },\n        '&:focus': {\n          borderColor: '$marsh800'\n        }\n      }\n    },\n    size: {\n      sm: {\n        flex: 'unset'\n      },\n      md: {\n        flex: 1\n      },\n      lg: {\n        flex: 1\n      }\n    }\n  },\n  '& > div': { display: 'none' },\n  '&[data-state=active]': {\n    bg: 'white',\n    boxShadow: 'none',\n    border: '2px solid transparent',\n    '& :is(h1,h2,h3,h4,h5,h6)': {\n      fontWeight: 600,\n      color: '$textBold'\n    },\n    '&:hover': {\n      bg: 'white'\n    },\n    '&:focus-visible': {\n      boxShadow: 'none'\n    }\n  },\n  '&[data-state=inactive]': {\n    '& :is(h1,h2,h3,h4,h5,h6)': {\n      fontWeight: 400,\n      color: '$grey900'\n    }\n  },\n  '&[disabled]': {\n    opacity: 0.3\n  }\n})\n\nconst StyledContainer = styled(Flex, {\n  variants: {\n    size: {\n      sm: {\n        p: '$4 $24',\n        gap: '$3'\n      },\n      md: {\n        p: '$24 $5',\n        gap: '$4'\n      },\n      lg: {\n        p: '$24 $5',\n        gap: '$4'\n      }\n    }\n  }\n})\n\nexport const SegmentedControlItem = ({\n  children,\n  ...props\n}: Omit<React.ComponentProps<typeof StyledItem>, 'size'>): JSX.Element => {\n  const { size, theme } = useSegmentedControl()\n\n  return (\n    <StyledItem {...props} theme={theme} size={size}>\n      <StyledContainer\n        size={size}\n        direction=\"column\"\n        align=\"center\"\n        justify=\"center\"\n      >\n        {children}\n      </StyledContainer>\n    </StyledItem>\n  )\n}\n"],"names":["StyledItem","styled","Tabs","StyledContainer","Flex","SegmentedControlItem","children","props","size","theme","useSegmentedControl","React"],"mappings":"oNAOA,MAAMA,EAAaC,EAAOC,EAAK,QAAS,CACtC,GAAI,cACJ,aAAc,KACd,EAAG,EACH,SAAU,CACR,MAAO,CACL,QAAS,CACP,+BAAgC,CAC9B,GAAI,aACN,EACA,UAAW,CACT,YAAa,aACf,CACF,EACA,MAAO,CACL,+BAAgC,CAC9B,GAAI,WACN,EACA,UAAW,CACT,YAAa,WACf,CACF,CACF,EACA,KAAM,CACJ,GAAI,CACF,KAAM,OACR,EACA,GAAI,CACF,KAAM,CACR,EACA,GAAI,CACF,KAAM,CACR,CACF,CACF,EACA,UAAW,CAAE,QAAS,MAAO,EAC7B,uBAAwB,CACtB,GAAI,QACJ,UAAW,OACX,OAAQ,wBACR,2BAA4B,CAC1B,WAAY,IACZ,MAAO,WACT,EACA,UAAW,CACT,GAAI,OACN,EACA,kBAAmB,CACjB,UAAW,MACb,CACF,EACA,yBAA0B,CACxB,2BAA4B,CAC1B,WAAY,IACZ,MAAO,UACT,CACF,EACA,cAAe,CACb,QAAS,EACX,CACF,CAAC,EAEKC,EAAkBF,EAAOG,EAAM,CACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,EAAG,SACH,IAAK,IACP,EACA,GAAI,CACF,EAAG,SACH,IAAK,IACP,CACF,CACF,CACF,CAAC,EAEYC,EAAuB,CAAC,CACnC,SAAAC,KACGC,CACL,IAA0E,CACxE,KAAM,CAAE,KAAAC,EAAM,MAAAC,CAAM,EAAIC,EAAAA,EAExB,OACEC,EAAA,cAACX,EAAA,CAAY,GAAGO,EAAO,MAAOE,EAAO,KAAMD,CACzCG,EAAAA,EAAA,cAACR,EAAA,CACC,KAAMK,EACN,UAAU,SACV,MAAM,SACN,QAAQ,QAAA,EAEPF,CACH,CACF,CAEJ"}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Tabs } from '../tabs';
+export declare const SegmentedControlItemList: (props: React.ComponentProps<typeof Tabs.TriggerList>) => JSX.Element;

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

@@ -0,0 +1,2 @@
+import*as t from"react";import{styled as m}from"../../stitches.js";import{Tabs as o}from"../tabs/Tabs.js";import{useSegmentedControl as s}from"./SegmentedControlContext.js";const i=m(o.TriggerList,{p:"$1",borderRadius:"$3",variants:{theme:{primary:{bg:"$primary200"},marsh:{bg:"$marsh200"}}}}),a=r=>{const{theme:e}=s();return t.createElement(i,{...r,theme:e})};export{a as SegmentedControlItemList};
+//# sourceMappingURL=SegmentedControlItemList.js.map

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

@@ -0,0 +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 { Tabs } from '../tabs'\nimport { useSegmentedControl } from './SegmentedControlContext'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  p: '$1',\n  borderRadius: '$3',\n  variants: {\n    theme: {\n      primary: { bg: '$primary200' },\n      marsh: { bg: '$marsh200' }\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme } = useSegmentedControl()\n  return <StyledTriggerList {...props} theme={theme} />\n}\n"],"names":["StyledTriggerList","styled","Tabs","SegmentedControlItemList","props","theme","useSegmentedControl","React"],"mappings":"6KAMA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,EAAG,KACH,aAAc,KACd,SAAU,CACR,MAAO,CACL,QAAS,CAAE,GAAI,aAAc,EAC7B,MAAO,CAAE,GAAI,WAAY,CAC3B,CACF,CACF,CAAC,EAEYC,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,CAAM,EAAIC,EAAoB,EACtC,OAAOC,EAAA,cAACP,EAAA,CAAmB,GAAGI,EAAO,MAAOC,EAAO,CACrD"}