@atom-learning/components 4.0.0-beta.8 → 4.0.0

package/dist/components/chip/Chip.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as l}from"../icon/Icon.js";import{getTextVariant as s}from"../text/Text.js";import{styled as c}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const p={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},d=c("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...p,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},m=t=>{const r=e.useContext(a),{size:o}=r,n=e.useMemo(()=>g(o,i=>z[i]),[o]);return e.createElement(l,{...t,size:n})},u=({children:t,...r})=>{const o=e.Children.toArray(t),n=o.length<=1;return e.createElement(d,{...r},o.map((i,$)=>!n&&typeof i=="string"?e.createElement(x,{as:"span",css:p,key:i},i):e.isValidElement(i)&&i.type===l?e.createElement(m,{key:`icon-${$}`,...i.props}):i))},h=c(C,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary800",color:"$primary900",bg:"$primary100","&[data-disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...s({size:"sm"})},md:{height:"$3",...s({size:"sm"})},lg:{height:"$4",...s({size:"md"})}}}}),a=e.createContext({}),y=({size:t,children:r})=>{const o=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:o},r)},f=e.forwardRef(({size:t="md",...r},o)=>e.createElement(y,{size:t},e.createElement(h,{ref:o,size:t,...r}))),E=Object.assign(f,{Content:u,Icon:m});f.displayName="Chip";export{E as Chip,m as ChipIcon,a as ChipRootContext,y as ChipRootProvider,d as StyledChipContent,h as StyledRoot};
+import*as e from"react";import{Box as x}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as l}from"../icon/Icon.js";import{getTextVariant as s}from"../text/Text.js";import{styled as c}from"../../stitches.js";import{overrideStitchesVariantValue as g}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";const p={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},d=c("span",{display:"inline-flex",alignItems:"center",px:"$1",flexGrow:1,...p,"& > *:not(:last-child)":{mr:"$1"}}),z={sm:"sm",md:"sm",lg:"md"},m=t=>{const r=e.useContext(a),{size:o}=r,n=e.useMemo(()=>g(o,i=>z[i]),[o]);return e.createElement(l,{...t,size:n})},u=({children:t,...r})=>{const o=e.Children.toArray(t),n=o.length<=1;return e.createElement(d,{...r},o.map((i,$)=>!n&&typeof i=="string"?e.createElement(x,{as:"span",css:p,key:i},i):e.isValidElement(i)&&i.type===l?e.createElement(m,{key:`icon-${$}`,...i.props}):i))},h=c(C,{px:"$2",border:"1px solid",borderRadius:"$0",alignItems:"center",fontFamily:"$body",maxWidth:"100%",borderColor:"$primary800",color:"$primary900",bg:"$primary100","&[disabled]":{opacity:"0.3",pointerEvents:"none"},variants:{size:{sm:{height:"$2",...s({size:"sm"})},md:{height:"$3",...s({size:"sm"})},lg:{height:"$4",...s({size:"md"})}}}}),a=e.createContext({}),y=({size:t,children:r})=>{const o=e.useMemo(()=>({size:t}),[t]);return e.createElement(a.Provider,{value:o},r)},f=e.forwardRef(({size:t="md",...r},o)=>e.createElement(y,{size:t},e.createElement(h,{ref:o,size:t,...r}))),E=Object.assign(f,{Content:u,Icon:m});f.displayName="Chip";export{E as Chip,m as ChipIcon,a as ChipRootContext,y as ChipRootProvider,d as StyledChipContent,h as StyledRoot};
 //# sourceMappingURL=Chip.js.map

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  px: '$1',\n  flexGrow: 1,\n  ...overflowElipsis,\n  '& > *:not(:last-child)': {\n    mr: '$1'\n  }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <Box as=\"span\" css={overflowElipsis} key={child}>\n                {child}\n              </Box>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled(Flex, {\n  px: '$2',\n  border: '1px solid',\n  borderRadius: '$0',\n  alignItems: 'center',\n  fontFamily: '$body',\n  maxWidth: '100%',\n  borderColor: '$primary800',\n  color: '$primary900',\n  bg: '$primary100',\n  '&[data-disabled]': {\n    opacity: '0.3',\n    pointerEvents: 'none'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$2',\n        ...getTextVariant({ size: 'sm' })\n      },\n      md: {\n        height: '$3',\n        ...getTextVariant({ size: 'sm' })\n      },\n      lg: {\n        height: '$4',\n        ...getTextVariant({ size: 'md' })\n      }\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n  size,\n  children\n}: TChipRootProviderProps) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  })\n\nexport const Chip = Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["overflowElipsis","StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","Box","StyledRoot","Flex","getTextVariant","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"qWASA,MAAMA,EAAkB,CACtB,SAAU,SACV,aAAc,WACd,WAAY,QACd,EACaC,EAAoBC,EAAO,OAAQ,CAC9C,QAAS,cACT,WAAY,SACZ,GAAI,KACJ,SAAU,EACV,GAAGF,EACH,yBAA0B,CACxB,GAAI,IACN,CACF,CAAC,EAEKG,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,EAAU,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,GAAmB,GAAGe,CAAAA,EAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAACc,EAAA,CAAI,GAAG,OAAO,IAAKrB,EAAiB,IAAKmB,CACvCA,EAAAA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQgB,IAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaG,EAAapB,EAAOqB,EAAM,CACrC,GAAI,KACJ,OAAQ,YACR,aAAc,KACd,WAAY,SACZ,WAAY,QACZ,SAAU,OACV,YAAa,cACb,MAAO,cACP,GAAI,cACJ,mBAAoB,CAClB,QAAS,MACT,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,GAAGC,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,CACF,CACF,CACF,CAAC,EAKYhB,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1DkB,EAAmB,CAAC,CAC/B,KAAAhB,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMW,EAAQnB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOkB,GAC9BX,CACH,CAEJ,EAIMY,EACJpB,EAAM,WAAW,CAAC,CAAE,KAAAE,EAAO,QAASO,CAAK,EAAGY,IAExCrB,EAAA,cAACkB,GAAiB,KAAMhB,CAAAA,EACtBF,EAAA,cAACe,EAAA,CAAW,IAAKM,EAAK,KAAMnB,EAAO,GAAGO,EAAM,CAC9C,CAEH,EAEUa,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASb,EACT,KAAMV,CACR,CAAC,EAEDuB,EAAS,YAAc"}
+{"version":3,"file":"Chip.js","sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Box } from '~/components/box'\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { getTextVariant } from '~/components/text'\nimport { styled } from '~/stitches'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nconst overflowElipsis = {\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap'\n}\nexport const StyledChipContent = styled('span', {\n  display: 'inline-flex',\n  alignItems: 'center',\n  px: '$1',\n  flexGrow: 1,\n  ...overflowElipsis,\n  '& > *:not(:last-child)': {\n    mr: '$1'\n  }\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.useContext(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = React.useMemo(\n    () => overrideStitchesVariantValue(size, (s) => toIconSize[s]),\n    [size]\n  )\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child, index) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <Box as=\"span\" css={overflowElipsis} key={child}>\n                {child}\n              </Box>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            return <ChipIcon key={`icon-${index}`} {...child.props} />\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled(Flex, {\n  px: '$2',\n  border: '1px solid',\n  borderRadius: '$0',\n  alignItems: 'center',\n  fontFamily: '$body',\n  maxWidth: '100%',\n  borderColor: '$primary800',\n  color: '$primary900',\n  bg: '$primary100',\n  '&[disabled]': {\n    opacity: '0.3',\n    pointerEvents: 'none'\n  },\n  variants: {\n    size: {\n      sm: {\n        height: '$2',\n        ...getTextVariant({ size: 'sm' })\n      },\n      md: {\n        height: '$3',\n        ...getTextVariant({ size: 'sm' })\n      },\n      lg: {\n        height: '$4',\n        ...getTextVariant({ size: 'md' })\n      }\n    }\n  }\n})\n\nexport type TChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type TChipRootProviderProps = TChipRootContext\n\nexport const ChipRootContext = React.createContext<TChipRootContext>({})\n\nexport const ChipRootProvider = ({\n  size,\n  children\n}: TChipRootProviderProps) => {\n  const value = React.useMemo<TChipRootContext>(() => ({ size }), [size])\n  return (\n    <ChipRootContext.Provider value={value}>\n      {children}\n    </ChipRootContext.Provider>\n  )\n}\n\nexport type TChipRootProps = TChipRootProviderProps\n\nconst ChipRoot: React.ForwardRefExoticComponent<TChipRootProps> =\n  React.forwardRef(({ size = 'md', ...rest }, ref) => {\n    return (\n      <ChipRootProvider size={size}>\n        <StyledRoot ref={ref} size={size} {...rest} />\n      </ChipRootProvider>\n    )\n  })\n\nexport const Chip = Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n\nChipRoot.displayName = 'Chip'\n"],"names":["overflowElipsis","StyledChipContent","styled","toIconSize","ChipIcon","props","rootContext","React","ChipRootContext","size","iconSize","overrideStitchesVariantValue","s","Icon","ChipContent","children","rest","childrenArray","isSingleChild","child","index","Box","StyledRoot","Flex","getTextVariant","ChipRootProvider","value","ChipRoot","ref","Chip"],"mappings":"qWASA,MAAMA,EAAkB,CACtB,SAAU,SACV,aAAc,WACd,WAAY,QACd,EACaC,EAAoBC,EAAO,OAAQ,CAC9C,QAAS,cACT,WAAY,SACZ,GAAI,KACJ,SAAU,EACV,GAAGF,EACH,yBAA0B,CACxB,GAAI,IACN,CACF,CAAC,EAEKG,EAAa,CAAE,GAAI,KAAM,GAAI,KAAM,GAAI,IAAK,EAErCC,EAAYC,GAA6C,CACpE,MAAMC,EAAcC,EAAM,WAAWC,CAAe,EAC9C,CAAE,KAAAC,CAAK,EAAIH,EACXI,EAAWH,EAAM,QACrB,IAAMI,EAA6BF,EAAOG,GAAMT,EAAWS,EAAE,EAC7D,CAACH,CAAI,CACP,EACA,OAAOF,EAAA,cAACM,EAAA,CAAM,GAAGR,EAAO,KAAMK,EAAU,CAC1C,EAEMI,EAAc,CAAC,CAAE,SAAAC,KAAaC,CAAK,IAAM,CAC7C,MAAMC,EAAgBV,EAAM,SAAS,QAAQQ,CAAQ,EAC/CG,EAAgBD,EAAc,QAAU,EAC9C,OACEV,EAAA,cAACN,GAAmB,GAAGe,CAAAA,EAEnBC,EAAc,IAAI,CAACE,EAAOC,IACpB,CAACF,GAAiB,OAAOC,GAAU,SAEnCZ,EAAA,cAACc,EAAA,CAAI,GAAG,OAAO,IAAKrB,EAAiB,IAAKmB,CACvCA,EAAAA,CACH,EAEAZ,EAAM,eAAeY,CAAK,GAAKA,EAAM,OAASN,EACzCN,EAAA,cAACH,EAAA,CAAS,IAAK,QAAQgB,IAAU,GAAGD,EAAM,KAAO,CAAA,EAEnDA,CACR,CAEL,CAEJ,EAEaG,EAAapB,EAAOqB,EAAM,CACrC,GAAI,KACJ,OAAQ,YACR,aAAc,KACd,WAAY,SACZ,WAAY,QACZ,SAAU,OACV,YAAa,cACb,MAAO,cACP,GAAI,cACJ,cAAe,CACb,QAAS,MACT,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,GAAGC,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,EACA,GAAI,CACF,OAAQ,KACR,GAAGA,EAAe,CAAE,KAAM,IAAK,CAAC,CAClC,CACF,CACF,CACF,CAAC,EAKYhB,EAAkBD,EAAM,cAAgC,CAAA,CAAE,EAE1DkB,EAAmB,CAAC,CAC/B,KAAAhB,EACA,SAAAM,CACF,IAA8B,CAC5B,MAAMW,EAAQnB,EAAM,QAA0B,KAAO,CAAE,KAAAE,CAAK,GAAI,CAACA,CAAI,CAAC,EACtE,OACEF,EAAA,cAACC,EAAgB,SAAhB,CAAyB,MAAOkB,GAC9BX,CACH,CAEJ,EAIMY,EACJpB,EAAM,WAAW,CAAC,CAAE,KAAAE,EAAO,QAASO,CAAK,EAAGY,IAExCrB,EAAA,cAACkB,GAAiB,KAAMhB,CAAAA,EACtBF,EAAA,cAACe,EAAA,CAAW,IAAKM,EAAK,KAAMnB,EAAO,GAAGO,EAAM,CAC9C,CAEH,EAEUa,EAAO,OAAO,OAAOF,EAAU,CAC1C,QAASb,EACT,KAAMV,CACR,CAAC,EAEDuB,EAAS,YAAc"}

package/dist/components/chip/ChipGroup.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Flex } from '../../components/flex';
-declare type TChipGroupProps = {
+type TChipGroupProps = {
     gap: 1 | 2 | 3;
 };
 export declare const ChipGroup: React.ForwardRefExoticComponent<TChipGroupProps & React.ComponentProps<typeof Flex> & {