@mirohq/design-system-base-switch 0.1.30 → 0.1.31-combobox.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/dist/main.js +3 -0
- package/dist/main.js.map +1 -1
- package/dist/module.js +3 -0
- package/dist/module.js.map +1 -1
- package/package.json +3 -3
package/dist/main.js
CHANGED
|
@@ -54,6 +54,9 @@ const styles = {
|
|
|
54
54
|
["& ".concat(StyledThumbWrapper)]: {
|
|
55
55
|
transform: "translateX(100%)"
|
|
56
56
|
},
|
|
57
|
+
['[dir="rtl"] & '.concat(StyledThumbWrapper)]: {
|
|
58
|
+
transform: "translateX(-100%)"
|
|
59
|
+
},
|
|
57
60
|
"@media (forced-colors: active)": {
|
|
58
61
|
backgroundColor: "Highlight",
|
|
59
62
|
borderColor: "Highlight",
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\n display: 'block',\n backgroundColor: '$background-neutrals',\n borderRadius: '$round',\n width: '100%',\n height: '100%',\n})\n\nexport const StyledThumbWrapper = styled(Primitive.span, {\n display: 'block',\n width: '50%',\n height: '100%',\n transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,\n willChange: 'transform',\n boxSizing: 'border-box',\n padding: 1,\n})\n\nexport type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\n boxSizing: 'border-box',\n backgroundColor: '$background-neutrals-inactive',\n borderRadius: '$round',\n display: 'inline-flex',\n padding: 2,\n transition: `background ${TRANSITION_TIME}`,\n\n '@media (forced-colors: active)': {\n border: '1px solid ButtonText',\n padding: 1,\n backgroundColor: 'ButtonFace',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'ButtonFace',\n border: '1px solid ButtonText',\n margin: -1,\n },\n },\n },\n checked: {\n background: '$background-primary-prominent-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-primary-prominent-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":["styled","Primitive","React","jsx"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\n display: 'block',\n backgroundColor: '$background-neutrals',\n borderRadius: '$round',\n width: '100%',\n height: '100%',\n})\n\nexport const StyledThumbWrapper = styled(Primitive.span, {\n display: 'block',\n width: '50%',\n height: '100%',\n transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,\n willChange: 'transform',\n boxSizing: 'border-box',\n padding: 1,\n})\n\nexport type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\n boxSizing: 'border-box',\n backgroundColor: '$background-neutrals-inactive',\n borderRadius: '$round',\n display: 'inline-flex',\n padding: 2,\n transition: `background ${TRANSITION_TIME}`,\n\n '@media (forced-colors: active)': {\n border: '1px solid ButtonText',\n padding: 1,\n backgroundColor: 'ButtonFace',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'ButtonFace',\n border: '1px solid ButtonText',\n margin: -1,\n },\n },\n },\n checked: {\n background: '$background-primary-prominent-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n [`[dir=\"rtl\"] & ${StyledThumbWrapper}`]: {\n transform: 'translateX(-100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-primary-prominent-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":["styled","Primitive","React","jsx"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -46,6 +46,9 @@ const styles = {
|
|
|
46
46
|
["& ".concat(StyledThumbWrapper)]: {
|
|
47
47
|
transform: "translateX(100%)"
|
|
48
48
|
},
|
|
49
|
+
['[dir="rtl"] & '.concat(StyledThumbWrapper)]: {
|
|
50
|
+
transform: "translateX(-100%)"
|
|
51
|
+
},
|
|
49
52
|
"@media (forced-colors: active)": {
|
|
50
53
|
backgroundColor: "Highlight",
|
|
51
54
|
borderColor: "Highlight",
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\n display: 'block',\n backgroundColor: '$background-neutrals',\n borderRadius: '$round',\n width: '100%',\n height: '100%',\n})\n\nexport const StyledThumbWrapper = styled(Primitive.span, {\n display: 'block',\n width: '50%',\n height: '100%',\n transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,\n willChange: 'transform',\n boxSizing: 'border-box',\n padding: 1,\n})\n\nexport type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\n boxSizing: 'border-box',\n backgroundColor: '$background-neutrals-inactive',\n borderRadius: '$round',\n display: 'inline-flex',\n padding: 2,\n transition: `background ${TRANSITION_TIME}`,\n\n '@media (forced-colors: active)': {\n border: '1px solid ButtonText',\n padding: 1,\n backgroundColor: 'ButtonFace',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'ButtonFace',\n border: '1px solid ButtonText',\n margin: -1,\n },\n },\n },\n checked: {\n background: '$background-primary-prominent-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-primary-prominent-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\n display: 'block',\n backgroundColor: '$background-neutrals',\n borderRadius: '$round',\n width: '100%',\n height: '100%',\n})\n\nexport const StyledThumbWrapper = styled(Primitive.span, {\n display: 'block',\n width: '50%',\n height: '100%',\n transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,\n willChange: 'transform',\n boxSizing: 'border-box',\n padding: 1,\n})\n\nexport type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\n boxSizing: 'border-box',\n backgroundColor: '$background-neutrals-inactive',\n borderRadius: '$round',\n display: 'inline-flex',\n padding: 2,\n transition: `background ${TRANSITION_TIME}`,\n\n '@media (forced-colors: active)': {\n border: '1px solid ButtonText',\n padding: 1,\n backgroundColor: 'ButtonFace',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'ButtonFace',\n border: '1px solid ButtonText',\n margin: -1,\n },\n },\n },\n checked: {\n background: '$background-primary-prominent-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n [`[dir=\"rtl\"] & ${StyledThumbWrapper}`]: {\n transform: 'translateX(-100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$background-neutrals-inactive-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-primary-prominent-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-neutrals-controls-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$background-neutrals-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-base-switch",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.31-combobox.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"react": "^16.14 || ^17 || ^18"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@mirohq/design-system-
|
|
30
|
-
"@mirohq/design-system-
|
|
29
|
+
"@mirohq/design-system-primitive": "^1.1.2",
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.6.10"
|
|
31
31
|
},
|
|
32
32
|
"scripts": {
|
|
33
33
|
"build": "rollup -c ../../../../rollup.config.js",
|