@salt-ds/core 1.3.0 → 1.4.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-cjs/packages/core/src/flex-item/FlexItem.css.js +1 -1
- package/dist-cjs/packages/core/src/flex-item/FlexItem.js +3 -0
- package/dist-cjs/packages/core/src/flex-item/FlexItem.js.map +1 -1
- package/dist-cjs/packages/core/src/spinner/Spinner.css.js +1 -1
- package/dist-es/packages/core/src/flex-item/FlexItem.css.js +1 -1
- package/dist-es/packages/core/src/flex-item/FlexItem.js +3 -0
- package/dist-es/packages/core/src/flex-item/FlexItem.js.map +1 -1
- package/dist-es/packages/core/src/spinner/Spinner.css.js +1 -1
- package/dist-types/flex-item/FlexItem.d.ts +7 -4
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = "/* Default variables applied to the root element */\n.saltFlexItem {\n --saltFlexItem-alignment: auto;\n --saltFlexItem-shrink: 1;\n --saltFlexItem-grow: 0;\n}\n\n/* Style applied to the root element */\n.saltFlexItem {\n position: relative;\n align-self: var(--saltFlexItem-alignment);\n flex-grow: var(--saltFlexItem-grow);\n flex-shrink: var(--saltFlexItem-shrink);\n}\n\n.saltFlexItem-stacked {\n flex-grow: 2;\n}\n";
|
|
5
|
+
var css_248z = "/* Default variables applied to the root element */\n.saltFlexItem {\n --saltFlexItem-alignment: auto;\n --saltFlexItem-shrink: 1;\n --saltFlexItem-grow: 0;\n --saltFlexItem-basis: auto;\n}\n\n/* Style applied to the root element */\n.saltFlexItem {\n position: relative;\n align-self: var(--saltFlexItem-alignment);\n flex-grow: var(--saltFlexItem-grow);\n flex-shrink: var(--saltFlexItem-shrink);\n flex-basis: var(--saltFlexItem-basis);\n}\n\n.saltFlexItem-stacked {\n flex-grow: 2;\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -26,16 +26,19 @@ const FlexItem = React.forwardRef(
|
|
|
26
26
|
className,
|
|
27
27
|
shrink,
|
|
28
28
|
grow,
|
|
29
|
+
basis,
|
|
29
30
|
style,
|
|
30
31
|
...rest
|
|
31
32
|
}, ref) => {
|
|
32
33
|
const Component = as || "div";
|
|
33
34
|
const flexItemShrink = useResponsiveProp.useResponsiveProp(shrink, 1);
|
|
34
35
|
const flexItemGrow = useResponsiveProp.useResponsiveProp(grow, 0);
|
|
36
|
+
const flexItemBasis = useResponsiveProp.useResponsiveProp(basis, "auto");
|
|
35
37
|
const itemStyle = {
|
|
36
38
|
"--saltFlexItem-alignment": align,
|
|
37
39
|
"--saltFlexItem-shrink": flexItemShrink,
|
|
38
40
|
"--saltFlexItem-grow": flexItemGrow,
|
|
41
|
+
"--saltFlexItem-basis": flexItemBasis,
|
|
39
42
|
...style
|
|
40
43
|
};
|
|
41
44
|
return /* @__PURE__ */ jsxRuntime.jsx(Component, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n
|
|
1
|
+
{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement, CSSProperties } from \"react\";\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n */\n shrink?: ResponsiveProp<number>;\n /**\n * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n /**\n * Sets the initial main size of a flex item, default is \"auto\".\n */\n basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\n }\n >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n props: FlexItemProps<T>\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n shrink,\n grow,\n basis,\n style,\n ...rest\n }: FlexItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n const flexItemShrink = useResponsiveProp(shrink, 1);\n const flexItemGrow = useResponsiveProp(grow, 0);\n const flexItemBasis = useResponsiveProp(basis, \"auto\");\n\n const itemStyle = {\n \"--saltFlexItem-alignment\": align,\n \"--saltFlexItem-shrink\": flexItemShrink,\n \"--saltFlexItem-grow\": flexItemGrow,\n \"--saltFlexItem-basis\": flexItemBasis,\n ...style,\n };\n return (\n <Component\n className={clsx(withBaseName(), className)}\n ref={ref}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","useResponsiveProp","jsx","clsx"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA+BO,MAAM,QAA8B,GAAAC,gBAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,cAAA,GAAiBC,mCAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAClD,IAAM,MAAA,YAAA,GAAeA,mCAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAC9C,IAAM,MAAA,aAAA,GAAgBA,mCAAkB,CAAA,KAAA,EAAO,MAAM,CAAA,CAAA;AAErD,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,sBAAwB,EAAA,aAAA;AAAA,MACxB,GAAG,KAAA;AAAA,KACL,CAAA;AACA,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
|
|
4
4
|
|
|
5
|
-
var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n stop-color: var(--saltSpinner-gradient-color, var(--salt-
|
|
5
|
+
var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));\n}\n\n/* Styles applied when `size=\"default\"` */\n.saltSpinner-default {\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n height: calc(var(--salt-size-base) * 2);\n width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n animation: spinner 0.9s linear infinite;\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
|
|
6
6
|
styleInject_es(css_248z);
|
|
7
7
|
|
|
8
8
|
module.exports = css_248z;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Default variables applied to the root element */\n.saltFlexItem {\n --saltFlexItem-alignment: auto;\n --saltFlexItem-shrink: 1;\n --saltFlexItem-grow: 0;\n}\n\n/* Style applied to the root element */\n.saltFlexItem {\n position: relative;\n align-self: var(--saltFlexItem-alignment);\n flex-grow: var(--saltFlexItem-grow);\n flex-shrink: var(--saltFlexItem-shrink);\n}\n\n.saltFlexItem-stacked {\n flex-grow: 2;\n}\n";
|
|
3
|
+
var css_248z = "/* Default variables applied to the root element */\n.saltFlexItem {\n --saltFlexItem-alignment: auto;\n --saltFlexItem-shrink: 1;\n --saltFlexItem-grow: 0;\n --saltFlexItem-basis: auto;\n}\n\n/* Style applied to the root element */\n.saltFlexItem {\n position: relative;\n align-self: var(--saltFlexItem-alignment);\n flex-grow: var(--saltFlexItem-grow);\n flex-shrink: var(--saltFlexItem-shrink);\n flex-basis: var(--saltFlexItem-basis);\n}\n\n.saltFlexItem-stacked {\n flex-grow: 2;\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -22,16 +22,19 @@ const FlexItem = forwardRef(
|
|
|
22
22
|
className,
|
|
23
23
|
shrink,
|
|
24
24
|
grow,
|
|
25
|
+
basis,
|
|
25
26
|
style,
|
|
26
27
|
...rest
|
|
27
28
|
}, ref) => {
|
|
28
29
|
const Component = as || "div";
|
|
29
30
|
const flexItemShrink = useResponsiveProp(shrink, 1);
|
|
30
31
|
const flexItemGrow = useResponsiveProp(grow, 0);
|
|
32
|
+
const flexItemBasis = useResponsiveProp(basis, "auto");
|
|
31
33
|
const itemStyle = {
|
|
32
34
|
"--saltFlexItem-alignment": align,
|
|
33
35
|
"--saltFlexItem-shrink": flexItemShrink,
|
|
34
36
|
"--saltFlexItem-grow": flexItemGrow,
|
|
37
|
+
"--saltFlexItem-basis": flexItemBasis,
|
|
35
38
|
...style
|
|
36
39
|
};
|
|
37
40
|
return /* @__PURE__ */ jsx(Component, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement } from \"react\";\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n
|
|
1
|
+
{"version":3,"file":"FlexItem.js","sources":["../src/flex-item/FlexItem.tsx"],"sourcesContent":["import { forwardRef, ElementType, ReactElement, CSSProperties } from \"react\";\nimport {\n makePrefixer,\n ResponsiveProp,\n useResponsiveProp,\n PolymorphicComponentPropWithRef,\n PolymorphicRef,\n} from \"../utils\";\nimport \"./FlexItem.css\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltFlexItem\");\nexport const FLEX_ITEM_ALIGNMENTS = [\n \"start\",\n \"end\",\n \"center\",\n \"stretch\",\n] as const;\n\nexport type flexItemAlignment = typeof FLEX_ITEM_ALIGNMENTS[number];\n\nexport type FlexItemProps<T extends ElementType> =\n PolymorphicComponentPropWithRef<\n T,\n {\n /**\n * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n */\n align?: flexItemAlignment;\n /**\n * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n */\n shrink?: ResponsiveProp<number>;\n /**\n * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n */\n grow?: ResponsiveProp<number>;\n /**\n * Sets the initial main size of a flex item, default is \"auto\".\n */\n basis?: ResponsiveProp<CSSProperties[\"flexBasis\"]>;\n }\n >;\n\ntype FlexItemComponent = <T extends ElementType = \"div\">(\n props: FlexItemProps<T>\n) => ReactElement | null;\n\nexport const FlexItem: FlexItemComponent = forwardRef(\n <T extends ElementType = \"div\">(\n {\n as,\n align,\n children,\n className,\n shrink,\n grow,\n basis,\n style,\n ...rest\n }: FlexItemProps<T>,\n ref?: PolymorphicRef<T>\n ) => {\n const Component = as || \"div\";\n const flexItemShrink = useResponsiveProp(shrink, 1);\n const flexItemGrow = useResponsiveProp(grow, 0);\n const flexItemBasis = useResponsiveProp(basis, \"auto\");\n\n const itemStyle = {\n \"--saltFlexItem-alignment\": align,\n \"--saltFlexItem-shrink\": flexItemShrink,\n \"--saltFlexItem-grow\": flexItemGrow,\n \"--saltFlexItem-basis\": flexItemBasis,\n ...style,\n };\n return (\n <Component\n className={clsx(withBaseName(), className)}\n ref={ref}\n style={itemStyle}\n {...rest}\n >\n {children}\n </Component>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA,CAAA;AACzC,MAAM,oBAAuB,GAAA;AAAA,EAClC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AACF,EAAA;AA+BO,MAAM,QAA8B,GAAA,UAAA;AAAA,EACzC,CACE;AAAA,IACE,EAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,YAAY,EAAM,IAAA,KAAA,CAAA;AACxB,IAAM,MAAA,cAAA,GAAiB,iBAAkB,CAAA,MAAA,EAAQ,CAAC,CAAA,CAAA;AAClD,IAAM,MAAA,YAAA,GAAe,iBAAkB,CAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAC9C,IAAM,MAAA,aAAA,GAAgB,iBAAkB,CAAA,KAAA,EAAO,MAAM,CAAA,CAAA;AAErD,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,0BAA4B,EAAA,KAAA;AAAA,MAC5B,uBAAyB,EAAA,cAAA;AAAA,MACzB,qBAAuB,EAAA,YAAA;AAAA,MACvB,sBAAwB,EAAA,aAAA;AAAA,MACxB,GAAG,KAAA;AAAA,KACL,CAAA;AACA,IAAA,uBACG,GAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACN,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n stop-color: var(--saltSpinner-gradient-color, var(--salt-
|
|
3
|
+
var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));\n}\n\n/* Styles applied when `size=\"default\"` */\n.saltSpinner-default {\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n height: calc(var(--salt-size-base) * 2);\n width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n animation: spinner 0.9s linear infinite;\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n}\n\n@keyframes spinner {\n 0% {\n transform: rotate(0);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n";
|
|
4
4
|
styleInject(css_248z);
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ElementType, ReactElement } from "react";
|
|
1
|
+
import { ElementType, ReactElement, CSSProperties } from "react";
|
|
2
2
|
import { ResponsiveProp, PolymorphicComponentPropWithRef } from "../utils";
|
|
3
3
|
import "./FlexItem.css";
|
|
4
4
|
export declare const FLEX_ITEM_ALIGNMENTS: readonly ["start", "end", "center", "stretch"];
|
|
@@ -9,14 +9,17 @@ export declare type FlexItemProps<T extends ElementType> = PolymorphicComponentP
|
|
|
9
9
|
*/
|
|
10
10
|
align?: flexItemAlignment;
|
|
11
11
|
/**
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
*/
|
|
12
|
+
* Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.
|
|
13
|
+
*/
|
|
15
14
|
shrink?: ResponsiveProp<number>;
|
|
16
15
|
/**
|
|
17
16
|
* Defines the ability for an item to grow x times more compared to it's siblings, default is 0.
|
|
18
17
|
*/
|
|
19
18
|
grow?: ResponsiveProp<number>;
|
|
19
|
+
/**
|
|
20
|
+
* Sets the initial main size of a flex item, default is "auto".
|
|
21
|
+
*/
|
|
22
|
+
basis?: ResponsiveProp<CSSProperties["flexBasis"]>;
|
|
20
23
|
}>;
|
|
21
24
|
declare type FlexItemComponent = <T extends ElementType = "div">(props: FlexItemProps<T>) => ReactElement | null;
|
|
22
25
|
export declare const FlexItem: FlexItemComponent;
|