@atom-learning/components 3.27.1 → 3.27.2

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n background: 'white',\n color: '$grey1000',\n border: '1px solid $grey800',\n borderRadius: '$0',\n transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n width: '100%',\n '&:focus-within': {\n borderColor: '$blue800'\n },\n variants: {\n size: {\n sm: {\n height: '$3'\n },\n md: {\n height: '$4'\n },\n lg: {\n height: '$5'\n },\n xl: {\n height: '$6'\n }\n },\n disabled: {\n true: disabledStyle\n },\n state: {\n error: {\n borderColor: '$danger'\n }\n }\n }\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n // unsets\n appearance: 'none',\n border: 'none',\n background: 'none',\n backgroundImage: 'none',\n backgroundColor: 'transparent',\n boxShadow: 'none', // prevent default iOS default styling\n boxSizing: 'border-box',\n '&:focus': {\n outline: 'none'\n },\n //\n px: '$3',\n size: '100%'\n})\n\nexport type InputTextProps = Omit<\n React.ComponentProps<typeof StyledInputText>,\n 'size' | 'type' | 'as'\n> & {\n size: React.ComponentProps<typeof Text>['size']\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}\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef(\n (\n { type = 'text', css, size, ...rest }: InputTextProps,\n ref: React.ForwardedRef<HTMLInputElement>\n ) => {\n const textSize = React.useMemo(\n () => overrideStitchesVariantValue(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}\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'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n}\n\nexport const Input = React.forwardRef(\n (\n { size = 'md', state, disabled, css, ...rest }: InputProps,\n ref: React.ForwardedRef<HTMLInputElement>\n ) => {\n return (\n <InputBackground size={size} disabled={disabled} state={state} css={css}>\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,WAAY,QACZ,MAAO,YACP,OAAQ,qBACR,aAAc,KACd,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,YAAa,UACf,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAYC,EAAM,WAC7B,CACE,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EACpCC,IACG,CACH,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CAAAA,CACN,CAEJ,CACF,EAEAL,EAAU,YAAc,YAWX,MAAAU,EAAQT,EAAM,WACzB,CACE,CAAE,KAAAG,EAAO,KAAM,MAAAO,EAAO,SAAAC,EAAU,IAAAT,KAAQE,CAAK,EAC7CC,IAGEL,EAAA,cAACT,EAAgB,CAAA,KAAMY,EAAM,SAAUQ,EAAU,MAAOD,EAAO,IAAKR,CAClEF,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUM,EAAW,GAAGP,CAAAA,CAAM,CACjE,CAGN,EAEAK,EAAM,YAAc"}
1
+ {"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n background: 'white',\n color: '$grey1000',\n border: '1px solid $grey800',\n borderRadius: '$0',\n transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n width: '100%',\n '&:focus-within': {\n borderColor: '$blue800'\n },\n variants: {\n size: {\n sm: {\n height: '$3'\n },\n md: {\n height: '$4'\n },\n lg: {\n height: '$5'\n },\n xl: {\n height: '$6'\n }\n },\n disabled: {\n true: disabledStyle\n },\n state: {\n error: {\n borderColor: '$danger'\n }\n }\n }\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n // unsets\n appearance: 'none',\n border: 'none',\n background: 'none',\n backgroundImage: 'none',\n backgroundColor: 'transparent',\n boxShadow: 'none', // prevent default iOS default styling\n boxSizing: 'border-box',\n '&:focus': {\n outline: 'none'\n },\n //\n px: '$3',\n size: '100%'\n})\n\nexport type InputTextProps = Omit<\n React.ComponentProps<typeof StyledInputText>,\n 'size' | 'type' | 'as'\n> & {\n size: React.ComponentProps<typeof Text>['size']\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}\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStitchesVariantValue(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}\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'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n React.forwardRef(({ size = 'md', state, disabled, css, ...rest }, ref) => {\n return (\n <InputBackground size={size} disabled={disabled} state={state} css={css}>\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n })\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,WAAY,QACZ,MAAO,YACP,OAAQ,qBACR,aAAc,KACd,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,YAAa,UACf,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,EACA,GAAI,CACF,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CACL,YAAa,SACf,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CAAAA,CACN,CAEJ,CAAC,EAEHL,EAAU,YAAc,YAWX,MAAAU,EACXT,EAAM,WAAW,CAAC,CAAE,KAAAG,EAAO,KAAM,MAAAO,EAAO,SAAAC,EAAU,IAAAT,KAAQE,CAAK,EAAGC,IAE9DL,EAAA,cAACT,EAAgB,CAAA,KAAMY,EAAM,SAAUQ,EAAU,MAAOD,EAAO,IAAKR,CAClEF,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUM,EAAW,GAAGP,CAAAA,CAAM,CACjE,CAEH,EAEHK,EAAM,YAAc"}