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

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as f}from"../../stitches.js";import{Icon as r}from"../icon/Icon.js";import{StyledItem as h}from"./ToggleGroupItem.js";const s={sm:"32px",md:"40px",lg:"48px"},u={sm:"$4",md:"$5",lg:"$5"},x={sm:"$2",md:"$3",lg:"$3"},m=n=>({fontSize:`$${n}`,px:u[n],minHeight:s[n],"& > *:not(:last-child)":{mr:x[n]}}),d=f(h,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",variants:{size:{sm:m("sm"),md:m("md"),lg:m("lg")},isIconOnly:{true:{}},theme:{standard:{},modern:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:s.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:s.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:s.lg,p:0}}]}),z=t.forwardRef(({size:n="md",theme:p="standard",children:a,...c},y)=>{var o;const i=t.Children.toArray(a),l=i.length<=1,g=l&&t.isValidElement(i[0])&&((o=i[0])==null?void 0:o.type)===r;return t.createElement(d,{ref:y,size:n,isIconOnly:g,theme:p,...c},i.map(e=>!l&&(typeof e=="string"||typeof e=="number")?t.createElement("span",{key:e},e):t.isValidElement(e)&&(e==null?void 0:e.type)===r?t.cloneElement(e,{...e.props,size:n}):e))});export{d as StyledButton,z as ToggleGroupButton};
+import*as n from"react";import{styled as y}from"../../styled.js";import{Icon as i}from"../icon/Icon.js";import{ToggleGroupItem as f}from"./ToggleGroupItem.js";const l=y(f,{base:["grow","flex","items-center","justify-center","font-semibold","leading-[1]","py-1"],variants:{size:{sm:["*:not-last:mr-2","min-h-8","px-4","text-sm"],md:["*:not-last:mr-3","min-h-10","px-8","text-md"],lg:["*:not-last:mr-3","min-h-12","px-8","text-lg"]},isIconOnly:{true:[]},theme:{standard:[],modern:[]}},compoundVariants:[{isIconOnly:!0,size:"sm",class:["min-w-8","p-0"]},{isIconOnly:!0,size:"md",class:["min-w-10","p-0"]},{isIconOnly:!0,size:"lg",class:["min-w-12","p-0"]},{isIconOnly:!0,size:"sm",theme:"modern",class:["min-w-10","p-0"]},{isIconOnly:!0,size:"md",theme:"modern",class:["min-w-12","p-0"]},{isIconOnly:!0,size:"lg",theme:"modern",class:["min-w-15","p-0"]}]}),g=n.forwardRef(({size:s="md",theme:r="standard",children:a,...p},d)=>{var m;const t=n.Children.toArray(a),o=t.length<=1,c=o&&n.isValidElement(t[0])&&((m=t[0])==null?void 0:m.type)===i;return n.createElement(l,{ref:d,size:s,isIconOnly:c,theme:r,...p},t.map(e=>!o&&(typeof e=="string"||typeof e=="number")?n.createElement("span",{key:e},e):n.isValidElement(e)&&(e==null?void 0:e.type)===i?n.cloneElement(e,{...e.props,size:s}):e))});export{l as StyledButton,g as ToggleGroupButton};
 //# sourceMappingURL=ToggleGroupButton.js.map

package/dist/components/toggle-group/ToggleGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupButton.js","sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { StyledItem } from './ToggleGroupItem'\n\nconst minHeight = {\n  sm: '32px',\n  md: '40px',\n  lg: '48px'\n}\n\nconst px = {\n  sm: '$4',\n  md: '$5',\n  lg: '$5'\n}\n\nconst spacingBetweenElements = {\n  sm: '$2',\n  md: '$3',\n  lg: '$3'\n}\n\nconst getSizeVariant = (size: string) => ({\n  fontSize: `$${size}`,\n  px: px[size],\n  minHeight: minHeight[size],\n  '& > *:not(:last-child)': {\n    mr: spacingBetweenElements[size]\n  }\n})\n\nexport const StyledButton = styled(StyledItem, {\n  flexGrow: 1,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontWeight: 600,\n  lineHeight: 1,\n  py: '$1',\n  variants: {\n    size: {\n      sm: getSizeVariant('sm'),\n      md: getSizeVariant('md'),\n      lg: getSizeVariant('lg')\n    },\n    isIconOnly: {\n      true: {}\n    },\n    theme: {\n      standard: {},\n      modern: {}\n    }\n  },\n  compoundVariants: [\n    {\n      isIconOnly: true,\n      size: 'sm',\n      css: {\n        minWidth: minHeight.sm,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      css: {\n        minWidth: minHeight.md,\n        p: 0\n      }\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      css: {\n        minWidth: minHeight.lg,\n        p: 0\n      }\n    }\n  ]\n})\n\nexport const ToggleGroupButton: React.ForwardRefExoticComponent<\n  React.ComponentProps<typeof StyledButton>\n> = React.forwardRef(\n  ({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n    const childrenArray = React.Children.toArray(children)\n    const isSingleChild = childrenArray.length <= 1\n    const isIconOnly =\n      isSingleChild &&\n      React.isValidElement(childrenArray[0]) &&\n      childrenArray[0]?.type === Icon\n\n    return (\n      <StyledButton\n        ref={ref}\n        size={size}\n        isIconOnly={isIconOnly}\n        theme={theme}\n        {...rest}\n      >\n        {\n          childrenArray.map((child) => {\n            if (\n              !isSingleChild &&\n              (typeof child === 'string' || typeof child === 'number')\n            )\n              return <span key={child}>{child}</span>\n            if (React.isValidElement(child)) {\n              if (child?.type === Icon)\n                return React.cloneElement(child, { ...child.props, size })\n            }\n            return child\n          }) as React.ReactElement[]\n        }\n      </StyledButton>\n    )\n  }\n)\n"],"names":["minHeight","px","spacingBetweenElements","getSizeVariant","size","StyledButton","styled","StyledItem","ToggleGroupButton","React","theme","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"4JAOA,MAAMA,EAAY,CAChB,GAAI,OACJ,GAAI,OACJ,GAAI,MACN,EAEMC,EAAK,CACT,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAyB,CAC7B,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEMC,EAAkBC,IAAkB,CACxC,SAAU,IAAIA,IACd,GAAIH,EAAGG,GACP,UAAWJ,EAAUI,GACrB,yBAA0B,CACxB,GAAIF,EAAuBE,EAC7B,CACF,GAEaC,EAAeC,EAAOC,EAAY,CAC7C,SAAU,EACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,WAAY,IACZ,WAAY,EACZ,GAAI,KACJ,SAAU,CACR,KAAM,CACJ,GAAIJ,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,EACvB,GAAIA,EAAe,IAAI,CACzB,EACA,WAAY,CACV,KAAM,CACR,CAAA,EACA,MAAO,CACL,SAAU,CAAA,EACV,OAAQ,CACV,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUH,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,EACA,CACE,WAAY,GACZ,KAAM,KACN,IAAK,CACH,SAAUA,EAAU,GACpB,EAAG,CACL,CACF,CACF,CACF,CAAC,EAEYQ,EAETC,EAAM,WACR,CAAC,CAAE,KAAAL,EAAO,KAAM,MAAAM,EAAQ,WAAY,SAAAC,KAAaC,CAAK,EAAGC,IAAQ,CAvFnE,IAAAC,EAwFI,MAAMC,EAAgBN,EAAM,SAAS,QAAQE,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,GACAP,EAAM,eAAeM,EAAc,EAAE,KACrCD,EAAAC,EAAc,KAAd,KAAA,OAAAD,EAAkB,QAASI,EAE7B,OACET,EAAA,cAACJ,EACC,CAAA,IAAKQ,EACL,KAAMT,EACN,WAAYa,EACZ,MAAOP,EACN,GAAGE,CAGFG,EAAAA,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,UAExCV,EAAA,cAAC,OAAA,CAAK,IAAKU,CAAAA,EAAQA,CAAM,EAC9BV,EAAM,eAAeU,CAAK,IACxBA,GAAA,KAAA,OAAAA,EAAO,QAASD,EACXT,EAAM,aAAaU,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAf,CAAK,CAAC,EAEtDe,CACR,CAEL,CAEJ,CACF"}
+{"version":3,"file":"ToggleGroupButton.js","sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Icon } from '../icon'\nimport { ToggleGroupItem } from './ToggleGroupItem'\n\nexport const StyledButton = styled(ToggleGroupItem, {\n  base: [\n    'grow',\n    'flex',\n    'items-center',\n    'justify-center',\n    'font-semibold',\n    'leading-[1]',\n    'py-1'\n  ],\n  variants: {\n    size: {\n      sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n      md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n      lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n    },\n    isIconOnly: {\n      true: []\n    },\n    theme: {\n      standard: [],\n      modern: []\n    }\n  },\n  compoundVariants: [\n    {\n      isIconOnly: true,\n      size: 'sm',\n      class: ['min-w-8', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      class: ['min-w-10', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      class: ['min-w-12', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'sm',\n      theme: 'modern',\n      class: ['min-w-10', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'md',\n      theme: 'modern',\n      class: ['min-w-12', 'p-0']\n    },\n    {\n      isIconOnly: true,\n      size: 'lg',\n      theme: 'modern',\n      class: ['min-w-15', 'p-0']\n    }\n  ]\n})\n\nexport const ToggleGroupButton = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentProps<typeof StyledButton>\n>(({ size = 'md', theme = 'standard', children, ...rest }, ref) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      theme={theme}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (React.isValidElement(child)) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, { ...child.props, size })\n          }\n          return child\n        }) as React.ReactElement[]\n      }\n    </StyledButton>\n  )\n})\n"],"names":["StyledButton","styled","ToggleGroupItem","ToggleGroupButton","React","size","theme","children","rest","ref","_a","childrenArray","isSingleChild","isIconOnly","Icon","child"],"mappings":"+JAOO,MAAMA,EAAeC,EAAOC,EAAiB,CAClD,KAAM,CACJ,OACA,OACA,eACA,iBACA,gBACA,cACA,MACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,kBAAmB,UAAW,OAAQ,SAAS,EACpD,GAAI,CAAC,kBAAmB,WAAY,OAAQ,SAAS,EACrD,GAAI,CAAC,kBAAmB,WAAY,OAAQ,SAAS,CACvD,EACA,WAAY,CACV,KAAM,CAAA,CACR,EACA,MAAO,CACL,SAAU,CAAA,EACV,OAAQ,CACV,CAAA,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,KACN,MAAO,CAAC,UAAW,KAAK,CAC1B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,CAAC,WAAY,KAAK,CAC3B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,CAAC,WAAY,KAAK,CAC3B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,MAAO,CAAC,WAAY,KAAK,CAC3B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,MAAO,CAAC,WAAY,KAAK,CAC3B,EACA,CACE,WAAY,GACZ,KAAM,KACN,MAAO,SACP,MAAO,CAAC,WAAY,KAAK,CAC3B,CACF,CACF,CAAC,EAEYC,EAAoBC,EAAM,WAGrC,CAAC,CAAE,KAAAC,EAAO,KAAM,MAAAC,EAAQ,WAAY,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAAQ,CAvEnE,IAAAC,EAwEE,MAAMC,EAAgBP,EAAM,SAAS,QAAQG,CAAQ,EAC/CK,EAAgBD,EAAc,QAAU,EACxCE,EACJD,GACAR,EAAM,eAAeO,EAAc,CAAC,CAAC,KACrCD,EAAAC,EAAc,CAAC,IAAf,KAAA,OAAAD,EAAkB,QAASI,EAE7B,OACEV,EAAA,cAACJ,EACC,CAAA,IAAKS,EACL,KAAMJ,EACN,WAAYQ,EACZ,MAAOP,EACN,GAAGE,CAGFG,EAAAA,EAAc,IAAKI,GAEf,CAACH,IACA,OAAOG,GAAU,UAAY,OAAOA,GAAU,UAExCX,EAAA,cAAC,OAAK,CAAA,IAAKW,CAAQA,EAAAA,CAAM,EAC9BX,EAAM,eAAeW,CAAK,IACxBA,GAAA,KAAAA,OAAAA,EAAO,QAASD,EACXV,EAAM,aAAaW,EAAO,CAAE,GAAGA,EAAM,MAAO,KAAAV,CAAK,CAAC,EAEtDU,CACR,CAEL,CAEJ,CAAC"}