@atom-learning/components 3.12.8 → 3.13.0
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/CHANGELOG.md +3 -5
- package/dist/components/banner/banner-regular/BannerRegular.d.ts +2 -2
- package/dist/components/banner/banner-slim/BannerSlim.d.ts +2 -2
- package/dist/components/button/Button.d.ts +1 -1
- package/dist/components/button/Button.js +1 -1
- package/dist/components/button/Button.js.map +1 -1
- package/dist/components/data-table/DataTable.d.ts +1 -1
- package/dist/components/input/Input.d.ts +1 -1
- package/dist/components/input/Input.js +1 -1
- package/dist/components/input/Input.js.map +1 -1
- package/dist/components/stepper/Stepper.d.ts +4 -4
- package/dist/docgen.json +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
# [3.13.0](https://github.com/Atom-Learning/components/compare/v3.12.8...v3.13.0) (2024-03-07)
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
###
|
|
4
|
+
### Features
|
|
5
5
|
|
|
6
|
-
* add
|
|
7
|
-
* ensure isAllChecked is correctly calculated ([b1c6170](https://github.com/Atom-Learning/components/commit/b1c6170527c0bf41f7ee0153f8408cb3fe3eb555))
|
|
8
|
-
* snapshots ([b3b892e](https://github.com/Atom-Learning/components/commit/b3b892ed0274950100120dc11a7fcf8b803aa461))
|
|
6
|
+
* add xl sizes B2B-679 ([b74cd60](https://github.com/Atom-Learning/components/commit/b74cd60ab172188f21ab7c94ff5465d3da4e8a62))
|
|
9
7
|
|
|
10
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
11
9
|
|
|
@@ -2054,7 +2054,7 @@ export declare const BannerRegular: {
|
|
|
2054
2054
|
}, "appearance" | "size" | "css" | "theme" | "isLoading" | "fullWidth"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
2055
2055
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
2056
2056
|
appearance?: "outline" | "solid" | undefined;
|
|
2057
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
2057
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
2058
2058
|
isLoading?: boolean | "true" | undefined;
|
|
2059
2059
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
2060
2060
|
}, {
|
|
@@ -2392,7 +2392,7 @@ export declare const BannerRegular: {
|
|
|
2392
2392
|
}, "appearance" | "size" | "theme" | "children" | "as" | keyof import("../../../types").NavigatorActions | "isLoading" | "fullWidth"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
2393
2393
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
2394
2394
|
appearance?: "outline" | "solid" | undefined;
|
|
2395
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
2395
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
2396
2396
|
isLoading?: boolean | "true" | undefined;
|
|
2397
2397
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
2398
2398
|
}, {
|
|
@@ -1372,7 +1372,7 @@ export declare const BannerSlim: {
|
|
|
1372
1372
|
}, "appearance" | "size" | "css" | "theme" | "isLoading" | "fullWidth"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
1373
1373
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
1374
1374
|
appearance?: "outline" | "solid" | undefined;
|
|
1375
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
1375
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
1376
1376
|
isLoading?: boolean | "true" | undefined;
|
|
1377
1377
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
1378
1378
|
}, {
|
|
@@ -1710,7 +1710,7 @@ export declare const BannerSlim: {
|
|
|
1710
1710
|
}, "appearance" | "size" | "theme" | "children" | "as" | keyof import("../../../types").NavigatorActions | "isLoading" | "fullWidth"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
1711
1711
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
1712
1712
|
appearance?: "outline" | "solid" | undefined;
|
|
1713
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
1713
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
1714
1714
|
isLoading?: boolean | "true" | undefined;
|
|
1715
1715
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
1716
1716
|
}, {
|
|
@@ -5,7 +5,7 @@ import { Override } from '../../utilities';
|
|
|
5
5
|
export declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
|
|
6
6
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
7
7
|
appearance?: "outline" | "solid" | undefined;
|
|
8
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
8
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
9
9
|
isLoading?: boolean | "true" | undefined;
|
|
10
10
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
11
11
|
}, {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{opacify as s}from"color2k";import*as a from"react";import{StyledIcon as
|
|
1
|
+
import{opacify as s}from"color2k";import*as a from"react";import{StyledIcon as l}from"../icon/Icon.js";import{Loader as y}from"../loader/Loader.js";import{styled as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as d}from"../../utilities/style/disabledStyle.js";import{getExternalAnchorProps as u}from"../../utilities/uri/index.js";const p=(e,r,i,t)=>({theme:e,appearance:"outline",css:{border:"1px solid",borderColor:"currentColor",color:r,"&[disabled]":d,"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:i},"&:not([disabled]):active":{color:t}}}),n=(e,r,i,t,o="white")=>({theme:e,appearance:"solid",css:{bg:r,color:o,"&[disabled]":d,"&:not([disabled]):hover, &:not([disabled]):focus":{bg:i,color:o},"&:not([disabled]):active":{bg:t}}}),$=c("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content","&[disabled]":d,variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4",gap:"$2",[`& ${l}`]:{size:16}},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5",gap:"$3",[`& ${l}`]:{size:20}},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5",gap:"$3",[`& ${l}`]:{size:22}},xl:{fontSize:"$lg",lineHeight:1.5,height:"$6",px:"$5",gap:"$3",[`& ${l}`]:{size:22}}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"},false:{width:"max-content"}}},compoundVariants:[n("primary","$primary800","$primary900","$primary1000"),n("secondary","$primary1000","$primary1100","$primary1200"),n("success","$success","$successMid","$successDark"),n("warning","$warning","$warningMid","$warningDark","$tonal500"),n("danger","$danger","$dangerMid","$dangerDark"),n("neutral","white",s("white",-.1),s("white",-.25),"$primary800"),p("primary","$primary800","$primary900","$primary1000"),p("secondary","$primary1000","$primary1100","$primary1200"),p("neutral","white",s("white",-.2),s("white",-.35))],defaultVariants:{appearance:"solid",size:"md",theme:"primary"}}),f=c("span",{alignItems:"center",display:"flex",justifyContent:"center",visibility:"hidden",variants:{size:{sm:{gap:"$2"},md:{gap:"$3"},lg:{gap:"$3"},xl:{gap:"$3"}}},defaultVariants:{size:"md"}}),b=({size:e,children:r})=>a.createElement(a.Fragment,null,a.createElement(y,{css:{position:"absolute"}}),a.createElement(f,{size:e},r)),g=a.forwardRef(({children:e,as:r,href:i,isLoading:t=!1,onClick:o,...m},h)=>a.createElement($,{as:r||(i?"a":void 0),href:i,isLoading:t,onClick:t?void 0:o,type:i?void 0:"button",...m,...u(i),ref:h},t?a.createElement(b,{size:m.size},e):e));g.displayName="Button";export{g as Button,$ as StyledButton};
|
|
2
2
|
//# sourceMappingURL=Button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': { color: active }\n }\n})\n\nconst getButtonSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: text,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': { bg: active }\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 600,\n justifyContent: 'center',\n p: 'unset',\n textDecoration: 'none',\n transition: 'all 100ms ease-out',\n whiteSpace: 'nowrap',\n width: 'max-content',\n '&[disabled]': disabledStyle,\n variants: {\n theme: {\n primary: {},\n secondary: {},\n success: {},\n warning: {},\n danger: {},\n neutral: {}\n },\n appearance: {\n solid: {},\n outline: {}\n },\n size: {\n sm: {\n fontSize: '$sm',\n lineHeight: 1.53,\n height: '$3',\n px: '$4',\n gap: '$2',\n [`& ${StyledIcon}`]: { size: 16 }\n },\n md: {\n fontSize: '$md',\n lineHeight: 1.5,\n height: '$4',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 20 }\n },\n lg: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$5',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 22 }\n }\n },\n isLoading: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.6,\n pointerEvents: 'none'\n }\n },\n fullWidth: {\n true: { width: '100%' },\n false: { width: 'max-content' }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getButtonSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getButtonSolidVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n getButtonSolidVariant('success', '$success', '$successMid', '$successDark'),\n getButtonSolidVariant('warning', '$warning', '$warningMid', '$warningDark', '$tonal500'),\n getButtonSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getButtonSolidVariant('neutral', 'white', opacify('white', -0.1), opacify('white', -0.25), '$primary800'),\n
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import type { VariantProps } from '@stitches/react'\nimport { opacify } from 'color2k'\nimport * as React from 'react'\n\nimport { StyledIcon } from '~/components/icon'\nimport { Loader } from '~/components/loader'\nimport { styled } from '~/stitches'\nimport { NavigatorActions } from '~/types'\nimport { disabledStyle, Override } from '~/utilities'\nimport { getExternalAnchorProps } from '~/utilities/uri'\n\nconst getButtonOutlineVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string\n) => ({\n theme,\n appearance: 'outline',\n css: {\n border: '1px solid',\n borderColor: 'currentColor',\n color: base,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n textDecoration: 'none',\n color: interact\n },\n '&:not([disabled]):active': { color: active }\n }\n})\n\nconst getButtonSolidVariant = (\n theme: string,\n base: string,\n interact: string,\n active: string,\n text = 'white'\n) => ({\n theme,\n appearance: 'solid',\n css: {\n bg: base,\n color: text,\n '&[disabled]': disabledStyle,\n '&:not([disabled]):hover, &:not([disabled]):focus': {\n bg: interact,\n color: text\n },\n '&:not([disabled]):active': { bg: active }\n }\n})\n\nexport const StyledButton = styled('button', {\n alignItems: 'center',\n bg: 'unset',\n border: 'unset',\n borderRadius: '$0',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: '$body',\n fontWeight: 600,\n justifyContent: 'center',\n p: 'unset',\n textDecoration: 'none',\n transition: 'all 100ms ease-out',\n whiteSpace: 'nowrap',\n width: 'max-content',\n '&[disabled]': disabledStyle,\n variants: {\n theme: {\n primary: {},\n secondary: {},\n success: {},\n warning: {},\n danger: {},\n neutral: {}\n },\n appearance: {\n solid: {},\n outline: {}\n },\n size: {\n sm: {\n fontSize: '$sm',\n lineHeight: 1.53,\n height: '$3',\n px: '$4',\n gap: '$2',\n [`& ${StyledIcon}`]: { size: 16 }\n },\n md: {\n fontSize: '$md',\n lineHeight: 1.5,\n height: '$4',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 20 }\n },\n lg: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$5',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 22 }\n },\n xl: {\n fontSize: '$lg',\n lineHeight: 1.5,\n height: '$6',\n px: '$5',\n gap: '$3',\n [`& ${StyledIcon}`]: { size: 22 }\n }\n },\n isLoading: {\n true: {\n cursor: 'not-allowed',\n opacity: 0.6,\n pointerEvents: 'none'\n }\n },\n fullWidth: {\n true: { width: '100%' },\n false: { width: 'max-content' }\n }\n },\n\n // prettier-ignore\n compoundVariants: [\n getButtonSolidVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getButtonSolidVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n getButtonSolidVariant('success', '$success', '$successMid', '$successDark'),\n getButtonSolidVariant('warning', '$warning', '$warningMid', '$warningDark', '$tonal500'),\n getButtonSolidVariant('danger', '$danger', '$dangerMid', '$dangerDark'),\n getButtonSolidVariant('neutral', 'white', opacify('white', -0.1), opacify('white', -0.25), '$primary800'),\n getButtonOutlineVariant('primary', '$primary800', '$primary900', '$primary1000'),\n getButtonOutlineVariant('secondary', '$primary1000', '$primary1100', '$primary1200'),\n getButtonOutlineVariant('neutral', 'white', opacify('white', -0.2), opacify('white', -0.35))\n ],\n\n defaultVariants: {\n appearance: 'solid',\n size: 'md',\n theme: 'primary'\n }\n})\n\nconst LoaderContentsWrapper = styled('span', {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n visibility: 'hidden',\n variants: {\n size: {\n sm: { gap: '$2' },\n md: { gap: '$3' },\n lg: { gap: '$3' },\n xl: { gap: '$3' }\n }\n },\n defaultVariants: {\n size: 'md'\n }\n})\n\nconst WithLoader = ({\n size,\n children\n}: React.ComponentProps<typeof LoaderContentsWrapper>) => (\n <>\n <Loader css={{ position: 'absolute' }} />\n <LoaderContentsWrapper size={size}>{children}</LoaderContentsWrapper>\n </>\n)\n\ntype ButtonProps = Override<\n React.ComponentProps<typeof StyledButton>,\n VariantProps<typeof StyledButton> & {\n as?: React.ComponentType | React.ElementType\n children: React.ReactNode\n href?: string\n isLoading?: boolean\n } & NavigatorActions\n>\n\nexport const Button: React.ForwardRefExoticComponent<ButtonProps> =\n React.forwardRef(\n ({ children, as, href, isLoading = false, onClick, ...rest }, ref) => (\n <StyledButton\n as={as || (href ? 'a' : undefined)}\n href={href}\n isLoading={isLoading}\n onClick={!isLoading ? onClick : undefined}\n type={!href ? 'button' : undefined}\n {...rest}\n {...getExternalAnchorProps(href)}\n ref={ref}\n >\n {isLoading ? (\n <WithLoader size={rest.size}>{children}</WithLoader>\n ) : (\n children\n )}\n </StyledButton>\n )\n )\n\nButton.displayName = 'Button'\n"],"names":["getButtonOutlineVariant","theme","base","interact","active","disabledStyle","getButtonSolidVariant","text","StyledButton","styled","StyledIcon","opacify","LoaderContentsWrapper","WithLoader","size","children","React","Loader","Button","as","href","isLoading","onClick","rest","ref","getExternalAnchorProps"],"mappings":"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"}
|
|
@@ -1665,7 +1665,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
|
|
|
1665
1665
|
GlobalFilter: ({ onChange, label, hideLabel, ...props }: Omit<Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
|
|
1666
1666
|
ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
1667
1667
|
}, "size" | "css" | "state"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
1668
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
1668
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
1669
1669
|
state?: "error" | undefined;
|
|
1670
1670
|
}, {
|
|
1671
1671
|
sm: string;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Override } from '../../utilities/types';
|
|
3
3
|
declare const StyledInput: import("@stitches/react/types/styled-component").StyledComponent<"input", {
|
|
4
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
4
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
5
5
|
state?: "error" | undefined;
|
|
6
6
|
}, {
|
|
7
7
|
sm: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{styled as
|
|
1
|
+
import*as e from"react";import{styled as a}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as d}from"../../utilities/style/disabledStyle.js";const n=a("input",{appearance:"none",border:"1px solid $tonal400",borderRadius:"$0",boxShadow:"none",boxSizing:"border-box",color:"$tonal600",cursor:"text",display:"block",fontFamily:"$body",px:"$3",transition:"all 100ms ease-out",width:"100%","&:focus":{borderColor:"$primary800",outline:"none"},"&[disabled]":d,"&::placeholder":{color:"$tonal300",opacity:1},variants:{size:{sm:{height:"$3",fontSize:"$sm",lineHeight:1.7},md:{height:"$4",fontSize:"$md",lineHeight:2},lg:{height:"$5",fontSize:"$md",lineHeight:2},xl:{height:"$6",fontSize:"$lg",lineHeight:2}},state:{error:{border:"1px solid $danger"}}}}),l=e.forwardRef(({type:t="text",size:o="md",...i},r)=>t==="number"?e.createElement(n,{type:"text",inputMode:"numeric",pattern:"[0-9]*",size:o,...i,ref:r}):e.createElement(n,{type:t,size:o,...i,ref:r}));l.displayName="Input";export{l as Input};
|
|
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 '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledInput = styled('input', {\n appearance: 'none',\n border: '1px solid $tonal400',\n borderRadius: '$0',\n boxShadow: 'none', // prevent default iOS default styling\n boxSizing: 'border-box',\n color: '$tonal600',\n cursor: 'text',\n display: 'block',\n fontFamily: '$body',\n px: '$3',\n transition: 'all 100ms ease-out',\n width: '100%',\n '&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '&[disabled]': disabledStyle,\n '&::placeholder': {\n color: '$tonal300',\n opacity: 1\n },\n variants: {\n size: {\n sm: {\n height: '$3',\n fontSize: '$sm',\n lineHeight: 1.7\n },\n md: {\n height: '$4',\n fontSize: '$md',\n lineHeight: 2\n },\n lg: {\n height: '$5',\n fontSize: '$md',\n lineHeight: 2\n }\n },\n state: {\n error: {\n border: '1px solid $danger'\n }\n }\n }\n})\n\n// override default 'type' property to prevent Input from being used to render\n// checkboxes, radios etc — we have dedicated components for them\nexport type InputProps = Override<\n React.ComponentProps<typeof StyledInput>,\n {\n name: string\n as?: never\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n }\n>\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n React.forwardRef(({ type = 'text', size = 'md', ...rest }, ref) => {\n if (type === 'number') {\n return (\n <StyledInput\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n size={size}\n {...rest}\n ref={ref}\n />\n )\n }\n\n return <StyledInput type={type} size={size} {...rest} ref={ref} />\n })\n\nInput.displayName = 'Input'\n"],"names":["StyledInput","styled","disabledStyle","Input","React","type","size","rest","ref"],"mappings":"kUAMA,MAAMA,EAAcC,EAAO,QAAS,CAClC,WAAY,OACZ,OAAQ,sBACR,aAAc,KACd,UAAW,OACX,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAeC,EACf,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAaYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,KAAAC,EAAO,QAASC,CAAK,EAAGC,IACrDH,IAAS,SAETD,EAAA,cAACJ,EAAA,CACC,KAAK,OACL,UAAU,UACV,QAAQ,SACR,KAAMM,EACL,GAAGC,EACJ,IAAKC,CACP,
|
|
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 { Override } from '~/utilities/types'\n\nconst StyledInput = styled('input', {\n appearance: 'none',\n border: '1px solid $tonal400',\n borderRadius: '$0',\n boxShadow: 'none', // prevent default iOS default styling\n boxSizing: 'border-box',\n color: '$tonal600',\n cursor: 'text',\n display: 'block',\n fontFamily: '$body',\n px: '$3',\n transition: 'all 100ms ease-out',\n width: '100%',\n '&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '&[disabled]': disabledStyle,\n '&::placeholder': {\n color: '$tonal300',\n opacity: 1\n },\n variants: {\n size: {\n sm: {\n height: '$3',\n fontSize: '$sm',\n lineHeight: 1.7\n },\n md: {\n height: '$4',\n fontSize: '$md',\n lineHeight: 2\n },\n lg: {\n height: '$5',\n fontSize: '$md',\n lineHeight: 2\n },\n xl: {\n height: '$6',\n fontSize: '$lg',\n lineHeight: 2\n }\n },\n state: {\n error: {\n border: '1px solid $danger'\n }\n }\n }\n})\n\n// override default 'type' property to prevent Input from being used to render\n// checkboxes, radios etc — we have dedicated components for them\nexport type InputProps = Override<\n React.ComponentProps<typeof StyledInput>,\n {\n name: string\n as?: never\n type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n }\n>\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n React.forwardRef(({ type = 'text', size = 'md', ...rest }, ref) => {\n if (type === 'number') {\n return (\n <StyledInput\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n size={size}\n {...rest}\n ref={ref}\n />\n )\n }\n\n return <StyledInput type={type} size={size} {...rest} ref={ref} />\n })\n\nInput.displayName = 'Input'\n"],"names":["StyledInput","styled","disabledStyle","Input","React","type","size","rest","ref"],"mappings":"kUAMA,MAAMA,EAAcC,EAAO,QAAS,CAClC,WAAY,OACZ,OAAQ,sBACR,aAAc,KACd,UAAW,OACX,UAAW,aACX,MAAO,YACP,OAAQ,OACR,QAAS,QACT,WAAY,QACZ,GAAI,KACJ,WAAY,qBACZ,MAAO,OACP,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,cAAeC,EACf,iBAAkB,CAChB,MAAO,YACP,QAAS,CACX,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,GACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,EACA,GAAI,CACF,OAAQ,KACR,SAAU,MACV,WAAY,CACd,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAaYC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,KAAAC,EAAO,QAASC,CAAK,EAAGC,IACrDH,IAAS,SAETD,EAAA,cAACJ,EAAA,CACC,KAAK,OACL,UAAU,UACV,QAAQ,SACR,KAAMM,EACL,GAAGC,EACJ,IAAKC,CAAAA,CACP,EAIGJ,EAAA,cAACJ,EAAA,CAAY,KAAMK,EAAM,KAAMC,EAAO,GAAGC,EAAM,IAAKC,CAAAA,CAAK,CACjE,EAEHL,EAAM,YAAc"}
|
|
@@ -9,7 +9,7 @@ export declare const Stepper: {
|
|
|
9
9
|
}, "appearance" | "size" | "css" | "theme" | "isLoading" | "fullWidth"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
10
10
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
11
11
|
appearance?: "outline" | "solid" | undefined;
|
|
12
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
12
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
13
13
|
isLoading?: boolean | "true" | undefined;
|
|
14
14
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
15
15
|
}, {
|
|
@@ -347,7 +347,7 @@ export declare const Stepper: {
|
|
|
347
347
|
}, "appearance" | "size" | "theme" | "children" | "as" | keyof import("../../types").NavigatorActions | "isLoading" | "fullWidth"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
348
348
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
349
349
|
appearance?: "outline" | "solid" | undefined;
|
|
350
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
350
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
351
351
|
isLoading?: boolean | "true" | undefined;
|
|
352
352
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
353
353
|
}, {
|
|
@@ -369,7 +369,7 @@ export declare const Stepper: {
|
|
|
369
369
|
}, "appearance" | "size" | "css" | "theme" | "isLoading" | "fullWidth"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
370
370
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
371
371
|
appearance?: "outline" | "solid" | undefined;
|
|
372
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
372
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
373
373
|
isLoading?: boolean | "true" | undefined;
|
|
374
374
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
375
375
|
}, {
|
|
@@ -707,7 +707,7 @@ export declare const Stepper: {
|
|
|
707
707
|
}, "appearance" | "size" | "theme" | "children" | "as" | keyof import("../../types").NavigatorActions | "isLoading" | "fullWidth"> & import("@stitches/react/types/styled-component").TransformProps<{
|
|
708
708
|
theme?: "success" | "danger" | "warning" | "primary" | "neutral" | "secondary" | undefined;
|
|
709
709
|
appearance?: "outline" | "solid" | undefined;
|
|
710
|
-
size?: "sm" | "md" | "lg" | undefined;
|
|
710
|
+
size?: "sm" | "md" | "lg" | "xl" | undefined;
|
|
711
711
|
isLoading?: boolean | "true" | undefined;
|
|
712
712
|
fullWidth?: boolean | "true" | "false" | undefined;
|
|
713
713
|
}, {
|