@negative-space/grid 1.0.2 → 1.2.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/index.d.mts +15 -0
- package/dist/index.d.ts +15 -0
- package/dist/index.js +47 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +45 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +3 -4
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type GridElement = 'div' | 'aside' | 'header' | 'footer' | 'main' | 'section' | 'nav' | 'article' | 'label' | 'fieldset' | 'ol' | 'ul' | 'li' | 'dl' | 'dt' | 'dd' | 'form';
|
|
4
|
+
type GridProps<E extends GridElement = 'div'> = {
|
|
5
|
+
as?: E;
|
|
6
|
+
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
7
|
+
rows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
|
|
8
|
+
alignItems?: 'start' | 'center' | 'end' | 'stretch';
|
|
9
|
+
justifyItems?: 'start' | 'center' | 'end' | 'stretch';
|
|
10
|
+
alignContent?: 'start' | 'center' | 'end' | 'stretch' | 'between' | 'around' | 'evenly';
|
|
11
|
+
justifyContent?: 'start' | 'center' | 'end' | 'stretch' | 'between' | 'around' | 'evenly';
|
|
12
|
+
} & React.ComponentPropsWithoutRef<E>;
|
|
13
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps<GridElement> & React.RefAttributes<HTMLElement | HTMLDivElement | HTMLLabelElement | HTMLFieldSetElement | HTMLOListElement | HTMLUListElement | HTMLLIElement | HTMLDListElement | HTMLFormElement>>;
|
|
14
|
+
|
|
15
|
+
export { Grid, type GridProps };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type GridElement = 'div' | 'aside' | 'header' | 'footer' | 'main' | 'section' | 'nav' | 'article' | 'label' | 'fieldset' | 'ol' | 'ul' | 'li' | 'dl' | 'dt' | 'dd' | 'form';
|
|
4
|
+
type GridProps<E extends GridElement = 'div'> = {
|
|
5
|
+
as?: E;
|
|
6
|
+
columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
7
|
+
rows?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto';
|
|
8
|
+
alignItems?: 'start' | 'center' | 'end' | 'stretch';
|
|
9
|
+
justifyItems?: 'start' | 'center' | 'end' | 'stretch';
|
|
10
|
+
alignContent?: 'start' | 'center' | 'end' | 'stretch' | 'between' | 'around' | 'evenly';
|
|
11
|
+
justifyContent?: 'start' | 'center' | 'end' | 'stretch' | 'between' | 'around' | 'evenly';
|
|
12
|
+
} & React.ComponentPropsWithoutRef<E>;
|
|
13
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps<GridElement> & React.RefAttributes<HTMLElement | HTMLDivElement | HTMLLabelElement | HTMLFieldSetElement | HTMLOListElement | HTMLUListElement | HTMLLIElement | HTMLDListElement | HTMLFormElement>>;
|
|
14
|
+
|
|
15
|
+
export { Grid, type GridProps };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var react = require('react');
|
|
4
|
+
var system = require('@negative-space/system');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
|
|
7
|
+
// src/Grid.tsx
|
|
8
|
+
var Grid = react.forwardRef(
|
|
9
|
+
({
|
|
10
|
+
as,
|
|
11
|
+
columns = 2,
|
|
12
|
+
rows = 1,
|
|
13
|
+
alignItems = "start",
|
|
14
|
+
justifyItems = "start",
|
|
15
|
+
alignContent = "start",
|
|
16
|
+
justifyContent = "start",
|
|
17
|
+
className,
|
|
18
|
+
children,
|
|
19
|
+
...props
|
|
20
|
+
}, ref) => {
|
|
21
|
+
const Component = as ?? "div";
|
|
22
|
+
const { global } = system.useNSUI();
|
|
23
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
24
|
+
Component,
|
|
25
|
+
{
|
|
26
|
+
...props,
|
|
27
|
+
ref,
|
|
28
|
+
className: system.cn(
|
|
29
|
+
`${global.prefixCls}-grid`,
|
|
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
|
+
),
|
|
38
|
+
children
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
Grid.displayName = "Grid";
|
|
44
|
+
|
|
45
|
+
exports.Grid = Grid;
|
|
46
|
+
//# sourceMappingURL=index.js.map
|
|
47
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Grid.tsx"],"names":["forwardRef","useNSUI","jsx","cn"],"mappings":";;;;;;;AAoDO,IAAM,IAAA,GAAOA,gBAAA;AAAA,EAClB,CACE;AAAA,IACE,EAAA;AAAA,IACA,OAAA,GAAU,CAAA;AAAA,IACV,IAAA,GAAO,CAAA;AAAA,IACP,UAAA,GAAa,OAAA;AAAA,IACb,YAAA,GAAe,OAAA;AAAA,IACf,YAAA,GAAe,OAAA;AAAA,IACf,cAAA,GAAiB,OAAA;AAAA,IACjB,SAAA;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,uBACEC,cAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA;AAAA,UACT,CAAA,EAAG,OAAO,SAAS,CAAA,KAAA,CAAA;AAAA,UACnB,OAAA,IAAW,CAAA,EAAG,MAAA,CAAO,SAAS,cAAc,OAAO,CAAA,CAAA;AAAA,UACnD,IAAA,IAAQ,CAAA,EAAG,MAAA,CAAO,SAAS,cAAc,IAAI,CAAA,CAAA;AAAA,UAC7C,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,kBAAA,EAAqB,UAAU,CAAA,CAAA;AAAA,UAClD,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,oBAAA,EAAuB,YAAY,CAAA,CAAA;AAAA,UACtD,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,oBAAA,EAAuB,YAAY,CAAA,CAAA;AAAA,UACtD,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,sBAAA,EAAyB,cAAc,CAAA,CAAA;AAAA,UAC1D;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"index.js","sourcesContent":["import React, { forwardRef } 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 alignItems?: 'start' | 'center' | 'end' | 'stretch'\n justifyItems?: 'start' | 'center' | 'end' | 'stretch'\n alignContent?: 'start' | 'center' | 'end' | 'stretch' | 'between' | 'around' | 'evenly'\n justifyContent?: 'start' | 'center' | 'end' | 'stretch' | 'between' | 'around' | 'evenly'\n} & React.ComponentPropsWithoutRef<E>\n\nexport const Grid = forwardRef(\n <E extends GridElement = 'div'>(\n {\n as,\n columns = 2,\n rows = 1,\n alignItems = 'start',\n justifyItems = 'start',\n alignContent = 'start',\n justifyContent = 'start',\n className,\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 return (\n <Component\n {...props}\n ref={ref}\n className={cn(\n `${global.prefixCls}-grid`,\n columns && `${global.prefixCls}-grid-cols-${columns}`,\n rows && `${global.prefixCls}-grid-rows-${rows}`,\n `${global.prefixCls}-grid-align-items-${alignItems}`,\n `${global.prefixCls}-grid-justify-items-${justifyItems}`,\n `${global.prefixCls}-grid-align-content-${alignContent}`,\n `${global.prefixCls}-grid-justify-content-${justifyContent}`,\n className\n )}\n >\n {children}\n </Component>\n )\n }\n)\n\nGrid.displayName = 'Grid'\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { useNSUI, cn } from '@negative-space/system';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
// src/Grid.tsx
|
|
6
|
+
var Grid = forwardRef(
|
|
7
|
+
({
|
|
8
|
+
as,
|
|
9
|
+
columns = 2,
|
|
10
|
+
rows = 1,
|
|
11
|
+
alignItems = "start",
|
|
12
|
+
justifyItems = "start",
|
|
13
|
+
alignContent = "start",
|
|
14
|
+
justifyContent = "start",
|
|
15
|
+
className,
|
|
16
|
+
children,
|
|
17
|
+
...props
|
|
18
|
+
}, ref) => {
|
|
19
|
+
const Component = as ?? "div";
|
|
20
|
+
const { global } = useNSUI();
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
Component,
|
|
23
|
+
{
|
|
24
|
+
...props,
|
|
25
|
+
ref,
|
|
26
|
+
className: cn(
|
|
27
|
+
`${global.prefixCls}-grid`,
|
|
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
|
+
),
|
|
36
|
+
children
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
Grid.displayName = "Grid";
|
|
42
|
+
|
|
43
|
+
export { Grid };
|
|
44
|
+
//# sourceMappingURL=index.mjs.map
|
|
45
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Grid.tsx"],"names":[],"mappings":";;;;;AAoDO,IAAM,IAAA,GAAO,UAAA;AAAA,EAClB,CACE;AAAA,IACE,EAAA;AAAA,IACA,OAAA,GAAU,CAAA;AAAA,IACV,IAAA,GAAO,CAAA;AAAA,IACP,UAAA,GAAa,OAAA;AAAA,IACb,YAAA,GAAe,OAAA;AAAA,IACf,YAAA,GAAe,OAAA;AAAA,IACf,cAAA,GAAiB,OAAA;AAAA,IACjB,SAAA;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,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,CAAA,EAAG,OAAO,SAAS,CAAA,KAAA,CAAA;AAAA,UACnB,OAAA,IAAW,CAAA,EAAG,MAAA,CAAO,SAAS,cAAc,OAAO,CAAA,CAAA;AAAA,UACnD,IAAA,IAAQ,CAAA,EAAG,MAAA,CAAO,SAAS,cAAc,IAAI,CAAA,CAAA;AAAA,UAC7C,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,kBAAA,EAAqB,UAAU,CAAA,CAAA;AAAA,UAClD,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,oBAAA,EAAuB,YAAY,CAAA,CAAA;AAAA,UACtD,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,oBAAA,EAAuB,YAAY,CAAA,CAAA;AAAA,UACtD,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,sBAAA,EAAyB,cAAc,CAAA,CAAA;AAAA,UAC1D;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA","file":"index.mjs","sourcesContent":["import React, { forwardRef } 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 alignItems?: 'start' | 'center' | 'end' | 'stretch'\n justifyItems?: 'start' | 'center' | 'end' | 'stretch'\n alignContent?: 'start' | 'center' | 'end' | 'stretch' | 'between' | 'around' | 'evenly'\n justifyContent?: 'start' | 'center' | 'end' | 'stretch' | 'between' | 'around' | 'evenly'\n} & React.ComponentPropsWithoutRef<E>\n\nexport const Grid = forwardRef(\n <E extends GridElement = 'div'>(\n {\n as,\n columns = 2,\n rows = 1,\n alignItems = 'start',\n justifyItems = 'start',\n alignContent = 'start',\n justifyContent = 'start',\n className,\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 return (\n <Component\n {...props}\n ref={ref}\n className={cn(\n `${global.prefixCls}-grid`,\n columns && `${global.prefixCls}-grid-cols-${columns}`,\n rows && `${global.prefixCls}-grid-rows-${rows}`,\n `${global.prefixCls}-grid-align-items-${alignItems}`,\n `${global.prefixCls}-grid-justify-items-${justifyItems}`,\n `${global.prefixCls}-grid-align-content-${alignContent}`,\n `${global.prefixCls}-grid-justify-content-${justifyContent}`,\n className\n )}\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.0
|
|
3
|
+
"version": "1.2.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -30,11 +30,10 @@
|
|
|
30
30
|
"url": "https://github.com/negative-space-ui/nsui/issues"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"
|
|
34
|
-
"@negative-space/provider": "1.6.0"
|
|
33
|
+
"@negative-space/system": "1.0.1"
|
|
35
34
|
},
|
|
36
35
|
"peerDependencies": {
|
|
37
|
-
"react": "^19.2.
|
|
36
|
+
"react": "^19.2.3"
|
|
38
37
|
},
|
|
39
38
|
"clean-package": "../../../../clean-package.config.json",
|
|
40
39
|
"exports": {
|