@veeqo/ui 14.3.0-beta-7 → 14.3.0-beta-9
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/components/Stack/Stack.cjs +1 -4
- package/dist/components/Stack/Stack.cjs.map +1 -1
- package/dist/components/Stack/Stack.js +1 -4
- package/dist/components/Stack/Stack.js.map +1 -1
- package/dist/components/Stack/Stack.module.scss.cjs +2 -2
- package/dist/components/Stack/Stack.module.scss.cjs.map +1 -1
- package/dist/components/Stack/Stack.module.scss.js +2 -2
- package/dist/components/Stack/Stack.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -21,9 +21,6 @@ const Stack = React__default.default.forwardRef(({ direction = 'vertical', align
|
|
|
21
21
|
const justifyContentKey = isVertical ? alignY : alignX;
|
|
22
22
|
const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';
|
|
23
23
|
const spacingValue = index.theme.sizes[spacing];
|
|
24
|
-
const spacingStyle = isVertical
|
|
25
|
-
? { rowGap: spacingValue }
|
|
26
|
-
: { columnGap: spacingValue };
|
|
27
24
|
return (React__default.default.createElement(Element, { className: buildClassnames.buildClassnames([
|
|
28
25
|
Stack_module.base,
|
|
29
26
|
Stack_module[`${direction}-direction`],
|
|
@@ -32,7 +29,7 @@ const Stack = React__default.default.forwardRef(({ direction = 'vertical', align
|
|
|
32
29
|
isStretch ? Stack_module['stretch-children'] : undefined,
|
|
33
30
|
className,
|
|
34
31
|
]), style: {
|
|
35
|
-
|
|
32
|
+
'--stack-gap': spacingValue,
|
|
36
33
|
...style,
|
|
37
34
|
}, ref: ref, ...rest }, children));
|
|
38
35
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StackProps } from './types';\n\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport styles from './Stack.module.scss';\n\n/**\n * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n */\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n (\n {\n direction = 'vertical',\n alignX = 'start',\n alignY = 'start',\n spacing = 'base',\n as = 'div',\n forwardedAs,\n className,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\n const Element = forwardedAs || as;\n const isVertical = direction === 'vertical';\n\n const alignItemsKey = isVertical ? alignX : alignY;\n const justifyContentKey = isVertical ? alignY : alignX;\n\n const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';\n\n const spacingValue = theme.sizes[spacing];\n\n
|
|
1
|
+
{"version":3,"file":"Stack.cjs","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StackProps } from './types';\n\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport styles from './Stack.module.scss';\n\n/**\n * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n */\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n (\n {\n direction = 'vertical',\n alignX = 'start',\n alignY = 'start',\n spacing = 'base',\n as = 'div',\n forwardedAs,\n className,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\n const Element = forwardedAs || as;\n const isVertical = direction === 'vertical';\n\n const alignItemsKey = isVertical ? alignX : alignY;\n const justifyContentKey = isVertical ? alignY : alignX;\n\n const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';\n\n const spacingValue = theme.sizes[spacing];\n\n return (\n <Element\n className={buildClassnames([\n styles.base,\n styles[`${direction}-direction`],\n styles[`alignItems-${alignItemsKey}`],\n styles[`justifyContent-${justifyContentKey}`],\n isStretch ? styles['stretch-children'] : undefined,\n className,\n ])}\n style={{\n '--stack-gap': spacingValue,\n ...style,\n } as React.CSSProperties}\n ref={ref}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nStack.displayName = 'Stack';\n"],"names":["React","theme","buildClassnames","styles"],"mappings":";;;;;;;;;;;;AAQA;;;AAGG;MACU,KAAK,GAAGA,sBAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,GAAG,UAAU,EACtB,MAAM,GAAG,OAAO,EAChB,MAAM,GAAG,OAAO,EAChB,OAAO,GAAG,MAAM,EAChB,EAAE,GAAG,KAAK,EACV,WAAW,EACX,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAG,WAAW,IAAI,EAAE;AACjC,IAAA,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU;IAE3C,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM;IAClD,MAAM,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM;AAEtD,IAAA,MAAM,SAAS,GAAG,UAAU,GAAG,MAAM,KAAK,SAAS,GAAG,MAAM,KAAK,SAAS;IAE1E,MAAM,YAAY,GAAGC,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AAEzC,IAAA,QACED,sBAAA,CAAA,aAAA,CAAC,OAAO,IACN,SAAS,EAAEE,+BAAe,CAAC;AACzB,YAAAC,YAAM,CAAC,IAAI;AACX,YAAAA,YAAM,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,CAAC;AAChC,YAAAA,YAAM,CAAC,CAAA,WAAA,EAAc,aAAa,CAAA,CAAE,CAAC;AACrC,YAAAA,YAAM,CAAC,CAAA,eAAA,EAAkB,iBAAiB,CAAA,CAAE,CAAC;YAC7C,SAAS,GAAGA,YAAM,CAAC,kBAAkB,CAAC,GAAG,SAAS;YAClD,SAAS;SACV,CAAC,EACF,KAAK,EAAE;AACL,YAAA,aAAa,EAAE,YAAY;AAC3B,YAAA,GAAG,KAAK;SACc,EACxB,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,EAEP,QAAQ,CACD;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
|
|
@@ -15,9 +15,6 @@ const Stack = React__default.forwardRef(({ direction = 'vertical', alignX = 'sta
|
|
|
15
15
|
const justifyContentKey = isVertical ? alignY : alignX;
|
|
16
16
|
const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';
|
|
17
17
|
const spacingValue = theme.sizes[spacing];
|
|
18
|
-
const spacingStyle = isVertical
|
|
19
|
-
? { rowGap: spacingValue }
|
|
20
|
-
: { columnGap: spacingValue };
|
|
21
18
|
return (React__default.createElement(Element, { className: buildClassnames([
|
|
22
19
|
styles.base,
|
|
23
20
|
styles[`${direction}-direction`],
|
|
@@ -26,7 +23,7 @@ const Stack = React__default.forwardRef(({ direction = 'vertical', alignX = 'sta
|
|
|
26
23
|
isStretch ? styles['stretch-children'] : undefined,
|
|
27
24
|
className,
|
|
28
25
|
]), style: {
|
|
29
|
-
|
|
26
|
+
'--stack-gap': spacingValue,
|
|
30
27
|
...style,
|
|
31
28
|
}, ref: ref, ...rest }, children));
|
|
32
29
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StackProps } from './types';\n\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport styles from './Stack.module.scss';\n\n/**\n * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n */\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n (\n {\n direction = 'vertical',\n alignX = 'start',\n alignY = 'start',\n spacing = 'base',\n as = 'div',\n forwardedAs,\n className,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\n const Element = forwardedAs || as;\n const isVertical = direction === 'vertical';\n\n const alignItemsKey = isVertical ? alignX : alignY;\n const justifyContentKey = isVertical ? alignY : alignX;\n\n const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';\n\n const spacingValue = theme.sizes[spacing];\n\n
|
|
1
|
+
{"version":3,"file":"Stack.js","sources":["../../../src/components/Stack/Stack.tsx"],"sourcesContent":["import React from 'react';\n\nimport { StackProps } from './types';\n\nimport { theme } from '../../theme';\nimport { buildClassnames } from '../../utils';\nimport styles from './Stack.module.scss';\n\n/**\n * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.\n * Layout component.\n */\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n (\n {\n direction = 'vertical',\n alignX = 'start',\n alignY = 'start',\n spacing = 'base',\n as = 'div',\n forwardedAs,\n className,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\n const Element = forwardedAs || as;\n const isVertical = direction === 'vertical';\n\n const alignItemsKey = isVertical ? alignX : alignY;\n const justifyContentKey = isVertical ? alignY : alignX;\n\n const isStretch = isVertical ? alignY === 'stretch' : alignX === 'stretch';\n\n const spacingValue = theme.sizes[spacing];\n\n return (\n <Element\n className={buildClassnames([\n styles.base,\n styles[`${direction}-direction`],\n styles[`alignItems-${alignItemsKey}`],\n styles[`justifyContent-${justifyContentKey}`],\n isStretch ? styles['stretch-children'] : undefined,\n className,\n ])}\n style={{\n '--stack-gap': spacingValue,\n ...style,\n } as React.CSSProperties}\n ref={ref}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nStack.displayName = 'Stack';\n"],"names":["React"],"mappings":";;;;;;AAQA;;;AAGG;MACU,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,GAAG,UAAU,EACtB,MAAM,GAAG,OAAO,EAChB,MAAM,GAAG,OAAO,EAChB,OAAO,GAAG,MAAM,EAChB,EAAE,GAAG,KAAK,EACV,WAAW,EACX,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,IAAA,MAAM,OAAO,GAAG,WAAW,IAAI,EAAE;AACjC,IAAA,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU;IAE3C,MAAM,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM;IAClD,MAAM,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM;AAEtD,IAAA,MAAM,SAAS,GAAG,UAAU,GAAG,MAAM,KAAK,SAAS,GAAG,MAAM,KAAK,SAAS;IAE1E,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AAEzC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,IACN,SAAS,EAAE,eAAe,CAAC;AACzB,YAAA,MAAM,CAAC,IAAI;AACX,YAAA,MAAM,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,CAAC;AAChC,YAAA,MAAM,CAAC,CAAA,WAAA,EAAc,aAAa,CAAA,CAAE,CAAC;AACrC,YAAA,MAAM,CAAC,CAAA,eAAA,EAAkB,iBAAiB,CAAA,CAAE,CAAC;YAC7C,SAAS,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,SAAS;YAClD,SAAS;SACV,CAAC,EACF,KAAK,EAAE;AACL,YAAA,aAAa,EAAE,YAAY;AAC3B,YAAA,GAAG,KAAK;SACc,EACxB,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,EAEP,QAAQ,CACD;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"base":"
|
|
5
|
+
___$insertStyle("._base_8pk2s_1 {\n display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_8pk2s_6 {\n flex-direction: column;\n}\n\n._horizontal-direction_8pk2s_10 {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_8pk2s_15 {\n align-items: flex-start;\n}\n\n._alignItems-center_8pk2s_19 {\n align-items: center;\n}\n\n._alignItems-end_8pk2s_23 {\n align-items: flex-end;\n}\n\n._alignItems-stretch_8pk2s_27 {\n align-items: stretch;\n}\n\n._alignItems-between_8pk2s_31 {\n align-items: space-between;\n}\n\n._alignItems-around_8pk2s_35 {\n align-items: space-around;\n}\n\n._justifyContent-start_8pk2s_39 {\n justify-content: flex-start;\n}\n\n._justifyContent-center_8pk2s_43 {\n justify-content: center;\n}\n\n._justifyContent-end_8pk2s_47 {\n justify-content: flex-end;\n}\n\n._justifyContent-stretch_8pk2s_51 {\n justify-content: stretch;\n}\n\n._justifyContent-between_8pk2s_55 {\n justify-content: space-between;\n}\n\n._justifyContent-around_8pk2s_59 {\n justify-content: space-around;\n}\n\n/* Spacing is applied via a CSS variable (--stack-gap) set as an inline style\n on the container, consumed by the gap rules below. Unlike the `> * + *`\n margin approach, gap evaluates on the CONTAINER element, so nested Stacks\n cannot shadow each other's spacing values.\n Using a class-based rule (not inline gap) allows SC consumers to override\n with `row-gap: 0` or `gap: 0` in their styled CSS. */\n._base_8pk2s_1._vertical-direction_8pk2s_6 {\n row-gap: var(--stack-gap, 0);\n}\n\n._base_8pk2s_1._horizontal-direction_8pk2s_10 {\n column-gap: var(--stack-gap, 0);\n}\n\n/* Reset directional margins on direct children so gap is the sole spacing\n source. */\n._base_8pk2s_1._vertical-direction_8pk2s_6 > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n._base_8pk2s_1._horizontal-direction_8pk2s_10 > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_8pk2s_90 > * {\n flex: 1;\n}");
|
|
6
|
+
var styles = {"base":"_base_8pk2s_1","vertical-direction":"_vertical-direction_8pk2s_6","horizontal-direction":"_horizontal-direction_8pk2s_10","alignItems-start":"_alignItems-start_8pk2s_15","alignItems-center":"_alignItems-center_8pk2s_19","alignItems-end":"_alignItems-end_8pk2s_23","alignItems-stretch":"_alignItems-stretch_8pk2s_27","alignItems-between":"_alignItems-between_8pk2s_31","alignItems-around":"_alignItems-around_8pk2s_35","justifyContent-start":"_justifyContent-start_8pk2s_39","justifyContent-center":"_justifyContent-center_8pk2s_43","justifyContent-end":"_justifyContent-end_8pk2s_47","justifyContent-stretch":"_justifyContent-stretch_8pk2s_51","justifyContent-between":"_justifyContent-between_8pk2s_55","justifyContent-around":"_justifyContent-around_8pk2s_59","stretch-children":"_stretch-children_8pk2s_90"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=Stack.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.module.scss.cjs","sources":["../../../src/components/Stack/Stack.module.scss"],"sourcesContent":["@use './variables.scss' as vars;\n\n.base {\n display: flex;\n}\n\n/* Direction classes */\n.vertical-direction {\n flex-direction: column;\n}\n\n.horizontal-direction {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n@each $name, $value in vars.$align-items {\n .alignItems-#{$name} {\n align-items: $value;\n }\n}\n\n@each $name, $value in vars.$justify-content {\n .justifyContent-#{$name} {\n justify-content: $value;\n }\n}\n\n/* Spacing is applied via
|
|
1
|
+
{"version":3,"file":"Stack.module.scss.cjs","sources":["../../../src/components/Stack/Stack.module.scss"],"sourcesContent":["@use './variables.scss' as vars;\n\n.base {\n display: flex;\n}\n\n/* Direction classes */\n.vertical-direction {\n flex-direction: column;\n}\n\n.horizontal-direction {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n@each $name, $value in vars.$align-items {\n .alignItems-#{$name} {\n align-items: $value;\n }\n}\n\n@each $name, $value in vars.$justify-content {\n .justifyContent-#{$name} {\n justify-content: $value;\n }\n}\n\n/* Spacing is applied via a CSS variable (--stack-gap) set as an inline style\n on the container, consumed by the gap rules below. Unlike the `> * + *`\n margin approach, gap evaluates on the CONTAINER element, so nested Stacks\n cannot shadow each other's spacing values.\n Using a class-based rule (not inline gap) allows SC consumers to override\n with `row-gap: 0` or `gap: 0` in their styled CSS. */\n.base.vertical-direction {\n row-gap: var(--stack-gap, 0);\n}\n\n.base.horizontal-direction {\n column-gap: var(--stack-gap, 0);\n}\n\n/* Reset directional margins on direct children so gap is the sole spacing\n source. */\n.base.vertical-direction > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.base.horizontal-direction > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n.stretch-children > * {\n flex: 1;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,q+DAAA;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"base":"
|
|
3
|
+
insertStyle("._base_8pk2s_1 {\n display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_8pk2s_6 {\n flex-direction: column;\n}\n\n._horizontal-direction_8pk2s_10 {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_8pk2s_15 {\n align-items: flex-start;\n}\n\n._alignItems-center_8pk2s_19 {\n align-items: center;\n}\n\n._alignItems-end_8pk2s_23 {\n align-items: flex-end;\n}\n\n._alignItems-stretch_8pk2s_27 {\n align-items: stretch;\n}\n\n._alignItems-between_8pk2s_31 {\n align-items: space-between;\n}\n\n._alignItems-around_8pk2s_35 {\n align-items: space-around;\n}\n\n._justifyContent-start_8pk2s_39 {\n justify-content: flex-start;\n}\n\n._justifyContent-center_8pk2s_43 {\n justify-content: center;\n}\n\n._justifyContent-end_8pk2s_47 {\n justify-content: flex-end;\n}\n\n._justifyContent-stretch_8pk2s_51 {\n justify-content: stretch;\n}\n\n._justifyContent-between_8pk2s_55 {\n justify-content: space-between;\n}\n\n._justifyContent-around_8pk2s_59 {\n justify-content: space-around;\n}\n\n/* Spacing is applied via a CSS variable (--stack-gap) set as an inline style\n on the container, consumed by the gap rules below. Unlike the `> * + *`\n margin approach, gap evaluates on the CONTAINER element, so nested Stacks\n cannot shadow each other's spacing values.\n Using a class-based rule (not inline gap) allows SC consumers to override\n with `row-gap: 0` or `gap: 0` in their styled CSS. */\n._base_8pk2s_1._vertical-direction_8pk2s_6 {\n row-gap: var(--stack-gap, 0);\n}\n\n._base_8pk2s_1._horizontal-direction_8pk2s_10 {\n column-gap: var(--stack-gap, 0);\n}\n\n/* Reset directional margins on direct children so gap is the sole spacing\n source. */\n._base_8pk2s_1._vertical-direction_8pk2s_6 > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n._base_8pk2s_1._horizontal-direction_8pk2s_10 > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_8pk2s_90 > * {\n flex: 1;\n}");
|
|
4
|
+
var styles = {"base":"_base_8pk2s_1","vertical-direction":"_vertical-direction_8pk2s_6","horizontal-direction":"_horizontal-direction_8pk2s_10","alignItems-start":"_alignItems-start_8pk2s_15","alignItems-center":"_alignItems-center_8pk2s_19","alignItems-end":"_alignItems-end_8pk2s_23","alignItems-stretch":"_alignItems-stretch_8pk2s_27","alignItems-between":"_alignItems-between_8pk2s_31","alignItems-around":"_alignItems-around_8pk2s_35","justifyContent-start":"_justifyContent-start_8pk2s_39","justifyContent-center":"_justifyContent-center_8pk2s_43","justifyContent-end":"_justifyContent-end_8pk2s_47","justifyContent-stretch":"_justifyContent-stretch_8pk2s_51","justifyContent-between":"_justifyContent-between_8pk2s_55","justifyContent-around":"_justifyContent-around_8pk2s_59","stretch-children":"_stretch-children_8pk2s_90"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=Stack.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Stack.module.scss.js","sources":["../../../src/components/Stack/Stack.module.scss"],"sourcesContent":["@use './variables.scss' as vars;\n\n.base {\n display: flex;\n}\n\n/* Direction classes */\n.vertical-direction {\n flex-direction: column;\n}\n\n.horizontal-direction {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n@each $name, $value in vars.$align-items {\n .alignItems-#{$name} {\n align-items: $value;\n }\n}\n\n@each $name, $value in vars.$justify-content {\n .justifyContent-#{$name} {\n justify-content: $value;\n }\n}\n\n/* Spacing is applied via
|
|
1
|
+
{"version":3,"file":"Stack.module.scss.js","sources":["../../../src/components/Stack/Stack.module.scss"],"sourcesContent":["@use './variables.scss' as vars;\n\n.base {\n display: flex;\n}\n\n/* Direction classes */\n.vertical-direction {\n flex-direction: column;\n}\n\n.horizontal-direction {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n@each $name, $value in vars.$align-items {\n .alignItems-#{$name} {\n align-items: $value;\n }\n}\n\n@each $name, $value in vars.$justify-content {\n .justifyContent-#{$name} {\n justify-content: $value;\n }\n}\n\n/* Spacing is applied via a CSS variable (--stack-gap) set as an inline style\n on the container, consumed by the gap rules below. Unlike the `> * + *`\n margin approach, gap evaluates on the CONTAINER element, so nested Stacks\n cannot shadow each other's spacing values.\n Using a class-based rule (not inline gap) allows SC consumers to override\n with `row-gap: 0` or `gap: 0` in their styled CSS. */\n.base.vertical-direction {\n row-gap: var(--stack-gap, 0);\n}\n\n.base.horizontal-direction {\n column-gap: var(--stack-gap, 0);\n}\n\n/* Reset directional margins on direct children so gap is the sole spacing\n source. */\n.base.vertical-direction > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.base.horizontal-direction > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n.stretch-children > * {\n flex: 1;\n}\n"],"names":["___$insertStyle"],"mappings":";;AAGEA,WAAA,CAAA,q+DAAA;;;;;"}
|