@negative-space/grid 1.2.1 → 1.3.1
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/index.d.mts +8 -6
- package/dist/index.d.ts +8 -6
- package/dist/index.js +15 -10
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +15 -10
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.d.mts
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
type GridElement = 'div' | 'aside' | 'header' | 'footer' | 'main' | 'section' | 'nav' | 'article' | 'label' | 'fieldset' | 'ol' | 'ul' | 'li' | 'dl' | 'dt' | 'dd' | 'form';
|
|
4
4
|
type GridProps<E extends GridElement = 'div'> = {
|
|
5
5
|
as?: E;
|
|
6
6
|
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
7
7
|
rows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
gap?: CSSProperties['gap'];
|
|
9
|
+
alignItems?: CSSProperties['alignItems'];
|
|
10
|
+
justifyItems?: CSSProperties['justifyItems'];
|
|
11
|
+
alignContent?: CSSProperties['alignContent'];
|
|
12
|
+
justifyContent?: CSSProperties['justifyContent'];
|
|
13
|
+
style?: CSSProperties;
|
|
12
14
|
} & React.ComponentPropsWithoutRef<E>;
|
|
13
|
-
declare const Grid: React.ForwardRefExoticComponent<GridProps<GridElement> & React.RefAttributes<HTMLElement |
|
|
15
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps<GridElement> & React.RefAttributes<HTMLElement | HTMLOListElement | HTMLUListElement | HTMLLabelElement | HTMLDivElement | HTMLDListElement | HTMLFieldSetElement | HTMLFormElement | HTMLLIElement>>;
|
|
14
16
|
|
|
15
17
|
export { Grid, type GridProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
2
|
|
|
3
3
|
type GridElement = 'div' | 'aside' | 'header' | 'footer' | 'main' | 'section' | 'nav' | 'article' | 'label' | 'fieldset' | 'ol' | 'ul' | 'li' | 'dl' | 'dt' | 'dd' | 'form';
|
|
4
4
|
type GridProps<E extends GridElement = 'div'> = {
|
|
5
5
|
as?: E;
|
|
6
6
|
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
7
7
|
rows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
gap?: CSSProperties['gap'];
|
|
9
|
+
alignItems?: CSSProperties['alignItems'];
|
|
10
|
+
justifyItems?: CSSProperties['justifyItems'];
|
|
11
|
+
alignContent?: CSSProperties['alignContent'];
|
|
12
|
+
justifyContent?: CSSProperties['justifyContent'];
|
|
13
|
+
style?: CSSProperties;
|
|
12
14
|
} & React.ComponentPropsWithoutRef<E>;
|
|
13
|
-
declare const Grid: React.ForwardRefExoticComponent<GridProps<GridElement> & React.RefAttributes<HTMLElement |
|
|
15
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps<GridElement> & React.RefAttributes<HTMLElement | HTMLOListElement | HTMLUListElement | HTMLLabelElement | HTMLDivElement | HTMLDListElement | HTMLFieldSetElement | HTMLFormElement | HTMLLIElement>>;
|
|
14
16
|
|
|
15
17
|
export { Grid, type GridProps };
|
package/dist/index.js
CHANGED
|
@@ -10,31 +10,36 @@ var Grid = react.forwardRef(
|
|
|
10
10
|
as,
|
|
11
11
|
columns = 2,
|
|
12
12
|
rows = 1,
|
|
13
|
+
gap = "0.5rem",
|
|
13
14
|
alignItems = "start",
|
|
14
15
|
justifyItems = "start",
|
|
15
16
|
alignContent = "start",
|
|
16
17
|
justifyContent = "start",
|
|
17
18
|
className,
|
|
19
|
+
style,
|
|
18
20
|
children,
|
|
19
21
|
...props
|
|
20
22
|
}, ref) => {
|
|
21
23
|
const Component = as ?? "div";
|
|
22
24
|
const { global } = system.useNSUI();
|
|
25
|
+
const gridStyle = {
|
|
26
|
+
display: "grid",
|
|
27
|
+
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
28
|
+
gridTemplateRows: rows === "auto" ? "auto" : `repeat(${rows}, 1fr)`,
|
|
29
|
+
gap,
|
|
30
|
+
alignItems,
|
|
31
|
+
justifyItems,
|
|
32
|
+
alignContent,
|
|
33
|
+
justifyContent,
|
|
34
|
+
...style
|
|
35
|
+
};
|
|
23
36
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
37
|
Component,
|
|
25
38
|
{
|
|
26
39
|
...props,
|
|
27
40
|
ref,
|
|
28
|
-
className: system.cn(
|
|
29
|
-
|
|
30
|
-
columns && `${global.prefixCls}-grid-cols-${columns}`,
|
|
31
|
-
rows && `${global.prefixCls}-grid-rows-${rows}`,
|
|
32
|
-
`${global.prefixCls}-grid-align-items-${alignItems}`,
|
|
33
|
-
`${global.prefixCls}-grid-justify-items-${justifyItems}`,
|
|
34
|
-
`${global.prefixCls}-grid-align-content-${alignContent}`,
|
|
35
|
-
`${global.prefixCls}-grid-justify-content-${justifyContent}`,
|
|
36
|
-
className
|
|
37
|
-
),
|
|
41
|
+
className: system.cn(`${global.prefixCls}-grid`, className),
|
|
42
|
+
style: gridStyle,
|
|
38
43
|
children
|
|
39
44
|
}
|
|
40
45
|
);
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Grid.tsx"],"names":["forwardRef","useNSUI","jsx","cn"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Grid.tsx"],"names":["forwardRef","useNSUI","jsx","cn"],"mappings":";;;;;;;AAsDO,IAAM,IAAA,GAAOA,gBAAA;AAAA,EAClB,CACE;AAAA,IACE,EAAA;AAAA,IACA,OAAA,GAAU,CAAA;AAAA,IACV,IAAA,GAAO,CAAA;AAAA,IACP,GAAA,GAAM,QAAA;AAAA,IACN,UAAA,GAAa,OAAA;AAAA,IACb,YAAA,GAAe,OAAA;AAAA,IACf,YAAA,GAAe,OAAA;AAAA,IACf,cAAA,GAAiB,OAAA;AAAA,IACjB,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,YAAY,EAAA,IAAO,KAAA;AACzB,IAAA,MAAM,EAAE,MAAA,EAAO,GAAIC,cAAA,EAAQ;AAE3B,IAAA,MAAM,SAAA,GAA2B;AAAA,MAC/B,OAAA,EAAS,MAAA;AAAA,MACT,mBAAA,EAAqB,UAAU,OAAO,CAAA,MAAA,CAAA;AAAA,MACtC,gBAAA,EAAkB,IAAA,KAAS,MAAA,GAAS,MAAA,GAAS,UAAU,IAAI,CAAA,MAAA,CAAA;AAAA,MAC3D,GAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA;AAAA,QACA,WAAWC,SAAA,CAAG,CAAA,EAAG,MAAA,CAAO,SAAS,SAAS,SAAS,CAAA;AAAA,QACnD,KAAA,EAAO,SAAA;AAAA,QAEN;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"index.js","sourcesContent":["import React, { forwardRef, CSSProperties } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\n\ntype GridElement =\n | 'div'\n | 'aside'\n | 'header'\n | 'footer'\n | 'main'\n | 'section'\n | 'nav'\n | 'article'\n | 'label'\n | 'fieldset'\n | 'ol'\n | 'ul'\n | 'li'\n | 'dl'\n | 'dt'\n | 'dd'\n | 'form'\n\ntype GridDomMap = {\n div: HTMLDivElement\n aside: HTMLElement\n header: HTMLElement\n footer: HTMLElement\n main: HTMLElement\n section: HTMLElement\n nav: HTMLElement\n article: HTMLElement\n label: HTMLLabelElement\n fieldset: HTMLFieldSetElement\n ol: HTMLOListElement\n ul: HTMLUListElement\n li: HTMLLIElement\n dl: HTMLDListElement\n dt: HTMLElement\n dd: HTMLElement\n form: HTMLFormElement\n}\n\nexport type GridProps<E extends GridElement = 'div'> = {\n as?: E\n columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n rows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'\n gap?: CSSProperties['gap']\n alignItems?: CSSProperties['alignItems']\n justifyItems?: CSSProperties['justifyItems']\n alignContent?: CSSProperties['alignContent']\n justifyContent?: CSSProperties['justifyContent']\n style?: CSSProperties\n} & React.ComponentPropsWithoutRef<E>\n\nexport const Grid = forwardRef(\n <E extends GridElement = 'div'>(\n {\n as,\n columns = 2,\n rows = 1,\n gap = '0.5rem',\n alignItems = 'start',\n justifyItems = 'start',\n alignContent = 'start',\n justifyContent = 'start',\n className,\n style,\n children,\n ...props\n }: GridProps<E>,\n ref: React.Ref<GridDomMap[E]>\n ) => {\n const Component = as ?? ('div' as React.ElementType)\n const { global } = useNSUI()\n\n const gridStyle: CSSProperties = {\n display: 'grid',\n gridTemplateColumns: `repeat(${columns}, 1fr)`,\n gridTemplateRows: rows === 'auto' ? 'auto' : `repeat(${rows}, 1fr)`,\n gap,\n alignItems,\n justifyItems,\n alignContent,\n justifyContent,\n ...style\n }\n\n return (\n <Component\n {...props}\n ref={ref}\n className={cn(`${global.prefixCls}-grid`, className)}\n style={gridStyle}\n >\n {children}\n </Component>\n )\n }\n)\n\nGrid.displayName = 'Grid'\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -8,31 +8,36 @@ var Grid = forwardRef(
|
|
|
8
8
|
as,
|
|
9
9
|
columns = 2,
|
|
10
10
|
rows = 1,
|
|
11
|
+
gap = "0.5rem",
|
|
11
12
|
alignItems = "start",
|
|
12
13
|
justifyItems = "start",
|
|
13
14
|
alignContent = "start",
|
|
14
15
|
justifyContent = "start",
|
|
15
16
|
className,
|
|
17
|
+
style,
|
|
16
18
|
children,
|
|
17
19
|
...props
|
|
18
20
|
}, ref) => {
|
|
19
21
|
const Component = as ?? "div";
|
|
20
22
|
const { global } = useNSUI();
|
|
23
|
+
const gridStyle = {
|
|
24
|
+
display: "grid",
|
|
25
|
+
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
26
|
+
gridTemplateRows: rows === "auto" ? "auto" : `repeat(${rows}, 1fr)`,
|
|
27
|
+
gap,
|
|
28
|
+
alignItems,
|
|
29
|
+
justifyItems,
|
|
30
|
+
alignContent,
|
|
31
|
+
justifyContent,
|
|
32
|
+
...style
|
|
33
|
+
};
|
|
21
34
|
return /* @__PURE__ */ jsx(
|
|
22
35
|
Component,
|
|
23
36
|
{
|
|
24
37
|
...props,
|
|
25
38
|
ref,
|
|
26
|
-
className: cn(
|
|
27
|
-
|
|
28
|
-
columns && `${global.prefixCls}-grid-cols-${columns}`,
|
|
29
|
-
rows && `${global.prefixCls}-grid-rows-${rows}`,
|
|
30
|
-
`${global.prefixCls}-grid-align-items-${alignItems}`,
|
|
31
|
-
`${global.prefixCls}-grid-justify-items-${justifyItems}`,
|
|
32
|
-
`${global.prefixCls}-grid-align-content-${alignContent}`,
|
|
33
|
-
`${global.prefixCls}-grid-justify-content-${justifyContent}`,
|
|
34
|
-
className
|
|
35
|
-
),
|
|
39
|
+
className: cn(`${global.prefixCls}-grid`, className),
|
|
40
|
+
style: gridStyle,
|
|
36
41
|
children
|
|
37
42
|
}
|
|
38
43
|
);
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Grid.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"sources":["../src/Grid.tsx"],"names":[],"mappings":";;;;;AAsDO,IAAM,IAAA,GAAO,UAAA;AAAA,EAClB,CACE;AAAA,IACE,EAAA;AAAA,IACA,OAAA,GAAU,CAAA;AAAA,IACV,IAAA,GAAO,CAAA;AAAA,IACP,GAAA,GAAM,QAAA;AAAA,IACN,UAAA,GAAa,OAAA;AAAA,IACb,YAAA,GAAe,OAAA;AAAA,IACf,YAAA,GAAe,OAAA;AAAA,IACf,cAAA,GAAiB,OAAA;AAAA,IACjB,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,YAAY,EAAA,IAAO,KAAA;AACzB,IAAA,MAAM,EAAE,MAAA,EAAO,GAAI,OAAA,EAAQ;AAE3B,IAAA,MAAM,SAAA,GAA2B;AAAA,MAC/B,OAAA,EAAS,MAAA;AAAA,MACT,mBAAA,EAAqB,UAAU,OAAO,CAAA,MAAA,CAAA;AAAA,MACtC,gBAAA,EAAkB,IAAA,KAAS,MAAA,GAAS,MAAA,GAAS,UAAU,IAAI,CAAA,MAAA,CAAA;AAAA,MAC3D,GAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,YAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA;AAAA,QACA,WAAW,EAAA,CAAG,CAAA,EAAG,MAAA,CAAO,SAAS,SAAS,SAAS,CAAA;AAAA,QACnD,KAAA,EAAO,SAAA;AAAA,QAEN;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"index.mjs","sourcesContent":["import React, { forwardRef, CSSProperties } from 'react'\nimport { cn, useNSUI } from '@negative-space/system'\n\ntype GridElement =\n | 'div'\n | 'aside'\n | 'header'\n | 'footer'\n | 'main'\n | 'section'\n | 'nav'\n | 'article'\n | 'label'\n | 'fieldset'\n | 'ol'\n | 'ul'\n | 'li'\n | 'dl'\n | 'dt'\n | 'dd'\n | 'form'\n\ntype GridDomMap = {\n div: HTMLDivElement\n aside: HTMLElement\n header: HTMLElement\n footer: HTMLElement\n main: HTMLElement\n section: HTMLElement\n nav: HTMLElement\n article: HTMLElement\n label: HTMLLabelElement\n fieldset: HTMLFieldSetElement\n ol: HTMLOListElement\n ul: HTMLUListElement\n li: HTMLLIElement\n dl: HTMLDListElement\n dt: HTMLElement\n dd: HTMLElement\n form: HTMLFormElement\n}\n\nexport type GridProps<E extends GridElement = 'div'> = {\n as?: E\n columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n rows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto'\n gap?: CSSProperties['gap']\n alignItems?: CSSProperties['alignItems']\n justifyItems?: CSSProperties['justifyItems']\n alignContent?: CSSProperties['alignContent']\n justifyContent?: CSSProperties['justifyContent']\n style?: CSSProperties\n} & React.ComponentPropsWithoutRef<E>\n\nexport const Grid = forwardRef(\n <E extends GridElement = 'div'>(\n {\n as,\n columns = 2,\n rows = 1,\n gap = '0.5rem',\n alignItems = 'start',\n justifyItems = 'start',\n alignContent = 'start',\n justifyContent = 'start',\n className,\n style,\n children,\n ...props\n }: GridProps<E>,\n ref: React.Ref<GridDomMap[E]>\n ) => {\n const Component = as ?? ('div' as React.ElementType)\n const { global } = useNSUI()\n\n const gridStyle: CSSProperties = {\n display: 'grid',\n gridTemplateColumns: `repeat(${columns}, 1fr)`,\n gridTemplateRows: rows === 'auto' ? 'auto' : `repeat(${rows}, 1fr)`,\n gap,\n alignItems,\n justifyItems,\n alignContent,\n justifyContent,\n ...style\n }\n\n return (\n <Component\n {...props}\n ref={ref}\n className={cn(`${global.prefixCls}-grid`, className)}\n style={gridStyle}\n >\n {children}\n </Component>\n )\n }\n)\n\nGrid.displayName = 'Grid'\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@negative-space/grid",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"url": "https://github.com/negative-space-ui/nsui/issues"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@negative-space/system": "1.0
|
|
33
|
+
"@negative-space/system": "1.2.0"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"react": "^19.2.3"
|