@atom-learning/components 6.0.0-beta.43 → 6.0.0-beta.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/input/Input.js +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/radio-button/RadioButton.js +1 -1
- package/dist/components/radio-button/RadioButton.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as r from"react";import{styled as l}from"../../styled.js";import{overrideStyledVariantValue as
|
|
1
|
+
import*as r from"react";import{styled as l}from"../../styled.js";import{overrideStyledVariantValue as m}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Text as b}from"../text/Text.js";const d=l("div",{base:["flex","text-grey-1000","transition-[background,border-color]","duration-100","ease-out","w-full"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-blue-800","rounded-md"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1","rounded-md"]},size:{sm:["h-8"],md:["h-10"],lg:["h-12"],xl:["h-16"]},disabled:{true:["cursor-not-allowed","opacity-30"]},state:{error:[]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]});d.displayName="InputBackground";const f=l(b,{base:["appearance-none","border-none","bg-none","bg-transparent","shadow-none","box-border","focus:outline-none","px-3","size-full","placeholder:opacity-100","placeholder:text-grey-700"]}),g={sm:"sm",md:"md",lg:"md",xl:"lg"},i=r.forwardRef(({type:e="text",size:t,...o},n)=>{const a=r.useMemo(()=>m(t,s=>g[s]),[t]);return r.createElement(f,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:a,...o})});i.displayName="InputText";const u=r.forwardRef(({className:e,size:t="md",appearance:o="standard",state:n,disabled:a,style:s,...c},p)=>r.createElement(d,{size:t,appearance:o,disabled:a,state:n,className:e,style:s},r.createElement(i,{size:t,ref:p,disabled:a,...c})));u.displayName="Input";export{u as Input,d as InputBackground,i as InputText};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background,border-color]',\n 'duration-100',\n 'ease-out',\n 'w-full'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-blue-800',\n 'rounded-md'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus-within:outline-2',\n 'focus-within:outline-blue-800',\n 'focus-within:outline-offset-1',\n 'focus-within:outline-solid',\n 'focus-within:z-1',\n 'rounded-md'\n ]\n },\n size: {\n sm: ['h-8'],\n md: ['h-10'],\n lg: ['h-12'],\n xl: ['h-16']\n },\n disabled: {\n true: ['cursor-not-allowed', 'opacity-30']\n },\n state: {\n error: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus-within:outline-danger']\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n base: [\n 'appearance-none',\n 'border-none',\n 'bg-none',\n 'bg-transparent',\n 'shadow-none',\n 'box-border',\n 'focus:outline-none',\n 'px-3',\n 'size-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ]\n})\n\nexport type InputTextProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> &\n Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as'> & {\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n as?: never\n disabled?: boolean\n }\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n ({ type = 'text', size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...(rest as any)}\n />\n )\n }\n)\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' | 'state' | 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n disabled?: boolean\n name?: string\n readOnly?: boolean\n value?: string | number\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n style,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n className={className}\n style={style}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","StyledInputText","Text","toTextSize","InputText","React","type","size","rest","ref","textSize","overrideStyledVariantValue","s","Input","className","appearance","state","disabled","style"],"mappings":"iOAQa,MAAAA,EAAkBC,EAAO,MAAO,CAC3C,KAAM,CACJ,OACA,iBACA,uCACA,eACA,WACA,QACF,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,+BACA,YACF,EACA,OAAQ,CACN,cACA,cACA,yBACA,gCACA,gCACA,6BACA,mBACA,YACF,CACF,EACA,KAAM,CACJ,GAAI,CAAC,KAAK,EACV,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,SAAU,CACR,KAAM,CAAC,qBAAsB,YAAY,CAC3C,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,6BAA6B,CAC1D,CACF,CACF,CAAC,EAEDD,EAAgB,YAAc,kBAE9B,MAAME,EAAkBD,EAAOE,EAAM,CACnC,KAAM,CACJ,kBACA,cACA,UACA,iBACA,cACA,aACA,qBACA,OACA,YACA,0BACA,2BACF,CACF,CAAC,EAcKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAYC,EAAM,WAC7B,CAAC,CAAE,KAAAC,EAAO,OAAQ,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAAQ,CACzC,MAAMC,EAAWL,EAAM,QACrB,IAAMM,EAA2BJ,EAAOK,GAAMT,EAAWS,CAAC,CAAC,EAC3D,CAACL,CAAI,CACP,EAEA,OACEF,EAAA,cAACJ,EAAA,CACC,IAAKQ,EACL,GAAG,QACH,KAAMH,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMI,EACL,GAAIF,CAAAA,CACP,CAEJ,CACF,EAEAJ,EAAU,YAAc,YAiBX,MAAAS,EAAQR,EAAM,WACzB,CACE,CACE,UAAAS,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,GAAGV,CACL,EACAC,IAGEJ,EAAA,cAACN,EACC,CAAA,KAAMQ,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,UAAWF,EACX,MAAOI,CAAAA,EAEPb,EAAA,cAACD,EAAU,CAAA,KAAMG,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAM,CAAA,CACjE,CAGN,EAEAK,EAAM,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as t from"@radix-ui/react-radio-group";import*as
|
|
1
|
+
import*as t from"@radix-ui/react-radio-group";import*as a from"react";import{styled as r}from"../../styled.js";const o=r(t.Item,{base:["items-center","appearance-none","bg-transparent","border","border-grey-800","rounded-full","text-white","cursor-pointer","flex","justify-center","p-0","size-4","transition-all","duration-50","ease-out","focus:outline-2","focus:outline-offset-1","focus:outline-primary-800","focus:outline-solid","data-[state=checked]:bg-primary-800","data-[state=checked]:border-primary-800","disabled:bg-grey-200","disabled:border-grey-800","disabled:cursor-not-allowed","disabled:text-grey-800","disabled:data-[state=checked]:bg-grey-800","disabled:data-[state=checked]:border-grey-800"],variants:{size:{md:["size-4"],lg:["-mt-1","size-6"]}}},{enabledResponsiveVariants:!0}),d=r(t.Indicator,{base:["size-1.5","rounded-full","bg-current","absolute"],variants:{size:{md:["size-1.5"],lg:["size-3"]}}},{enabledResponsiveVariants:!0}),s=({size:e,...i})=>a.createElement(o,{...i,size:e},a.createElement(d,{size:e}));s.displayName="RadioButton";export{s as RadioButton};
|
|
2
2
|
//# sourceMappingURL=RadioButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n RadioGroup.Item,\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-transparent',\n 'border',\n 'border-grey-800',\n 'rounded-full',\n 'text-white',\n 'cursor-pointer',\n 'flex',\n 'justify-center',\n 'p-0',\n 'size-4',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'focus:outline-2',\n 'focus:outline-offset-1',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'disabled:bg-grey-200',\n 'disabled:border-grey-800',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800'\n ],\n variants: {\n size: {\n md: ['size-4'],\n lg: ['-mt-1', 'size-6']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n RadioGroup.Indicator,\n {\n base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n variants: {\n size: {\n md: ['size-1.5'],\n lg: ['size-3']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n React.ComponentProps<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"+GAMA,MAAMA,EAAoBC,EACxBC,EAAW,KACX,CACE,KAAM,CACJ,eACA,kBACA,iBACA,SACA,kBACA,eACA,aACA,iBACA,OACA,iBACA,MACA,SACA,iBACA,cACA,WACA,kBACA,yBACA,4BACA,sBACA,sCACA,0CACA,uBACA,2BACA,8BACA,
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(\n RadioGroup.Item,\n {\n base: [\n 'items-center',\n 'appearance-none',\n 'bg-transparent',\n 'border',\n 'border-grey-800',\n 'rounded-full',\n 'text-white',\n 'cursor-pointer',\n 'flex',\n 'justify-center',\n 'p-0',\n 'size-4',\n 'transition-all',\n 'duration-50',\n 'ease-out',\n 'focus:outline-2',\n 'focus:outline-offset-1',\n 'focus:outline-primary-800',\n 'focus:outline-solid',\n 'data-[state=checked]:bg-primary-800',\n 'data-[state=checked]:border-primary-800',\n 'disabled:bg-grey-200',\n 'disabled:border-grey-800',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800',\n 'disabled:data-[state=checked]:bg-grey-800',\n 'disabled:data-[state=checked]:border-grey-800'\n ],\n variants: {\n size: {\n md: ['size-4'],\n lg: ['-mt-1', 'size-6']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n RadioGroup.Indicator,\n {\n base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n variants: {\n size: {\n md: ['size-1.5'],\n lg: ['size-3']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n React.ComponentProps<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"+GAMA,MAAMA,EAAoBC,EACxBC,EAAW,KACX,CACE,KAAM,CACJ,eACA,kBACA,iBACA,SACA,kBACA,eACA,aACA,iBACA,OACA,iBACA,MACA,SACA,iBACA,cACA,WACA,kBACA,yBACA,4BACA,sBACA,sCACA,0CACA,uBACA,2BACA,8BACA,yBACA,4CACA,+CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,QAAQ,EACb,GAAI,CAAC,QAAS,QAAQ,CACxB,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAEMC,EAAkBF,EACtBC,EAAW,UACX,CACE,KAAM,CAAC,WAAY,eAAgB,aAAc,UAAU,EAC3D,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,UAAU,EACf,GAAI,CAAC,QAAQ,CACf,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAWaE,EAAc,CAAC,CAAE,KAAAC,EAAM,GAAGC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,CAClCE,EAAAA,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAM,CAAA,CAC/B,EAIJD,EAAY,YAAc"}
|