@atom-learning/components 5.15.0 → 5.16.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 +2 -2
- package/dist/components/number-input/NumberInput.d.ts +1 -0
- package/dist/components/number-input/NumberInput.js +1 -1
- package/dist/components/number-input/NumberInput.js.map +1 -1
- package/dist/components/number-input/NumberInputStepper.d.ts +1 -0
- package/dist/components/number-input/NumberInputStepper.js +1 -1
- package/dist/components/number-input/NumberInputStepper.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js +1 -1
- package/dist/components/toggle-group/ToggleGroupItem.js.map +1 -1
- 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,9 +1,9 @@
|
|
|
1
|
-
# [5.
|
|
1
|
+
# [5.16.0](https://github.com/Atom-Learning/components/compare/v5.15.1...v5.16.0) (2026-02-03)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add emphasis variants to number input ([766810b](https://github.com/Atom-Learning/components/commit/766810b7b55a744ade15f71b5c583ff7d40b6ed1))
|
|
7
7
|
|
|
8
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Minus as
|
|
1
|
+
import{Minus as V,Plus as _}from"@atom-learning/icons";import*as a from"react";import{styled as j}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as G}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as O}from"../flex/Flex.js";import{Input as U}from"../input/Input.js";import{NumberInputStepper as E}from"./NumberInputStepper.js";const X=j(O,{variants:{appearance:{standard:{},modern:{gap:"1px"}},emphasis:{bold:{gap:"$0"}}}}),T=a.forwardRef(({value:m,defaultValue:$=0,onValueChange:C,min:n=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:d=!1,readonly:p=!1,size:w="md",stepperButtonLabels:I,disabledTooltipContent:z,css:M,appearance:u="standard",emphasis:i,...L},B)=>{const[r,x]=a.useState(m||$);a.useEffect(()=>{typeof m<"u"&&x(m)},[m]);const s=a.useRef(null);a.useImperativeHandle(B,()=>s.current);const R=a.useMemo(()=>G(w),[w]),y={increment:"increment",decrement:"decrement",...I},N={decrement:`Cannot enter values below ${n}`,increment:`Cannot enter values above ${o}`,...z},b=r>=o,f=r<=n,v=a.useCallback(e=>Math.min(Math.max(e,n),o),[o,n]),t=a.useCallback(e=>{C==null||C(e),x(e)},[C]),D=a.useCallback(e=>{const l=Number(e.target.value.replace(/\D/g,""));t(l)},[t]),h=a.useCallback(()=>{var e;if(b||p)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(r)+c;t(v(l))},[v,b,p,c,t,r]),g=a.useCallback(()=>{var e;if(f||p)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(r)-c;t(v(l))},[v,f,p,n,c,t,r]),F=a.useCallback(e=>{if(e.nativeEvent.isComposing)return;const l=e.key,A={ArrowUp:h,ArrowRight:h,ArrowDown:g,ArrowLeft:g,Home:()=>t(n),End:()=>t(o)}[l];A&&(e.preventDefault(),A(e))},[h,g,t,n,o]),k=r<n||r>o,{state:S,"aria-invalid":H,...K}=L,P={type:"number",value:r,...K,onChange:D,onKeyDown:F,size:w,appearance:u,state:S||(k?"error":void 0),"aria-invalid":H||k||void 0,css:{borderRadius:"0px",width:"$6","> input":{textAlign:"center"},"&:disabled":{opacity:.3,pointerEvents:"none"},...i==="bold"&&{borderRadius:"$1",'> input[aria-invalid="true"]':{color:"$danger"},"&:focus-within > input":{color:"$grey1000"}},...i==="bold"&&u==="standard"&&{border:"none",'&:has(input[aria-invalid="true"])':{border:"2px solid $danger"},"&:focus-within":{border:"2px solid $blue800"}}},ref:s,readOnly:p,disabled:d,"aria-valuemin":n,"aria-valuemax":o,"aria-valuenow":r,role:"spinbutton"};return a.createElement(X,{appearance:u,emphasis:i,css:M},a.createElement(E,{onClick:g,icon:V,css:i!=="bold"?{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"}:void 0,size:R,fieldAppearance:u,emphasis:i,disabled:f||d,showTooltip:f&&!d,disabledTooltipContent:N.decrement,label:y.decrement}),a.createElement(U,{...P}),a.createElement(E,{onClick:h,icon:_,css:i!=="bold"?{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"}:void 0,size:R,fieldAppearance:u,emphasis:i,disabled:b||d,showTooltip:b&&!d,disabledTooltipContent:N.increment,label:y.increment}))});T.displayName="NumberInput";export{T as NumberInput};
|
|
2
2
|
//# sourceMappingURL=NumberInput.js.map
|
|
@@ -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, styled } 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 appearance?: 'standard' | 'modern'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n css?: CSS\n}\n\nconst NumberInputContainer = styled(Flex, {\n variants: {\n appearance: {\n standard: {},\n modern: { gap: '1px' }\n }\n }\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 appearance = 'standard',\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 appearance,\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 <NumberInputContainer appearance={appearance} 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 fieldAppearance={appearance}\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 fieldAppearance={appearance}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","appearance","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
|
|
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, styled } 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 appearance?: 'standard' | 'modern'\n emphasis?: 'bold'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n css?: CSS\n}\n\nconst NumberInputContainer = styled(Flex, {\n variants: {\n appearance: {\n standard: {},\n modern: { gap: '1px' }\n },\n emphasis: {\n bold: { gap: '$0' }\n }\n }\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 appearance = 'standard',\n emphasis,\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 hasError = internalValue < min || internalValue > max\n const {\n state: externalState,\n 'aria-invalid': externalAriaInvalid,\n ...restProps\n } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...restProps,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n state: externalState || (hasError ? 'error' : undefined),\n 'aria-invalid': externalAriaInvalid || hasError || undefined,\n css: {\n borderRadius: '0px',\n width: '$6',\n '> input': { textAlign: 'center' },\n '&:disabled': { opacity: 0.3, pointerEvents: 'none' },\n ...(emphasis === 'bold' && {\n borderRadius: '$1',\n '> input[aria-invalid=\"true\"]': {\n color: '$danger'\n },\n '&:focus-within > input': {\n color: '$grey1000'\n }\n }),\n ...(emphasis === 'bold' &&\n appearance === 'standard' && {\n border: 'none',\n '&:has(input[aria-invalid=\"true\"])': {\n border: '2px solid $danger'\n },\n '&:focus-within': {\n border: '2px solid $blue800'\n }\n })\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 <NumberInputContainer\n appearance={appearance}\n emphasis={emphasis}\n css={css}\n >\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n css={\n emphasis !== 'bold'\n ? {\n borderRight: 'none',\n borderTopRightRadius: '0px',\n borderBottomRightRadius: '0px'\n }\n : undefined\n }\n size={iconSize}\n fieldAppearance={appearance}\n emphasis={emphasis}\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 emphasis !== 'bold'\n ? {\n borderLeft: 'none',\n borderTopLeftRadius: '0px',\n borderBottomLeftRadius: '0px'\n }\n : undefined\n }\n size={iconSize}\n fieldAppearance={appearance}\n emphasis={emphasis}\n disabled={isAtMax || isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","appearance","emphasis","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","hasError","externalState","externalAriaInvalid","restProps","inputProps","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
|
|
@@ -409,6 +409,7 @@ declare const StyledStepperButton: import("@atom-learning/stitches-react/types/s
|
|
|
409
409
|
label: string;
|
|
410
410
|
} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions>, {
|
|
411
411
|
fieldAppearance?: "standard" | "modern" | undefined;
|
|
412
|
+
emphasis?: "bold" | undefined;
|
|
412
413
|
}, {
|
|
413
414
|
sm: string;
|
|
414
415
|
md: string;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as r from"react";import{styled as e}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=e("span",{zIndex:1}),g=e(c,{borderRadius:"$1",zIndex:1,height:"100% !important","&:hover":{bg:"$grey100","& svg":{color:"$grey800"}},"& svg":{color:"$grey700"},"&:active":{bg:"$grey200","& svg":{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"},variants:{fieldAppearance:{standard:{backgroundColor:"white",borderColor:"$grey800 !important"},modern:{backgroundColor:"$grey100 !important",borderColor:"$grey100 !important","&:hover":{backgroundColor:"$grey200 !important"}}},emphasis:{bold:{"&:hover":{bg:"$primary100","& svg":{color:"$primary800"}},"& svg":{color:"$primary700"},"&:active":{bg:"$primary200","& svg":{color:"$primary900"}}}}},compoundVariants:[{fieldAppearance:"standard",emphasis:"bold",css:{backgroundColor:"white",borderColor:"$primary800 !important"}},{fieldAppearance:"modern",emphasis:"bold",css:{backgroundColor:"white !important","&:hover":{backgroundColor:"$primary100 !important"}}}]}),b=r.forwardRef((a,t)=>{const{icon:n,disabledTooltipContent:i,showTooltip:p,fieldAppearance:l="standard",...d}=a;return r.createElement(o,null,r.createElement(o.Trigger,{asChild:!0},r.createElement(s,{tabIndex:-1},r.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:l,ref:t,...d},r.createElement(m,{is:n})))),p&&r.createElement(o.Content,null,i))});export{b as NumberInputStepper};
|
|
2
2
|
//# sourceMappingURL=NumberInputStepper.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n borderRadius: '$1',\n zIndex: 1,\n height: '100% !important',\n '&:hover': {\n bg: '$grey100',\n '& svg': {\n color: '$grey800'\n }\n },\n '& svg': {\n color: '$grey700'\n },\n '&:active': {\n bg: '$grey200',\n '& svg': {\n color: '$grey900'\n }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n },\n variants: {\n fieldAppearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey800 !important'\n },\n modern: {\n backgroundColor: '$grey100',\n borderColor: '$grey100 !important'\n }\n }\n }\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,aAAc,KACd,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,QAAS,CACP,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CACR,gBAAiB,QACjB,YAAa,qBACf,EACA,OAAQ,CACN,gBAAiB,WACjB,YAAa,
|
|
1
|
+
{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n borderRadius: '$1',\n zIndex: 1,\n height: '100% !important',\n '&:hover': {\n bg: '$grey100',\n '& svg': {\n color: '$grey800'\n }\n },\n '& svg': {\n color: '$grey700'\n },\n '&:active': {\n bg: '$grey200',\n '& svg': {\n color: '$grey900'\n }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n },\n variants: {\n fieldAppearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey800 !important'\n },\n modern: {\n backgroundColor: '$grey100 !important',\n borderColor: '$grey100 !important',\n '&:hover': {\n backgroundColor: '$grey200 !important'\n }\n }\n },\n emphasis: {\n bold: {\n '&:hover': {\n bg: '$primary100',\n '& svg': {\n color: '$primary800'\n }\n },\n '& svg': {\n color: '$primary700'\n },\n '&:active': {\n bg: '$primary200',\n '& svg': {\n color: '$primary900'\n }\n }\n }\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n css: {\n backgroundColor: 'white',\n borderColor: '$primary800 !important'\n }\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n css: {\n backgroundColor: 'white !important',\n '&:hover': {\n backgroundColor: '$primary100 !important'\n }\n }\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /**\n * Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,aAAc,KACd,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,QAAS,CACP,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CACR,gBAAiB,QACjB,YAAa,qBACf,EACA,OAAQ,CACN,gBAAiB,sBACjB,YAAa,sBACb,UAAW,CACT,gBAAiB,qBACnB,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,UAAW,CACT,GAAI,cACJ,QAAS,CACP,MAAO,aACT,CACF,EACA,QAAS,CACP,MAAO,aACT,EACA,WAAY,CACV,GAAI,cACJ,QAAS,CACP,MAAO,aACT,CACF,CACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,gBAAiB,WACjB,SAAU,OACV,IAAK,CACH,gBAAiB,QACjB,YAAa,wBACf,CACF,EACA,CACE,gBAAiB,SACjB,SAAU,OACV,IAAK,CACH,gBAAiB,mBACjB,UAAW,CACT,gBAAiB,wBACnB,CACF,CACF,CACF,CACF,CAAC,EAYYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,cACfC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,EACtBR,EAAAA,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAAA,CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as r from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";const o=e(r.Item,{cursor:"pointer","&[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{theme:{standard:{bg:"white",color:"$grey800",border:"1px solid $grey600","&::before":{background:"$grey600"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primary900"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px",'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:"inset currentColor 0px 0px 0px 1px, white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}},'&[data-state="on"]':{color:"$primary800",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}},modern:{bg:"$grey200",borderRadius:"$1",overflow:"hidden",border:"0","&:not([disabled])":{"&:hover":{color:"$primary900"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px",'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:"inset currentColor 0px 0px 0px 1px white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}},'&[data-state="on"]':{color:"$
|
|
1
|
+
import*as r from"@radix-ui/react-toggle-group";import{styled as e}from"../../stitches.js";const o=e(r.Item,{cursor:"pointer","&[disabled]":{opacity:.3,cursor:"not-allowed"},variants:{theme:{standard:{bg:"white",color:"$grey800",border:"1px solid $grey600","&::before":{background:"$grey600"},"&:not([disabled])":{'&:hover, &:focus-visible, &[data-state="on"]':{"&::before":{background:"none"}},"&:hover":{borderColor:"currentColor !important",color:"$primary900"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px",'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:"inset currentColor 0px 0px 0px 1px, white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}},'&[data-state="on"]':{color:"$primary800",borderColor:"currentColor !important",boxShadow:"inset currentColor 0px 0px 0px 1px"}},modern:{bg:"$grey200",borderRadius:"$1",color:"$grey800",overflow:"hidden",border:"0","&:not([disabled])":{"&:hover":{color:"$primary900"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px",'&[data-state="off"]':{borderColor:"$grey600 !important"},'&[data-state="on"]':{boxShadow:"inset currentColor 0px 0px 0px 1px white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}}},'&[data-state="on"]':{color:"$grey900",border:"1px solid $grey200 !important",bg:"white",boxShadow:"none !important"}}}}}),t=o;export{o as StyledItem,t as ToggleGroupItem};
|
|
2
2
|
//# sourceMappingURL=ToggleGroupItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n cursor: 'pointer',\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n variants: {\n theme: {\n standard: {\n bg: 'white',\n color: '$grey800',\n border: '1px solid $grey600',\n '&::before': {\n background: '$grey600'\n },\n '&:not([disabled])': {\n '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n '&::before': {\n background: 'none'\n }\n },\n '&:hover': {\n borderColor: 'currentColor !important',\n color: '$primary900'\n },\n '&:focus-visible': {\n outline: 'none',\n position: 'relative',\n zIndex: 1,\n boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`,\n '&[data-state=\"off\"]': {\n borderColor: '$grey600 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px, white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n }\n }\n },\n '&[data-state=\"on\"]': {\n color: '$primary800',\n borderColor: 'currentColor !important',\n boxShadow: 'inset currentColor 0px 0px 0px 1px'\n }\n },\n modern: {\n bg: '$grey200',\n borderRadius: '$1',\n overflow: 'hidden',\n border: '0',\n '&:not([disabled])': {\n '&:hover': {\n color: '$primary900'\n },\n '&:focus-visible': {\n outline: 'none',\n position: 'relative',\n zIndex: 1,\n boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`,\n '&[data-state=\"off\"]': {\n borderColor: '$grey600 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n }\n }\n },\n '&[data-state=\"on\"]': {\n color: '$
|
|
1
|
+
{"version":3,"file":"ToggleGroupItem.js","sources":["../../../src/components/toggle-group/ToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\n\nimport { styled } from '~/stitches'\n\nexport const StyledItem = styled(ToggleGroup.Item, {\n cursor: 'pointer',\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed'\n },\n variants: {\n theme: {\n standard: {\n bg: 'white',\n color: '$grey800',\n border: '1px solid $grey600',\n '&::before': {\n background: '$grey600'\n },\n '&:not([disabled])': {\n '&:hover, &:focus-visible, &[data-state=\"on\"]': {\n '&::before': {\n background: 'none'\n }\n },\n '&:hover': {\n borderColor: 'currentColor !important',\n color: '$primary900'\n },\n '&:focus-visible': {\n outline: 'none',\n position: 'relative',\n zIndex: 1,\n boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`,\n '&[data-state=\"off\"]': {\n borderColor: '$grey600 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px, white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n }\n }\n },\n '&[data-state=\"on\"]': {\n color: '$primary800',\n borderColor: 'currentColor !important',\n boxShadow: 'inset currentColor 0px 0px 0px 1px'\n }\n },\n modern: {\n bg: '$grey200',\n borderRadius: '$1',\n color: '$grey800',\n overflow: 'hidden',\n border: '0',\n '&:not([disabled])': {\n '&:hover': {\n color: '$primary900'\n },\n '&:focus-visible': {\n outline: 'none',\n position: 'relative',\n zIndex: 1,\n boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`,\n '&[data-state=\"off\"]': {\n borderColor: '$grey600 !important'\n },\n '&[data-state=\"on\"]': {\n boxShadow: `inset currentColor 0px 0px 0px 1px white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n }\n }\n },\n '&[data-state=\"on\"]': {\n color: '$grey900',\n border: '1px solid $grey200 !important',\n bg: 'white',\n boxShadow: 'none !important'\n }\n }\n }\n }\n})\n\nexport const ToggleGroupItem = StyledItem\n"],"names":["StyledItem","styled","ToggleGroup","ToggleGroupItem"],"mappings":"0FAIO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,OAAQ,UACR,cAAe,CACb,QAAS,GACT,OAAQ,aACV,EACA,SAAU,CACR,MAAO,CACL,SAAU,CACR,GAAI,QACJ,MAAO,WACP,OAAQ,qBACR,YAAa,CACX,WAAY,UACd,EACA,oBAAqB,CACnB,+CAAgD,CAC9C,YAAa,CACX,WAAY,MACd,CACF,EACA,UAAW,CACT,YAAa,0BACb,MAAO,aACT,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,4DACX,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,+FACb,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,cACP,YAAa,0BACb,UAAW,oCACb,CACF,EACA,OAAQ,CACN,GAAI,WACJ,aAAc,KACd,MAAO,WACP,SAAU,SACV,OAAQ,IACR,oBAAqB,CACnB,UAAW,CACT,MAAO,aACT,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,4DACX,sBAAuB,CACrB,YAAa,qBACf,EACA,qBAAsB,CACpB,UAAW,8FACb,CACF,CACF,EACA,qBAAsB,CACpB,MAAO,WACP,OAAQ,gCACR,GAAI,QACJ,UAAW,iBACb,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAkBH"}
|