@veeqo/ui 14.3.0-beta-2 → 14.3.0-beta-6

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.
@@ -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<HTMLElement, StackProps & React.HTMLAttributes<HTMLElement>>(\n (\n {\n direction = 'vertical',\n alignX = 'start',\n alignY = 'start',\n spacing = 'base',\n as: Element = 'div',\n className,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\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 const spacingStyle = isVertical\n ? { rowGap: spacingValue }\n : { columnGap: spacingValue };\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 ...spacingStyle,\n ...style,\n }}\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,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,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;IAEzC,MAAM,YAAY,GAAG;AACnB,UAAE,EAAE,MAAM,EAAE,YAAY;AACxB,UAAE,EAAE,SAAS,EAAE,YAAY,EAAE;AAE/B,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,GAAG,YAAY;AACf,YAAA,GAAG,KAAK;SACT,EACD,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,EAEP,QAAQ,CACD;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
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: Element = 'div',\n className,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\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 const spacingStyle = isVertical\n ? { rowGap: spacingValue }\n : { columnGap: spacingValue };\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 ...spacingStyle,\n ...style,\n }}\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,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,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;IAEzC,MAAM,YAAY,GAAG;AACnB,UAAE,EAAE,MAAM,EAAE,YAAY;AACxB,UAAE,EAAE,SAAS,EAAE,YAAY,EAAE;AAE/B,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,GAAG,YAAY;AACf,YAAA,GAAG,KAAK;SACT,EACD,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,EAEP,QAAQ,CACD;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
@@ -1,7 +1,12 @@
1
1
  import React from 'react';
2
- import { StackProps } from './types';
3
2
  /**
4
3
  * @deprecated Replaced by {@link FlexCol} and {@link FlexRow}.
5
4
  * Layout component.
6
5
  */
7
- export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
6
+ export declare const Stack: React.ForwardRefExoticComponent<{
7
+ direction?: "horizontal" | "vertical" | undefined;
8
+ alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
9
+ alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
10
+ spacing?: keyof import("./types").SizeScale | undefined;
11
+ as?: React.ElementType<any> | undefined;
12
+ } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
@@ -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<HTMLElement, StackProps & React.HTMLAttributes<HTMLElement>>(\n (\n {\n direction = 'vertical',\n alignX = 'start',\n alignY = 'start',\n spacing = 'base',\n as: Element = 'div',\n className,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\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 const spacingStyle = isVertical\n ? { rowGap: spacingValue }\n : { columnGap: spacingValue };\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 ...spacingStyle,\n ...style,\n }}\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,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,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;IAEzC,MAAM,YAAY,GAAG;AACnB,UAAE,EAAE,MAAM,EAAE,YAAY;AACxB,UAAE,EAAE,SAAS,EAAE,YAAY,EAAE;AAE/B,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,GAAG,YAAY;AACf,YAAA,GAAG,KAAK;SACT,EACD,GAAG,EAAE,GAAG,EAAA,GACJ,IAAI,EAAA,EAEP,QAAQ,CACD;AAEd,CAAC;AAGH,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}
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: Element = 'div',\n className,\n children,\n style,\n ...rest\n },\n ref,\n ) => {\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 const spacingStyle = isVertical\n ? { rowGap: spacingValue }\n : { columnGap: spacingValue };\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 ...spacingStyle,\n ...style,\n }}\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,EAAE,OAAO,GAAG,KAAK,EACnB,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,KACD;AACF,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;IAEzC,MAAM,YAAY,GAAG;AACnB,UAAE,EAAE,MAAM,EAAE,YAAY;AACxB,UAAE,EAAE,SAAS,EAAE,YAAY,EAAE;AAE/B,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,GAAG,YAAY;AACf,YAAA,GAAG,KAAK;SACT,EACD,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("._base_1i7yi_1 {\n display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_1i7yi_6 {\n flex-direction: column;\n}\n\n._horizontal-direction_1i7yi_10 {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_1i7yi_15 {\n align-items: flex-start;\n}\n\n._alignItems-center_1i7yi_19 {\n align-items: center;\n}\n\n._alignItems-end_1i7yi_23 {\n align-items: flex-end;\n}\n\n._alignItems-stretch_1i7yi_27 {\n align-items: stretch;\n}\n\n._alignItems-between_1i7yi_31 {\n align-items: space-between;\n}\n\n._alignItems-around_1i7yi_35 {\n align-items: space-around;\n}\n\n._justifyContent-start_1i7yi_39 {\n justify-content: flex-start;\n}\n\n._justifyContent-center_1i7yi_43 {\n justify-content: center;\n}\n\n._justifyContent-end_1i7yi_47 {\n justify-content: flex-end;\n}\n\n._justifyContent-stretch_1i7yi_51 {\n justify-content: stretch;\n}\n\n._justifyContent-between_1i7yi_55 {\n justify-content: space-between;\n}\n\n._justifyContent-around_1i7yi_59 {\n justify-content: space-around;\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children have their directional margins reset so that gap is the sole\n spacing source, matching the old styled-components behavior where the\n && > * + * { margin } rule implicitly overrode child margins. */\n._base_1i7yi_1._vertical-direction_1i7yi_6 > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n._base_1i7yi_1._horizontal-direction_1i7yi_10 > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_1i7yi_80 > * {\n flex: 1;\n}");
6
- var styles = {"base":"_base_1i7yi_1","vertical-direction":"_vertical-direction_1i7yi_6","horizontal-direction":"_horizontal-direction_1i7yi_10","alignItems-start":"_alignItems-start_1i7yi_15","alignItems-center":"_alignItems-center_1i7yi_19","alignItems-end":"_alignItems-end_1i7yi_23","alignItems-stretch":"_alignItems-stretch_1i7yi_27","alignItems-between":"_alignItems-between_1i7yi_31","alignItems-around":"_alignItems-around_1i7yi_35","justifyContent-start":"_justifyContent-start_1i7yi_39","justifyContent-center":"_justifyContent-center_1i7yi_43","justifyContent-end":"_justifyContent-end_1i7yi_47","justifyContent-stretch":"_justifyContent-stretch_1i7yi_51","justifyContent-between":"_justifyContent-between_1i7yi_55","justifyContent-around":"_justifyContent-around_1i7yi_59","stretch-children":"_stretch-children_1i7yi_80"};
5
+ ___$insertStyle("._base_109hi_1 {\n display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_109hi_6 {\n flex-direction: column;\n}\n\n._horizontal-direction_109hi_10 {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_109hi_15 {\n align-items: flex-start;\n}\n\n._alignItems-center_109hi_19 {\n align-items: center;\n}\n\n._alignItems-end_109hi_23 {\n align-items: flex-end;\n}\n\n._alignItems-stretch_109hi_27 {\n align-items: stretch;\n}\n\n._alignItems-between_109hi_31 {\n align-items: space-between;\n}\n\n._alignItems-around_109hi_35 {\n align-items: space-around;\n}\n\n._justifyContent-start_109hi_39 {\n justify-content: flex-start;\n}\n\n._justifyContent-center_109hi_43 {\n justify-content: center;\n}\n\n._justifyContent-end_109hi_47 {\n justify-content: flex-end;\n}\n\n._justifyContent-stretch_109hi_51 {\n justify-content: stretch;\n}\n\n._justifyContent-between_109hi_55 {\n justify-content: space-between;\n}\n\n._justifyContent-around_109hi_59 {\n justify-content: space-around;\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children (except the first) have the specific directional margin\n reset that the old SC rule `&& > * + * { margin-top/left }` controlled.\n Only the margin that Stack historically set is reset; other margins\n (e.g., margin-bottom, margin-right) are left untouched. */\n._base_109hi_1._vertical-direction_109hi_6 > * + * {\n margin-top: 0;\n}\n\n._base_109hi_1._horizontal-direction_109hi_10 > * + * {\n margin-left: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_109hi_79 > * {\n flex: 1;\n}");
6
+ var styles = {"base":"_base_109hi_1","vertical-direction":"_vertical-direction_109hi_6","horizontal-direction":"_horizontal-direction_109hi_10","alignItems-start":"_alignItems-start_109hi_15","alignItems-center":"_alignItems-center_109hi_19","alignItems-end":"_alignItems-end_109hi_23","alignItems-stretch":"_alignItems-stretch_109hi_27","alignItems-between":"_alignItems-between_109hi_31","alignItems-around":"_alignItems-around_109hi_35","justifyContent-start":"_justifyContent-start_109hi_39","justifyContent-center":"_justifyContent-center_109hi_43","justifyContent-end":"_justifyContent-end_109hi_47","justifyContent-stretch":"_justifyContent-stretch_109hi_51","justifyContent-between":"_justifyContent-between_109hi_55","justifyContent-around":"_justifyContent-around_109hi_59","stretch-children":"_stretch-children_109hi_79"};
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 row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children have their directional margins reset so that gap is the sole\n spacing source, matching the old styled-components behavior where the\n && > * + * { margin } rule implicitly overrode child margins. */\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,4uDAAA;;;;;"}
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 row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children (except the first) have the specific directional margin\n reset that the old SC rule `&& > * + * { margin-top/left }` controlled.\n Only the margin that Stack historically set is reset; other margins\n (e.g., margin-bottom, margin-right) are left untouched. */\n.base.vertical-direction > * + * {\n margin-top: 0;\n}\n\n.base.horizontal-direction > * + * {\n margin-left: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n.stretch-children > * {\n flex: 1;\n}\n"],"names":[],"mappings":";;;;AAGE,eAAA,CAAA,0wDAAA;;;;;"}
@@ -1,7 +1,7 @@
1
1
  import insertStyle from '../../_virtual/____insertStyle.js';
2
2
 
3
- insertStyle("._base_1i7yi_1 {\n display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_1i7yi_6 {\n flex-direction: column;\n}\n\n._horizontal-direction_1i7yi_10 {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_1i7yi_15 {\n align-items: flex-start;\n}\n\n._alignItems-center_1i7yi_19 {\n align-items: center;\n}\n\n._alignItems-end_1i7yi_23 {\n align-items: flex-end;\n}\n\n._alignItems-stretch_1i7yi_27 {\n align-items: stretch;\n}\n\n._alignItems-between_1i7yi_31 {\n align-items: space-between;\n}\n\n._alignItems-around_1i7yi_35 {\n align-items: space-around;\n}\n\n._justifyContent-start_1i7yi_39 {\n justify-content: flex-start;\n}\n\n._justifyContent-center_1i7yi_43 {\n justify-content: center;\n}\n\n._justifyContent-end_1i7yi_47 {\n justify-content: flex-end;\n}\n\n._justifyContent-stretch_1i7yi_51 {\n justify-content: stretch;\n}\n\n._justifyContent-between_1i7yi_55 {\n justify-content: space-between;\n}\n\n._justifyContent-around_1i7yi_59 {\n justify-content: space-around;\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children have their directional margins reset so that gap is the sole\n spacing source, matching the old styled-components behavior where the\n && > * + * { margin } rule implicitly overrode child margins. */\n._base_1i7yi_1._vertical-direction_1i7yi_6 > * {\n margin-top: 0;\n margin-bottom: 0;\n}\n\n._base_1i7yi_1._horizontal-direction_1i7yi_10 > * {\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_1i7yi_80 > * {\n flex: 1;\n}");
4
- var styles = {"base":"_base_1i7yi_1","vertical-direction":"_vertical-direction_1i7yi_6","horizontal-direction":"_horizontal-direction_1i7yi_10","alignItems-start":"_alignItems-start_1i7yi_15","alignItems-center":"_alignItems-center_1i7yi_19","alignItems-end":"_alignItems-end_1i7yi_23","alignItems-stretch":"_alignItems-stretch_1i7yi_27","alignItems-between":"_alignItems-between_1i7yi_31","alignItems-around":"_alignItems-around_1i7yi_35","justifyContent-start":"_justifyContent-start_1i7yi_39","justifyContent-center":"_justifyContent-center_1i7yi_43","justifyContent-end":"_justifyContent-end_1i7yi_47","justifyContent-stretch":"_justifyContent-stretch_1i7yi_51","justifyContent-between":"_justifyContent-between_1i7yi_55","justifyContent-around":"_justifyContent-around_1i7yi_59","stretch-children":"_stretch-children_1i7yi_80"};
3
+ insertStyle("._base_109hi_1 {\n display: flex;\n}\n\n/* Direction classes */\n._vertical-direction_109hi_6 {\n flex-direction: column;\n}\n\n._horizontal-direction_109hi_10 {\n flex-direction: row;\n}\n\n/* Alignment classes from SCSS maps */\n._alignItems-start_109hi_15 {\n align-items: flex-start;\n}\n\n._alignItems-center_109hi_19 {\n align-items: center;\n}\n\n._alignItems-end_109hi_23 {\n align-items: flex-end;\n}\n\n._alignItems-stretch_109hi_27 {\n align-items: stretch;\n}\n\n._alignItems-between_109hi_31 {\n align-items: space-between;\n}\n\n._alignItems-around_109hi_35 {\n align-items: space-around;\n}\n\n._justifyContent-start_109hi_39 {\n justify-content: flex-start;\n}\n\n._justifyContent-center_109hi_43 {\n justify-content: center;\n}\n\n._justifyContent-end_109hi_47 {\n justify-content: flex-end;\n}\n\n._justifyContent-stretch_109hi_51 {\n justify-content: stretch;\n}\n\n._justifyContent-between_109hi_55 {\n justify-content: space-between;\n}\n\n._justifyContent-around_109hi_59 {\n justify-content: space-around;\n}\n\n/* Spacing is applied via row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children (except the first) have the specific directional margin\n reset that the old SC rule `&& > * + * { margin-top/left }` controlled.\n Only the margin that Stack historically set is reset; other margins\n (e.g., margin-bottom, margin-right) are left untouched. */\n._base_109hi_1._vertical-direction_109hi_6 > * + * {\n margin-top: 0;\n}\n\n._base_109hi_1._horizontal-direction_109hi_10 > * + * {\n margin-left: 0;\n}\n\n/* Stretch modifier: child items get flex: 1 */\n._stretch-children_109hi_79 > * {\n flex: 1;\n}");
4
+ var styles = {"base":"_base_109hi_1","vertical-direction":"_vertical-direction_109hi_6","horizontal-direction":"_horizontal-direction_109hi_10","alignItems-start":"_alignItems-start_109hi_15","alignItems-center":"_alignItems-center_109hi_19","alignItems-end":"_alignItems-end_109hi_23","alignItems-stretch":"_alignItems-stretch_109hi_27","alignItems-between":"_alignItems-between_109hi_31","alignItems-around":"_alignItems-around_109hi_35","justifyContent-start":"_justifyContent-start_109hi_39","justifyContent-center":"_justifyContent-center_109hi_43","justifyContent-end":"_justifyContent-end_109hi_47","justifyContent-stretch":"_justifyContent-stretch_109hi_51","justifyContent-between":"_justifyContent-between_109hi_55","justifyContent-around":"_justifyContent-around_109hi_59","stretch-children":"_stretch-children_109hi_79"};
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 row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children have their directional margins reset so that gap is the sole\n spacing source, matching the old styled-components behavior where the\n && > * + * { margin } rule implicitly overrode child margins. */\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,4uDAAA;;;;;"}
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 row-gap / column-gap as an inline style on the\n container (see Stack.tsx). gap is resolved on the parent element, so nested\n Stacks cannot shadow each other's spacing values.\n Direct children (except the first) have the specific directional margin\n reset that the old SC rule `&& > * + * { margin-top/left }` controlled.\n Only the margin that Stack historically set is reset; other margins\n (e.g., margin-bottom, margin-right) are left untouched. */\n.base.vertical-direction > * + * {\n margin-top: 0;\n}\n\n.base.horizontal-direction > * + * {\n margin-left: 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,0wDAAA;;;;;"}
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import { HTMLAttributes } from 'react';
2
2
  import { Alignments } from './Alignments';
3
3
  type Alignment = keyof typeof Alignments;
4
4
  declare enum SizeAlias {
@@ -22,11 +22,6 @@ export declare const sizeAliases: SizeScale;
22
22
  declare const sizes: SizeScale;
23
23
  export type Size = keyof typeof sizes;
24
24
  export type StackProps = {
25
- children: ReactNode;
26
- /**
27
- * Classname for description
28
- */
29
- className?: string;
30
25
  /**
31
26
  * Direction of component
32
27
  */
@@ -38,5 +33,5 @@ export type StackProps = {
38
33
  * Polymorphic element type. Defaults to 'div'.
39
34
  */
40
35
  as?: React.ElementType;
41
- };
36
+ } & HTMLAttributes<HTMLDivElement>;
42
37
  export {};
@@ -1,5 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  import { FormComponentProps } from '../types';
3
- export declare const ContainerStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, FormComponentProps, never>;
3
+ export declare const ContainerStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
4
+ direction?: "horizontal" | "vertical" | undefined;
5
+ alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
6
+ alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
7
+ spacing?: keyof import("../Stack").SizeScale | undefined;
8
+ as?: import("react").ElementType<any> | undefined;
9
+ } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, FormComponentProps, never>;
4
10
  export declare const StepButton: import("styled-components").StyledComponent<"button", any, FormComponentProps, never>;
5
11
  export declare const StepperDivider: import("styled-components").StyledComponent<"div", any, Pick<FormComponentProps, "compact">, never>;
@@ -1,13 +1,31 @@
1
1
  /// <reference types="react" />
2
- export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
3
- export declare const Toast: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, {
2
+ export declare const ToastsLayoutContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
3
+ direction?: "horizontal" | "vertical" | undefined;
4
+ alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
5
+ alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
6
+ spacing?: keyof import("../../Stack").SizeScale | undefined;
7
+ as?: import("react").ElementType<any> | undefined;
8
+ } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
9
+ export declare const Toast: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
10
+ direction?: "horizontal" | "vertical" | undefined;
11
+ alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
12
+ alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
13
+ spacing?: keyof import("../../Stack").SizeScale | undefined;
14
+ as?: import("react").ElementType<any> | undefined;
15
+ } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
4
16
  minWidth: number | string;
5
17
  last: boolean;
6
18
  }, never>;
7
19
  export declare const IconWrap: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {
8
20
  color: string;
9
21
  }, never>;
10
- export declare const ContentStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
22
+ export declare const ContentStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
23
+ direction?: "horizontal" | "vertical" | undefined;
24
+ alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
25
+ alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
26
+ spacing?: keyof import("../../Stack").SizeScale | undefined;
27
+ as?: import("react").ElementType<any> | undefined;
28
+ } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
11
29
  export declare const StyledText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
12
30
  as?: import("../../Text").ValidTextTag | undefined;
13
31
  muted?: boolean | undefined;
@@ -1,5 +1,11 @@
1
1
  /// <reference types="react" />
2
- export declare const RootStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../components/Stack").StackProps & import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
2
+ export declare const RootStack: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
3
+ direction?: "horizontal" | "vertical" | undefined;
4
+ alignX?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
5
+ alignY?: "start" | "end" | "center" | "stretch" | "between" | "around" | undefined;
6
+ spacing?: keyof import("../../components/Stack").SizeScale | undefined;
7
+ as?: import("react").ElementType<any> | undefined;
8
+ } & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
3
9
  export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
4
10
  export declare const Hint: import("styled-components").StyledComponent<"span", any, {}, never>;
5
11
  export declare const Error: import("styled-components").StyledComponent<"span", any, {}, never>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@veeqo/ui",
3
- "version": "14.3.0-beta-2",
3
+ "version": "14.3.0-beta-6",
4
4
  "description": "New optimised component library for Veeqo.",
5
5
  "author": "Robert Wealthall",
6
6
  "license": "ISC",