@atom-learning/components 3.12.6 → 3.12.8
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 +4 -2
- package/dist/components/checkbox-group/CheckboxGroupAllItem.js +1 -1
- package/dist/components/checkbox-group/CheckboxGroupAllItem.js.map +1 -1
- package/dist/components/number-input/NumberInput.js.map +1 -1
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/stepper/Stepper.d.ts +2 -2
- package/dist/components/stepper/StepperStepForward.d.ts +1 -1
- package/dist/components/stepper/StepperStepForward.js +1 -1
- package/dist/components/stepper/StepperStepForward.js.map +1 -1
- package/dist/components/tile/Tile.js.map +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,9 +1,11 @@
|
|
|
1
|
-
## [3.12.
|
|
1
|
+
## [3.12.8](https://github.com/Atom-Learning/components/compare/v3.12.7...v3.12.8) (2024-03-04)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add stale githubaction ([f0868d3](https://github.com/Atom-Learning/components/commit/f0868d3ec97629b29c846bcb18db4b26f1eab62e))
|
|
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))
|
|
7
9
|
|
|
8
10
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
11
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as n from"react";import{Checkbox as u}from"../checkbox/Checkbox.js";import{CheckboxGroupMountedContext as i}from"./context/CheckboxGroupMounted.context.js";import{CheckboxGroupCheckedContext as k}from"./context/CheckboxGroupChecked.context.js";const a=({onCheckedChange:r,title:c="all",...h})=>{const{checked:o,handleItemCheckedChange:m}=n.useContext(k),{mounted:t}=n.useContext(i),C=e=>{t.forEach(d=>{m(e,d)}),r==null||r(e)},l=(()=>!o.length||!t.length?!1:t.every(e=>o.includes(e))?!0:t.some(e=>o.includes(e))?"indeterminate":!1)();return n.createElement(u,{onCheckedChange:C,checked:l,title:c,...h})};export{a as CheckboxGroupAllItem};
|
|
2
2
|
//# sourceMappingURL=CheckboxGroupAllItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxGroupAllItem.js","sources":["../../../src/components/checkbox-group/CheckboxGroupAllItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport {\n CheckboxGroupCheckedContext,\n CheckboxGroupMountedContext\n} from './CheckboxGroup.context'\n\ntype CheckboxGroupAllItemProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n 'checked' | 'defaultChecked'\n>\n\nexport const CheckboxGroupAllItem = ({\n onCheckedChange,\n title = 'all',\n ...rest\n}: CheckboxGroupAllItemProps): JSX.Element => {\n const {\n checked: checkedItems,\n handleItemCheckedChange: handleItemCheckedChangeContext\n } = React.useContext(CheckboxGroupCheckedContext)\n const { mounted: mountedItems } = React.useContext(\n CheckboxGroupMountedContext\n )\n\n const handleItemCheckedChange = (newChecked) => {\n mountedItems.forEach((value) => {\n handleItemCheckedChangeContext(newChecked, value)\n })\n onCheckedChange?.(newChecked)\n }\n\n const isAllChecked = (() => {\n if (mountedItems.every((mountedItem) => checkedItems.includes(mountedItem)))\n return true\n\n if (mountedItems.some((mountedItem) => checkedItems.includes(mountedItem)))\n return 'indeterminate'\n\n return false\n })()\n\n return (\n <Checkbox\n onCheckedChange={handleItemCheckedChange}\n checked={isAllChecked}\n title={title}\n {...rest}\n />\n )\n}\n"],"names":["CheckboxGroupAllItem","onCheckedChange","title","rest","checkedItems","handleItemCheckedChangeContext","React","CheckboxGroupCheckedContext","mountedItems","CheckboxGroupMountedContext","handleItemCheckedChange","newChecked","value","isAllChecked","mountedItem","Checkbox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CheckboxGroupAllItem.js","sources":["../../../src/components/checkbox-group/CheckboxGroupAllItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport {\n CheckboxGroupCheckedContext,\n CheckboxGroupMountedContext\n} from './CheckboxGroup.context'\n\ntype CheckboxGroupAllItemProps = Omit<\n React.ComponentProps<typeof Checkbox>,\n 'checked' | 'defaultChecked'\n>\n\nexport const CheckboxGroupAllItem = ({\n onCheckedChange,\n title = 'all',\n ...rest\n}: CheckboxGroupAllItemProps): JSX.Element => {\n const {\n checked: checkedItems,\n handleItemCheckedChange: handleItemCheckedChangeContext\n } = React.useContext(CheckboxGroupCheckedContext)\n const { mounted: mountedItems } = React.useContext(\n CheckboxGroupMountedContext\n )\n\n const handleItemCheckedChange = (newChecked) => {\n mountedItems.forEach((value) => {\n handleItemCheckedChangeContext(newChecked, value)\n })\n onCheckedChange?.(newChecked)\n }\n\n const isAllChecked = (() => {\n if (!checkedItems.length || !mountedItems.length) return false\n\n if (mountedItems.every((mountedItem) => checkedItems.includes(mountedItem)))\n return true\n\n if (mountedItems.some((mountedItem) => checkedItems.includes(mountedItem)))\n return 'indeterminate'\n\n return false\n })()\n\n return (\n <Checkbox\n onCheckedChange={handleItemCheckedChange}\n checked={isAllChecked}\n title={title}\n {...rest}\n />\n )\n}\n"],"names":["CheckboxGroupAllItem","onCheckedChange","title","rest","checkedItems","handleItemCheckedChangeContext","React","CheckboxGroupCheckedContext","mountedItems","CheckboxGroupMountedContext","handleItemCheckedChange","newChecked","value","isAllChecked","mountedItem","Checkbox"],"mappings":"2PAaa,MAAAA,EAAuB,CAAC,CACnC,gBAAAC,EACA,MAAAC,EAAQ,SACLC,CACL,IAA8C,CAC5C,KAAM,CACJ,QAASC,EACT,wBAAyBC,CAC3B,EAAIC,EAAM,WAAWC,CAA2B,EAC1C,CAAE,QAASC,CAAa,EAAIF,EAAM,WACtCG,CACF,EAEMC,EAA2BC,GAAe,CAC9CH,EAAa,QAASI,GAAU,CAC9BP,EAA+BM,EAAYC,CAAK,CAClD,CAAC,EACDX,GAAA,MAAAA,EAAkBU,CAAAA,CACpB,EAEME,GAAgB,IAChB,CAACT,EAAa,QAAU,CAACI,EAAa,OAAe,GAErDA,EAAa,MAAOM,GAAgBV,EAAa,SAASU,CAAW,CAAC,EACjE,GAELN,EAAa,KAAMM,GAAgBV,EAAa,SAASU,CAAW,CAAC,EAChE,gBAEF,IAAA,EAGT,OACER,EAAA,cAACS,EAAA,CACC,gBAAiBL,EACjB,QAASG,EACT,MAAOX,EACN,GAAGC,CAAAA,CACN,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { CSS } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' | 'md' | 'lg'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n css?: CSS\n}\n\nexport const NumberInput: React.ForwardRefExoticComponent
|
|
1
|
+
{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { CSS } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' | 'md' | 'lg'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n css?: CSS\n}\n\nexport const NumberInput: React.ForwardRefExoticComponent<\n NumberInputProps & { ref: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n css,\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value || defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin || isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /**\n * Keyboard Accessibility\n *\n * We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n *\n * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...rest,\n onChange: onInputChange,\n onKeyDown,\n size,\n css: {\n borderRadius: '0px',\n width: '$6',\n '&:disabled': { opacity: 0.3, pointerEvents: 'none' }\n },\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <Flex css={css}>\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n css={{\n borderRight: 'none',\n borderTopRightRadius: '0px',\n borderBottomRightRadius: '0px'\n }}\n size={iconSize}\n disabled={isAtMin || isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n css={{\n borderLeft: 'none',\n borderTopLeftRadius: '0px',\n borderBottomLeftRadius: '0px'\n }}\n size={iconSize}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </Flex>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","Flex","NumberInputStepper","Minus","Input","Plus"],"mappings":"yfA0BO,MAAMA,EAETC,EAAM,WACR,CACE,CACE,MAAAC,EACA,aAAAC,EAAe,EACf,cAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,OAAO,iBACb,KAAAC,EAAO,EACP,SAAUC,EAAa,GACvB,SAAUC,EAAa,GACvB,KAAAC,EAAO,KACP,oBAAqBC,EACrB,uBAAwBC,EACxB,IAAAC,KACGC,CACL,EACAC,IACgB,CAChB,KAAM,CAACC,EAAeC,CAAgB,EAAIhB,EAAM,SAC9CC,GAASC,CACX,EACAF,EAAM,UAAU,IAAM,CAEhB,OAAOC,EAAU,KAAae,EAAiBf,CAAK,CAC1D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMgB,EAAWjB,EAAM,OAAgC,IAAI,EAE3DA,EAAM,oBAAoBc,EAAK,IAAMG,EAAS,OAA2B,EAEzE,MAAMC,EAAWlB,EAAM,QAAQ,IAAMmB,EAAiBV,CAAI,EAAG,CAACA,CAAI,CAAC,EAE7DW,EAAsB,CAC1B,UAAW,YACX,UAAW,YACX,GAAGV,CACL,EAEMW,EAAyB,CAC7B,UAAW,6BAA6BjB,IACxC,UAAW,6BAA6BC,IACxC,GAAGM,CACL,EAEMW,EAAUP,GAAiBV,EAC3BkB,EAAUR,GAAiBX,EAE3BoB,EAAQxB,EAAM,YACjBe,GAA0B,KAAK,IAAI,KAAK,IAAIA,EAAeX,CAAG,EAAGC,CAAG,EACrE,CAACA,EAAKD,CAAG,CACX,EAEMqB,EAAczB,EAAM,YACvB0B,GAAqB,CACpBvB,GAAA,MAAAA,EAAgBuB,CAChBV,EAAAA,EAAiBU,CAAQ,CAC3B,EACA,CAACvB,CAAa,CAChB,EAEMwB,EAAgB3B,EAAM,YACzB4B,GAA+C,CAC9C,MAAMC,EAAc,OAAOD,EAAM,OAAO,MAAM,QAAQ,MAAO,EAAE,CAAC,EAChEH,EAAYI,CAAW,CACzB,EACA,CAACJ,CAAW,CACd,EAEMK,EAAY9B,EAAM,YAAY,IAAM,CAjG9C,IAAA+B,EAkGM,GAAIT,GAAWd,EAAY,QAC3BuB,EAAAd,GAAA,KAAA,OAAAA,EAAU,UAAV,MAAAc,EAAmB,MAAA,EACnB,MAAML,EAAW,OAAOX,CAAa,EAAIT,EACzCmB,EAAYD,EAAME,CAAQ,CAAC,CAC7B,EAAG,CAACF,EAAOF,EAASd,EAAYF,EAAMmB,EAAaV,CAAa,CAAC,EAE3DiB,EAAYhC,EAAM,YAAY,IAAM,CAxG9C,IAAA+B,EAyGM,GAAIR,GAAWf,EAAY,QAC3BuB,EAAAd,GAAA,KAAA,OAAAA,EAAU,UAAV,MAAAc,EAAmB,QACnB,MAAML,EAAW,OAAOX,CAAa,EAAIT,EACzCmB,EAAYD,EAAME,CAAQ,CAAC,CAC7B,EAAG,CAACF,EAAOD,EAASf,EAAYJ,EAAKE,EAAMmB,EAAaV,CAAa,CAAC,EAEhEkB,EAAYjC,EAAM,YACrB4B,GAA+B,CAC9B,GAAIA,EAAM,YAAY,YAAa,OAUnC,MAAMM,EAAWN,EAAM,IAWjBO,EATqD,CACzD,QAASL,EACT,WAAYA,EACZ,UAAWE,EACX,UAAWA,EACX,KAAM,IAAMP,EAAYrB,CAAG,EAC3B,IAAK,IAAMqB,EAAYpB,CAAG,CAC5B,EAEsB6B,GAElBC,IACFP,EAAM,iBACNO,EAAOP,CAAK,EAEhB,EACA,CAACE,EAAWE,EAAWP,EAAarB,EAAKC,CAAG,CAC9C,EAEM+B,EAAiD,CACrD,KAAM,SACN,MAAOrB,EACP,GAAGF,EACH,SAAUc,EACV,UAAAM,EACA,KAAAxB,EACA,IAAK,CACH,aAAc,MACd,MAAO,KACP,aAAc,CAAE,QAAS,GAAK,cAAe,MAAO,CACtD,EACA,IAAKQ,EACL,SAAUT,EACV,SAAUD,EACV,gBAAiBH,EACjB,gBAAiBC,EACjB,gBAAiBU,EACjB,KAAM,YACR,EAEA,OACEf,EAAA,cAACqC,EAAA,CAAK,IAAKzB,CACTZ,EAAAA,EAAA,cAACsC,EAAA,CACC,QAASN,EACT,KAAMO,EACN,IAAK,CACH,YAAa,OACb,qBAAsB,MACtB,wBAAyB,KAC3B,EACA,KAAMrB,EACN,SAAUK,GAAWhB,EACrB,YAAagB,GAAW,CAAChB,EACzB,uBAAwBc,EAAuB,UAC/C,MAAOD,EAAoB,SAAA,CAC7B,EACApB,EAAA,cAACwC,EAAA,CAAO,GAAGJ,CAAAA,CAAY,EACvBpC,EAAA,cAACsC,EAAA,CACC,QAASR,EACT,KAAMW,EACN,IAAK,CACH,WAAY,OACZ,oBAAqB,MACrB,uBAAwB,KAC1B,EACA,KAAMvB,EACN,SAAUI,GAAWf,EACrB,YAAae,GAAW,CAACf,EACzB,uBAAwBc,EAAuB,UAC/C,MAAOD,EAAoB,SAC7B,CAAA,CACF,CAEJ,CACF,EAEArB,EAAY,YAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n appearance: 'none',\n backgroundColor: 'white',\n backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n backgroundRepeat: 'no-repeat, repeat',\n border: '1px solid $tonal300',\n borderRadius: '$0',\n color: '$tonal600',\n display: 'block',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n transition: 'all 75ms ease-out',\n width: '100%',\n '&:hover': {\n cursor: 'pointer'\n },\n '&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '&::-ms-expand': {\n display: 'none'\n },\n '&[disabled], > option[disabled]': disabledStyle,\n variants: {\n size: {\n sm: {\n backgroundPosition: 'right $space$2 top 50%, 0 0',\n backgroundSize: '18px auto, 100%',\n fontSize: '$sm',\n height: '$3',\n pl: '$2',\n pr: '$5'\n },\n md: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$4',\n pl: '$3',\n pr: '$6'\n },\n lg: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$5',\n pl: '$3',\n pr: '$6'\n }\n },\n state: {\n error: {\n border: '1px solid $danger'\n }\n }\n }\n})\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // | { id: string; 'aria-label'?: string }\n // | { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select: React.ForwardRefExoticComponent<SelectProps>
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n appearance: 'none',\n backgroundColor: 'white',\n backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n backgroundRepeat: 'no-repeat, repeat',\n border: '1px solid $tonal300',\n borderRadius: '$0',\n color: '$tonal600',\n display: 'block',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n transition: 'all 75ms ease-out',\n width: '100%',\n '&:hover': {\n cursor: 'pointer'\n },\n '&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '&::-ms-expand': {\n display: 'none'\n },\n '&[disabled], > option[disabled]': disabledStyle,\n variants: {\n size: {\n sm: {\n backgroundPosition: 'right $space$2 top 50%, 0 0',\n backgroundSize: '18px auto, 100%',\n fontSize: '$sm',\n height: '$3',\n pl: '$2',\n pr: '$5'\n },\n md: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$4',\n pl: '$3',\n pr: '$6'\n },\n lg: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$5',\n pl: '$3',\n pr: '$6'\n }\n },\n state: {\n error: {\n border: '1px solid $danger'\n }\n }\n }\n})\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // | { id: string; 'aria-label'?: string }\n // | { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select: React.ForwardRefExoticComponent<SelectProps> =\n React.forwardRef(\n ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n const props = { size, ref, ...remainingProps }\n\n if (\n [remainingProps.value, remainingProps.defaultValue].every(\n (value) => value === undefined\n )\n ) {\n props.defaultValue = ''\n }\n\n return (\n <StyledSelect {...props}>\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </StyledSelect>\n )\n }\n )\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","disabledStyle","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,iBAAkB,oBAClB,OAAQ,sBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmCC,EACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACN,EAAA,CAAc,GAAGY,CAAAA,EACfL,GACCD,EAAA,cAAC,UAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,IAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}
|
|
@@ -364,7 +364,7 @@ export declare const Stepper: {
|
|
|
364
364
|
href?: string | undefined;
|
|
365
365
|
isLoading?: boolean | undefined;
|
|
366
366
|
} & import("../../types").NavigatorActions) => JSX.Element;
|
|
367
|
-
StepForward: ({ label, children, onClick, ...rest }: import("./types").IStepperNavigateProps & Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
|
|
367
|
+
StepForward: ({ label, children, onClick, ...rest }: import("./types").IStepperNavigateProps & Partial<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
|
|
368
368
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
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;
|
|
@@ -723,6 +723,6 @@ export declare const Stepper: {
|
|
|
723
723
|
children: React.ReactNode;
|
|
724
724
|
href?: string | undefined;
|
|
725
725
|
isLoading?: boolean | undefined;
|
|
726
|
-
} & import("../../types").NavigatorActions) => JSX.Element;
|
|
726
|
+
} & import("../../types").NavigatorActions>) => JSX.Element;
|
|
727
727
|
Steps: ({ css }: import("./types").IStepperStepsProps) => JSX.Element;
|
|
728
728
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Button } from '../button';
|
|
3
3
|
import { IStepperNavigateProps } from './types';
|
|
4
|
-
export declare const StepperStepForward: ({ label, children, onClick, ...rest }: IStepperNavigateProps & React.ComponentProps<typeof Button
|
|
4
|
+
export declare const StepperStepForward: ({ label, children, onClick, ...rest }: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as n from"react";import{Button as p}from"../button/Button.js";import{useStepper as m}from"./stepper-context/StepperContext.js";const c=({label:t,children:r,onClick:o,...l})=>{const{goToNextStep:e,activeStep:i}=m();return n.createElement(p,{size:"sm",...l,onClick:()=>{if(o)return o(()=>e==null?void 0:e());e==null||e()},css:{ml:"auto"}},r||(t==null?void 0:t(i)))};export{c as StepperStepForward};
|
|
2
2
|
//# sourceMappingURL=StepperStepForward.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperStepForward.js","sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n label,\n children,\n onClick,\n ...rest\n}: IStepperNavigateProps & React.ComponentProps<typeof Button
|
|
1
|
+
{"version":3,"file":"StepperStepForward.js","sources":["../../../src/components/stepper/StepperStepForward.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '../button'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { IStepperNavigateProps } from './types'\n\nexport const StepperStepForward = ({\n label,\n children,\n onClick,\n ...rest\n}: IStepperNavigateProps & Partial<React.ComponentProps<typeof Button>>) => {\n const { goToNextStep, activeStep } = useStepper()\n\n const handleClick = () => {\n if (onClick) {\n return onClick(() => goToNextStep?.())\n }\n goToNextStep?.()\n }\n\n return (\n <Button size=\"sm\" {...rest} onClick={handleClick} css={{ ml: 'auto' }}>\n {children || label?.(activeStep)}\n </Button>\n )\n}\n"],"names":["StepperStepForward","label","children","onClick","rest","goToNextStep","activeStep","useStepper","React","Button"],"mappings":"sIAMa,MAAAA,EAAqB,CAAC,CACjC,MAAAC,EACA,SAAAC,EACA,QAAAC,KACGC,CACL,IAA4E,CAC1E,KAAM,CAAE,aAAAC,EAAc,WAAAC,CAAW,EAAIC,EASrC,EAAA,OACEC,EAAA,cAACC,EAAA,CAAO,KAAK,KAAM,GAAGL,EAAM,QARV,IAAM,CACxB,GAAID,EACF,OAAOA,EAAQ,IAAME,GAAA,KAAA,OAAAA,EAAgB,CAAA,EAEvCA,GAAA,MAAAA,EACF,CAAA,EAGoD,IAAK,CAAE,GAAI,MAAO,CAAA,EACjEH,IAAYD,GAAA,KAAAA,OAAAA,EAAQK,GACvB,CAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n all: 'unset', // important for buttons etc\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative', // for pseudo-elements\n border: '1px solid',\n bg: '$base1',\n color: '$foreground',\n borderColor: 'transparent',\n variants: {\n borderRadius: {\n sm: { borderRadius: '$0' },\n md: { borderRadius: '$1' },\n lg: { borderRadius: '$3' }\n },\n border: {\n true: { borderColor: '$base3' }\n }\n }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n colorScheme?: TcolorScheme\n}\n\nexport const Tile: React.ForwardRefExoticComponent<TTileProps>
|
|
1
|
+
{"version":3,"file":"Tile.js","sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\n\nexport const StyledTile = styled('div', {\n all: 'unset', // important for buttons etc\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n position: 'relative', // for pseudo-elements\n border: '1px solid',\n bg: '$base1',\n color: '$foreground',\n borderColor: 'transparent',\n variants: {\n borderRadius: {\n sm: { borderRadius: '$0' },\n md: { borderRadius: '$1' },\n lg: { borderRadius: '$3' }\n },\n border: {\n true: { borderColor: '$base3' }\n }\n }\n})\n\ntype TTileProps = React.ComponentProps<typeof StyledTile> & {\n colorScheme?: TcolorScheme\n}\n\nexport const Tile: React.ForwardRefExoticComponent<TTileProps> =\n React.forwardRef(({ children, colorScheme = {}, ...rest }, ref) => (\n <ColorScheme\n asChild\n base=\"grey1\"\n accent=\"primary2\"\n interactive=\"loContrast\"\n {...colorScheme}\n >\n <StyledTile ref={ref} {...rest}>\n {children}\n </StyledTile>\n </ColorScheme>\n ))\n\nTile.displayName = 'Tile'\n"],"names":["StyledTile","styled","Tile","React","children","colorScheme","rest","ref","ColorScheme"],"mappings":"4IAKO,MAAMA,EAAaC,EAAO,MAAO,CACtC,IAAK,QACL,UAAW,aACX,QAAS,OACT,cAAe,SACf,SAAU,WACV,OAAQ,YACR,GAAI,SACJ,MAAO,cACP,YAAa,cACb,SAAU,CACR,aAAc,CACZ,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,EACzB,GAAI,CAAE,aAAc,IAAK,CAC3B,EACA,OAAQ,CACN,KAAM,CAAE,YAAa,QAAS,CAChC,CACF,CACF,CAAC,EAMYC,EACXC,EAAM,WAAW,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,MAAOC,CAAK,EAAGC,IACzDJ,EAAA,cAACK,EAAA,CACC,QAAO,GACP,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGH,CAAAA,EAEJF,EAAA,cAACH,EAAA,CAAW,IAAKO,EAAM,GAAGD,CAAAA,EACvBF,CACH,CACF,CACD,EAEHF,EAAK,YAAc"}
|