@mirohq/design-system-flex 2.1.2-button.0 → 2.1.3-changelog-1.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 +9 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +9 -1
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +0 -5
- package/package.json +2 -2
package/dist/main.js
CHANGED
|
@@ -42,7 +42,15 @@ const StyledFlex = designSystemStitches.styled(designSystemPrimitive.Primitive.d
|
|
|
42
42
|
flexDirection: "column-reverse"
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
|
-
gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme["space-gap"],
|
|
45
|
+
gap: designSystemUtils.mapKeysToVariants(designSystemStitches.theme["space-gap"], (key) => ({
|
|
46
|
+
gap: `$${key}`,
|
|
47
|
+
[`@supports not(gap: ${key})`]: {
|
|
48
|
+
margin: `calc($${key} / 2 * -1)`,
|
|
49
|
+
"> *": {
|
|
50
|
+
margin: `calc($${key} / 2)`
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
})),
|
|
46
54
|
justify: {
|
|
47
55
|
start: {
|
|
48
56
|
justifyContent: "flex-start"
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/flex.styled.ts","../src/flex.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const StyledFlex = styled(Primitive.div, {\n display: 'flex',\n variants: {\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n },\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n gap: mapKeysToVariants(theme['space-gap'],
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/flex.styled.ts","../src/flex.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const StyledFlex = styled(Primitive.div, {\n display: 'flex',\n variants: {\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n },\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n gap: mapKeysToVariants(theme['space-gap'], key => ({\n gap: `$${key}`,\n [`@supports not(gap: ${key})`]: {\n margin: `calc($${key} / 2 * -1)`,\n '> *': {\n margin: `calc($${key} / 2)`,\n },\n },\n })),\n justify: {\n start: {\n justifyContent: 'flex-start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'flex-end',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n wrap: {\n noWrap: {\n flexWrap: 'nowrap',\n },\n wrap: {\n flexWrap: 'wrap',\n },\n wrapReverse: {\n flexWrap: 'wrap-reverse',\n },\n },\n },\n})\n\nexport type StyledFlexProps = ComponentPropsWithRef<typeof StyledFlex>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { theme } from '@mirohq/design-system-stitches'\n\nimport { StyledFlex } from './flex.styled'\nimport type { StyledFlexProps } from './flex.styled'\n\nexport interface FlexProps extends StyledFlexProps {\n /**\n * Defines how elements are aligned along the cross axis.\n **/\n align?: StyledFlexProps['align']\n\n /**\n * Defines the direction of flex items that are placed in the flex container.\n */\n direction?: StyledFlexProps['direction']\n\n /**\n * Explicitly controls the space between flex items.\n */\n gap?: keyof typeof theme['space-gap']\n\n /**\n * Defines how elements are aligned along the main axis. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n **/\n justify?: StyledFlexProps['justify']\n\n /**\n * Lets the items wrap onto multiple lines if needed.\n */\n wrap?: StyledFlexProps['wrap']\n}\n\nexport const Flex = React.forwardRef<ElementRef<typeof StyledFlex>, FlexProps>(\n (props, forwardRef) => <StyledFlex {...props} ref={forwardRef} />\n)\n"],"names":["styled","Primitive","mapKeysToVariants","theme","React"],"mappings":";;;;;;;;;;;;;AAKa,MAAA,UAAA,GAAaA,2BAAO,CAAAC,+BAAA,CAAU,GAAK,EAAA;AAAA,EAC9C,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,UAAY,EAAA,YAAA;AAAA,OACd;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,UAAY,EAAA,QAAA;AAAA,OACd;AAAA,MACA,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,UAAA;AAAA,OACd;AAAA,MACA,OAAS,EAAA;AAAA,QACP,UAAY,EAAA,SAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,SAAW,EAAA;AAAA,MACT,GAAK,EAAA;AAAA,QACH,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MACA,UAAY,EAAA;AAAA,QACV,aAAe,EAAA,aAAA;AAAA,OACjB;AAAA,MACA,aAAe,EAAA;AAAA,QACb,aAAe,EAAA,gBAAA;AAAA,OACjB;AAAA,KACF;AAAA,IACA,GAAK,EAAAC,mCAAA,CAAkBC,0BAAM,CAAA,WAAA,CAAA,EAAc,CAAQ,GAAA,MAAA;AAAA,MACjD,KAAK,CAAI,CAAA,EAAA,GAAA,CAAA,CAAA;AAAA,MACT,CAAC,sBAAsB,GAAS,CAAA,CAAA,CAAA,GAAA;AAAA,QAC9B,QAAQ,CAAS,MAAA,EAAA,GAAA,CAAA,UAAA,CAAA;AAAA,QACjB,KAAO,EAAA;AAAA,UACL,QAAQ,CAAS,MAAA,EAAA,GAAA,CAAA,KAAA,CAAA;AAAA,SACnB;AAAA,OACF;AAAA,KACA,CAAA,CAAA;AAAA,IACF,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,cAAgB,EAAA,YAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,QAAA;AAAA,OAClB;AAAA,MACA,GAAK,EAAA;AAAA,QACH,cAAgB,EAAA,UAAA;AAAA,OAClB;AAAA,MACA,OAAS,EAAA;AAAA,QACP,cAAgB,EAAA,eAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,cAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,cAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,WAAa,EAAA;AAAA,QACX,QAAU,EAAA,cAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC1CM,MAAM,OAAOC,yBAAM,CAAA,UAAA;AAAA,EACxB,CAAC,KAAO,EAAA,UAAA,qBAAgBA,yBAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAY,GAAG,KAAA;AAAA,IAAO,GAAK,EAAA,UAAA;AAAA,GAAY,CAAA;AACjE;;;;"}
|
package/dist/module.js
CHANGED
|
@@ -34,7 +34,15 @@ const StyledFlex = styled(Primitive.div, {
|
|
|
34
34
|
flexDirection: "column-reverse"
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
|
-
gap: mapKeysToVariants(theme["space-gap"],
|
|
37
|
+
gap: mapKeysToVariants(theme["space-gap"], (key) => ({
|
|
38
|
+
gap: `$${key}`,
|
|
39
|
+
[`@supports not(gap: ${key})`]: {
|
|
40
|
+
margin: `calc($${key} / 2 * -1)`,
|
|
41
|
+
"> *": {
|
|
42
|
+
margin: `calc($${key} / 2)`
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
})),
|
|
38
46
|
justify: {
|
|
39
47
|
start: {
|
|
40
48
|
justifyContent: "flex-start"
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/flex.styled.ts","../src/flex.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const StyledFlex = styled(Primitive.div, {\n display: 'flex',\n variants: {\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n },\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n gap: mapKeysToVariants(theme['space-gap'],
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/flex.styled.ts","../src/flex.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled, theme } from '@mirohq/design-system-stitches'\nimport { mapKeysToVariants } from '@mirohq/design-system-utils'\n\nexport const StyledFlex = styled(Primitive.div, {\n display: 'flex',\n variants: {\n align: {\n start: {\n alignItems: 'flex-start',\n },\n center: {\n alignItems: 'center',\n },\n end: {\n alignItems: 'flex-end',\n },\n stretch: {\n alignItems: 'stretch',\n },\n },\n direction: {\n row: {\n flexDirection: 'row',\n },\n column: {\n flexDirection: 'column',\n },\n rowReverse: {\n flexDirection: 'row-reverse',\n },\n columnReverse: {\n flexDirection: 'column-reverse',\n },\n },\n gap: mapKeysToVariants(theme['space-gap'], key => ({\n gap: `$${key}`,\n [`@supports not(gap: ${key})`]: {\n margin: `calc($${key} / 2 * -1)`,\n '> *': {\n margin: `calc($${key} / 2)`,\n },\n },\n })),\n justify: {\n start: {\n justifyContent: 'flex-start',\n },\n center: {\n justifyContent: 'center',\n },\n end: {\n justifyContent: 'flex-end',\n },\n between: {\n justifyContent: 'space-between',\n },\n around: {\n justifyContent: 'space-around',\n },\n evenly: {\n justifyContent: 'space-evenly',\n },\n },\n wrap: {\n noWrap: {\n flexWrap: 'nowrap',\n },\n wrap: {\n flexWrap: 'wrap',\n },\n wrapReverse: {\n flexWrap: 'wrap-reverse',\n },\n },\n },\n})\n\nexport type StyledFlexProps = ComponentPropsWithRef<typeof StyledFlex>\n","import React from 'react'\nimport type { ElementRef } from 'react'\nimport type { theme } from '@mirohq/design-system-stitches'\n\nimport { StyledFlex } from './flex.styled'\nimport type { StyledFlexProps } from './flex.styled'\n\nexport interface FlexProps extends StyledFlexProps {\n /**\n * Defines how elements are aligned along the cross axis.\n **/\n align?: StyledFlexProps['align']\n\n /**\n * Defines the direction of flex items that are placed in the flex container.\n */\n direction?: StyledFlexProps['direction']\n\n /**\n * Explicitly controls the space between flex items.\n */\n gap?: keyof typeof theme['space-gap']\n\n /**\n * Defines how elements are aligned along the main axis. It uses the\n * [space](/?path=/docs/foundation-spacing--page)\n **/\n justify?: StyledFlexProps['justify']\n\n /**\n * Lets the items wrap onto multiple lines if needed.\n */\n wrap?: StyledFlexProps['wrap']\n}\n\nexport const Flex = React.forwardRef<ElementRef<typeof StyledFlex>, FlexProps>(\n (props, forwardRef) => <StyledFlex {...props} ref={forwardRef} />\n)\n"],"names":[],"mappings":";;;;;AAKa,MAAA,UAAA,GAAa,MAAO,CAAA,SAAA,CAAU,GAAK,EAAA;AAAA,EAC9C,OAAS,EAAA,MAAA;AAAA,EACT,QAAU,EAAA;AAAA,IACR,KAAO,EAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,UAAY,EAAA,YAAA;AAAA,OACd;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,UAAY,EAAA,QAAA;AAAA,OACd;AAAA,MACA,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,UAAA;AAAA,OACd;AAAA,MACA,OAAS,EAAA;AAAA,QACP,UAAY,EAAA,SAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,SAAW,EAAA;AAAA,MACT,GAAK,EAAA;AAAA,QACH,aAAe,EAAA,KAAA;AAAA,OACjB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,aAAe,EAAA,QAAA;AAAA,OACjB;AAAA,MACA,UAAY,EAAA;AAAA,QACV,aAAe,EAAA,aAAA;AAAA,OACjB;AAAA,MACA,aAAe,EAAA;AAAA,QACb,aAAe,EAAA,gBAAA;AAAA,OACjB;AAAA,KACF;AAAA,IACA,GAAK,EAAA,iBAAA,CAAkB,KAAM,CAAA,WAAA,CAAA,EAAc,CAAQ,GAAA,MAAA;AAAA,MACjD,KAAK,CAAI,CAAA,EAAA,GAAA,CAAA,CAAA;AAAA,MACT,CAAC,sBAAsB,GAAS,CAAA,CAAA,CAAA,GAAA;AAAA,QAC9B,QAAQ,CAAS,MAAA,EAAA,GAAA,CAAA,UAAA,CAAA;AAAA,QACjB,KAAO,EAAA;AAAA,UACL,QAAQ,CAAS,MAAA,EAAA,GAAA,CAAA,KAAA,CAAA;AAAA,SACnB;AAAA,OACF;AAAA,KACA,CAAA,CAAA;AAAA,IACF,OAAS,EAAA;AAAA,MACP,KAAO,EAAA;AAAA,QACL,cAAgB,EAAA,YAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,QAAA;AAAA,OAClB;AAAA,MACA,GAAK,EAAA;AAAA,QACH,cAAgB,EAAA,UAAA;AAAA,OAClB;AAAA,MACA,OAAS,EAAA;AAAA,QACP,cAAgB,EAAA,eAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,cAAA;AAAA,OAClB;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,cAAgB,EAAA,cAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,IAAM,EAAA;AAAA,MACJ,MAAQ,EAAA;AAAA,QACN,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,QAAU,EAAA,MAAA;AAAA,OACZ;AAAA,MACA,WAAa,EAAA;AAAA,QACX,QAAU,EAAA,cAAA;AAAA,OACZ;AAAA,KACF;AAAA,GACF;AACF,CAAC,CAAA;;AC1CM,MAAM,OAAO,KAAM,CAAA,UAAA;AAAA,EACxB,CAAC,KAAO,EAAA,UAAA,qBAAgB,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA;AAAA,IAAY,GAAG,KAAA;AAAA,IAAO,GAAK,EAAA,UAAA;AAAA,GAAY,CAAA;AACjE;;;;"}
|
package/dist/types.d.ts
CHANGED
|
@@ -111,8 +111,6 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
111
111
|
readonly 'background-danger'?: any;
|
|
112
112
|
readonly 'background-danger-hover'?: any;
|
|
113
113
|
readonly 'background-success'?: any;
|
|
114
|
-
readonly 'background-warning-subtle'?: any;
|
|
115
|
-
readonly 'background-warning-prominent'?: any;
|
|
116
114
|
readonly 'text-neutrals-inverted'?: any;
|
|
117
115
|
readonly 'text-neutrals'?: any;
|
|
118
116
|
readonly 'text-neutrals-subtle'?: any;
|
|
@@ -157,8 +155,6 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
157
155
|
readonly 'border-neutrals-disabled'?: any;
|
|
158
156
|
readonly 'border-neutrals-controls'?: any;
|
|
159
157
|
readonly 'border-neutrals-controls-disabled'?: any;
|
|
160
|
-
readonly 'border-neutrals-subtle'?: any;
|
|
161
|
-
readonly 'border-neutrals-inverted'?: any;
|
|
162
158
|
readonly 'border-primary'?: any;
|
|
163
159
|
readonly 'border-primary-hover'?: any;
|
|
164
160
|
readonly 'border-primary-active'?: any;
|
|
@@ -193,7 +189,6 @@ declare const StyledFlex: react.ForwardRefExoticComponent<Pick<Omit<{
|
|
|
193
189
|
readonly 50: "0 4px 16px #05003812";
|
|
194
190
|
readonly 100: "0 8px 32px #05003808";
|
|
195
191
|
readonly 'focus-small': "0 0 0 2px $colors$blue-200, inset 0 0 0 2px $colors$blue-500, inset 0 0 0 3px $colors$white";
|
|
196
|
-
readonly 'focus-small-outline': "0 0 0 2px $colors$blue-200, inset 0 0 0 1px $colors$blue-500, inset 0 0 0 2px $colors$white";
|
|
197
192
|
readonly 'focus-large': "0 0 0 4px $colors$blue-200, inset 0 0 0 2px $colors$blue-500, inset 0 0 0 3px $colors$white";
|
|
198
193
|
readonly 'focus-controls': "0 0 0 1px $colors$white, 0 0 0 3px $colors$blue-500, 0 0 0 5px $colors$blue-200";
|
|
199
194
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mirohq/design-system-flex",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3-changelog-1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"author": "Miro",
|
|
6
6
|
"source": "src/index.ts",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@mirohq/design-system-primitive": "^1.1.0",
|
|
30
|
-
"@mirohq/design-system-stitches": "^2.1.2-
|
|
30
|
+
"@mirohq/design-system-stitches": "^2.1.2-changelog-1.0",
|
|
31
31
|
"@mirohq/design-system-utils": "^0.12.0"
|
|
32
32
|
},
|
|
33
33
|
"scripts": {
|