@a-type/ui 6.0.18 → 6.0.19
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.
|
@@ -28,6 +28,7 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
|
|
|
28
28
|
ref?: Ref<HTMLDivElement>;
|
|
29
29
|
container?: boolean;
|
|
30
30
|
glass?: boolean;
|
|
31
|
+
self?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
|
|
31
32
|
}
|
|
32
|
-
export declare function Box({ className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, col, d, direction, style, container, surface, color, border, full, overflow, grow, elevated, rounded, glass, ref, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare function Box({ className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, col, d, direction, style, container, surface, color, border, full, overflow, grow, elevated, rounded, glass, self, ref, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
|
|
33
34
|
export {};
|
|
@@ -14,11 +14,11 @@ import clsx from 'clsx';
|
|
|
14
14
|
import { SlotDiv } from '../utility/SlotDiv.js';
|
|
15
15
|
import cls from './Box.module.css';
|
|
16
16
|
export function Box(_a) {
|
|
17
|
-
var { className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, col, d = col ? 'col' : undefined, direction = d, style, container, surface, color, border, full, overflow, grow, elevated, rounded = surface ? true : undefined, glass, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "layout", "gap", "wrap", "p", "col", "d", "direction", "style", "container", "surface", "color", "border", "full", "overflow", "grow", "elevated", "rounded", "glass", "ref"]);
|
|
17
|
+
var { className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, col, d = col ? 'col' : undefined, direction = d, style, container, surface, color, border, full, overflow, grow, elevated, rounded = surface ? true : undefined, glass, self, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "layout", "gap", "wrap", "p", "col", "d", "direction", "style", "container", "surface", "color", "border", "full", "overflow", "grow", "elevated", "rounded", "glass", "self", "ref"]);
|
|
18
18
|
const items = itemsSolo !== null && itemsSolo !== void 0 ? itemsSolo : align === null || align === void 0 ? void 0 : align.split(' ')[0];
|
|
19
19
|
const justify = justifySolo !== null && justifySolo !== void 0 ? justifySolo : align === null || align === void 0 ? void 0 : align.split(' ')[1];
|
|
20
20
|
const [inset, elevation, up] = parseElevated(elevated);
|
|
21
|
-
const main = (_jsx(SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: clsx('layer-components:relative layer-components:flex', color && `@mode-${color}`, cls.root, className), "data-direction": direction, "data-gap": gap, "data-items": items, "data-justify": justify, "data-wrap": wrap, "data-p": p, "data-rounded": rounded, "data-surface": surface, "data-border": border, "data-full": full, "data-overflow": overflow, "data-grow": grow, "data-elevated": elevation, "data-shadow-up": up, "data-shadow-inset": inset, "data-container": container, "data-glass": glass })));
|
|
21
|
+
const main = (_jsx(SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: clsx('layer-components:relative layer-components:flex', color && `@mode-${color}`, cls.root, className), "data-direction": direction, "data-gap": gap, "data-items": items, "data-justify": justify, "data-wrap": wrap, "data-p": p, "data-rounded": rounded, "data-surface": surface, "data-border": border, "data-full": full, "data-overflow": overflow, "data-grow": grow, "data-elevated": elevation, "data-shadow-up": up, "data-shadow-inset": inset, "data-container": container, "data-glass": glass, "data-self": self })));
|
|
22
22
|
return main;
|
|
23
23
|
}
|
|
24
24
|
function parseElevated(elevated) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/components/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAgB,MAAM,uBAAuB,CAAC;AAC9D,OAAO,GAAG,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../src/components/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAgB,MAAM,uBAAuB,CAAC;AAC9D,OAAO,GAAG,MAAM,kBAAkB,CAAC;AA0CnC,MAAM,UAAU,GAAG,CAAC,EAyBT;QAzBS,EACnB,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,KAAK,EACb,GAAG,EACH,IAAI,EACJ,CAAC,EACD,GAAG,EACH,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EAC3B,SAAS,GAAG,CAAC,EACb,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACpC,KAAK,EACL,IAAI,EACJ,GAAG,OAEO,EADP,IAAI,cAxBY,uNAyBnB,CADO;IAEP,MAAM,KAAK,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEvD,MAAM,IAAI,GAAG,CACZ,KAAC,OAAO,kBACP,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CACd,iDAAiD,EACjD,KAAK,IAAI,SAAS,KAAK,EAAE,EACzB,GAAG,CAAC,IAAI,EACR,SAAS,CACT,oBACe,SAAS,cACf,GAAG,gBACD,KAAK,kBACH,OAAO,eACV,IAAI,YACP,CAAC,kBACK,OAAO,kBACP,OAAO,iBACR,MAAM,eACR,IAAI,mBACA,QAAQ,eACZ,IAAI,mBACA,SAAS,oBACR,EAAE,uBACC,KAAK,oBACR,SAAS,gBACb,KAAK,eACN,IAAI,IACd,CACF,CAAC;IAEF,OAAO,IAAI,CAAC;AACb,CAAC;AAED,SAAS,aAAa,CAAC,QAAsB;IAC5C,IAAI,CAAC,QAAQ;QAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAC;IAErD,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IAC1D,IAAI,CAAC,KAAK,EAAE,CAAC;QACZ,OAAO,CAAC,IAAI,CACX,2BAA2B,QAAQ,iFAAiF,CACpH,CAAC;QACF,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC;IAClC,MAAM,KAAK,GAAG,KAAK,KAAK,GAAG,CAAC;IAC5B,MAAM,SAAS,GAAG,IAAkB,CAAC;IACrC,MAAM,IAAI,GAAG,EAAE,KAAK,KAAK,CAAC;IAE1B,OAAO,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAU,CAAC;AAC1C,CAAC"}
|
|
@@ -74,6 +74,21 @@
|
|
|
74
74
|
&[data-justify='evenly'] {
|
|
75
75
|
justify-content: space-evenly;
|
|
76
76
|
}
|
|
77
|
+
&[data-self='auto'] {
|
|
78
|
+
align-self: auto;
|
|
79
|
+
}
|
|
80
|
+
&[data-self='start'] {
|
|
81
|
+
align-self: flex-start;
|
|
82
|
+
}
|
|
83
|
+
&[data-self='center'] {
|
|
84
|
+
align-self: center;
|
|
85
|
+
}
|
|
86
|
+
&[data-self='end'] {
|
|
87
|
+
align-self: flex-end;
|
|
88
|
+
}
|
|
89
|
+
&[data-self='stretch'] {
|
|
90
|
+
align-self: stretch;
|
|
91
|
+
}
|
|
77
92
|
|
|
78
93
|
&[data-p='none'] {
|
|
79
94
|
padding: 0;
|
package/package.json
CHANGED
|
@@ -74,6 +74,21 @@
|
|
|
74
74
|
&[data-justify='evenly'] {
|
|
75
75
|
justify-content: space-evenly;
|
|
76
76
|
}
|
|
77
|
+
&[data-self='auto'] {
|
|
78
|
+
align-self: auto;
|
|
79
|
+
}
|
|
80
|
+
&[data-self='start'] {
|
|
81
|
+
align-self: flex-start;
|
|
82
|
+
}
|
|
83
|
+
&[data-self='center'] {
|
|
84
|
+
align-self: center;
|
|
85
|
+
}
|
|
86
|
+
&[data-self='end'] {
|
|
87
|
+
align-self: flex-end;
|
|
88
|
+
}
|
|
89
|
+
&[data-self='stretch'] {
|
|
90
|
+
align-self: stretch;
|
|
91
|
+
}
|
|
77
92
|
|
|
78
93
|
&[data-p='none'] {
|
|
79
94
|
padding: 0;
|
|
@@ -40,6 +40,7 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
|
|
|
40
40
|
ref?: Ref<HTMLDivElement>;
|
|
41
41
|
container?: boolean;
|
|
42
42
|
glass?: boolean;
|
|
43
|
+
self?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
export function Box({
|
|
@@ -64,6 +65,7 @@ export function Box({
|
|
|
64
65
|
elevated,
|
|
65
66
|
rounded = surface ? true : undefined,
|
|
66
67
|
glass,
|
|
68
|
+
self,
|
|
67
69
|
ref,
|
|
68
70
|
...rest
|
|
69
71
|
}: BoxProps) {
|
|
@@ -99,6 +101,7 @@ export function Box({
|
|
|
99
101
|
data-shadow-inset={inset}
|
|
100
102
|
data-container={container}
|
|
101
103
|
data-glass={glass}
|
|
104
|
+
data-self={self}
|
|
102
105
|
/>
|
|
103
106
|
);
|
|
104
107
|
|