@a-type/ui 6.0.72 → 6.0.73
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.
|
@@ -90,6 +90,10 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
|
|
|
90
90
|
*/
|
|
91
91
|
dim?: boolean;
|
|
92
92
|
self?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
|
|
93
|
+
/**
|
|
94
|
+
* Use margin to center self in flex
|
|
95
|
+
*/
|
|
96
|
+
m?: 'auto' | 'y-auto' | 'x-auto';
|
|
93
97
|
}
|
|
94
|
-
export declare function Box({ className, items: itemsSolo, justify: justifySolo, layout, gap, wrap, p, col, reverse, style, container, surface, color, border, full, overflow, grow, shrink, elevated, rounded, round, glass, dim, self, squish, ref, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
|
|
98
|
+
export declare function Box({ className, items: itemsSolo, justify: justifySolo, layout, gap, wrap, p, col, reverse, style, container, surface, color, border, full, overflow, grow, shrink, elevated, rounded, round, glass, dim, self, squish, m, ref, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;
|
|
95
99
|
export {};
|
|
@@ -15,11 +15,11 @@ import { SlotDiv } from '../utility/SlotDiv.js';
|
|
|
15
15
|
import cls from './Box.module.css';
|
|
16
16
|
export function Box(_a) {
|
|
17
17
|
var _b;
|
|
18
|
-
var { className, items: itemsSolo, justify: justifySolo, layout, gap, wrap, p, col, reverse, style, container, surface, color, border, full, overflow, grow, shrink, elevated, rounded = surface ? true : undefined, round = rounded, glass, dim, self, squish, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "layout", "gap", "wrap", "p", "col", "reverse", "style", "container", "surface", "color", "border", "full", "overflow", "grow", "shrink", "elevated", "rounded", "round", "glass", "dim", "self", "squish", "ref"]);
|
|
18
|
+
var { className, items: itemsSolo, justify: justifySolo, layout, gap, wrap, p, col, reverse, style, container, surface, color, border, full, overflow, grow, shrink, elevated, rounded = surface ? true : undefined, round = rounded, glass, dim, self, squish, m, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "layout", "gap", "wrap", "p", "col", "reverse", "style", "container", "surface", "color", "border", "full", "overflow", "grow", "shrink", "elevated", "rounded", "round", "glass", "dim", "self", "squish", "m", "ref"]);
|
|
19
19
|
const items = itemsSolo !== null && itemsSolo !== void 0 ? itemsSolo : layout === null || layout === void 0 ? void 0 : layout.split(' ')[0];
|
|
20
20
|
const justify = (_b = justifySolo !== null && justifySolo !== void 0 ? justifySolo : layout === null || layout === void 0 ? void 0 : layout.split(' ')[1]) !== null && _b !== void 0 ? _b : layout;
|
|
21
21
|
const [inset, elevation, up] = parseElevated(elevated);
|
|
22
|
-
const main = (_jsx(SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: clsx(color && `@mode-${color}`, cls.root, className), "data-col": col ? '' : undefined, "data-reverse": reverse ? '' : undefined, "data-gap": gap, "data-items": items, "data-justify": justify, "data-wrap": wrap, "data-p": p, "data-rounded": round, "data-surface": surface, "data-border": border, "data-full": full, "data-overflow": overflow, "data-grow": grow, "data-shrink": shrink, "data-elevated": elevation, "data-shadow-up": up, "data-shadow-inset": inset, "data-container": container, "data-glass": glass, "data-self": self, "data-dim": dim, "data-squish": squish })));
|
|
22
|
+
const main = (_jsx(SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: clsx(color && `@mode-${color}`, cls.root, className), "data-col": col ? '' : undefined, "data-reverse": reverse ? '' : undefined, "data-gap": gap, "data-items": items, "data-justify": justify, "data-wrap": wrap, "data-p": p, "data-rounded": round, "data-surface": surface, "data-border": border, "data-full": full, "data-overflow": overflow, "data-grow": grow, "data-shrink": shrink, "data-elevated": elevation, "data-shadow-up": up, "data-shadow-inset": inset, "data-container": container, "data-glass": glass, "data-self": self, "data-dim": dim, "data-squish": squish, "data-m": m })));
|
|
23
23
|
return main;
|
|
24
24
|
}
|
|
25
25
|
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;AA6GnC,MAAM,UAAU,GAAG,CAAC,EA6BT;;QA7BS,EACnB,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,WAAW,EACpB,MAAM,EACN,GAAG,EACH,IAAI,EACJ,CAAC,EACD,GAAG,EACH,OAAO,EACP,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACpC,KAAK,GAAG,OAAO,EACf,KAAK,EACL,GAAG,EACH,IAAI,EACJ,MAAM,EACN,CAAC,EACD,GAAG,OAEO,EADP,IAAI,cA5BY,yPA6BnB,CADO;IAEP,MAAM,KAAK,GAAG,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IACjD,MAAM,OAAO,GAAG,MAAA,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,mCAAI,MAAM,CAAC;IAC/D,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,CAAC,KAAK,IAAI,SAAS,KAAK,EAAE,EAAE,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,cACrD,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAChB,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,cAC5B,GAAG,gBACD,KAAK,kBACH,OAAO,eACV,IAAI,YACP,CAAC,kBACK,KAAK,kBACL,OAAO,iBACR,MAAM,eACR,IAAI,mBACA,QAAQ,eACZ,IAAI,iBACF,MAAM,mBACJ,SAAS,oBACR,EAAE,uBACC,KAAK,oBACR,SAAS,gBACb,KAAK,eACN,IAAI,cACL,GAAG,iBACA,MAAM,YACX,CAAC,IACR,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"}
|
|
@@ -147,6 +147,16 @@
|
|
|
147
147
|
height: 100%;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
&[data-m='auto'] {
|
|
151
|
+
margin: auto;
|
|
152
|
+
}
|
|
153
|
+
&[data-m='y-auto'] {
|
|
154
|
+
margin-block: auto;
|
|
155
|
+
}
|
|
156
|
+
&[data-m='x-auto'] {
|
|
157
|
+
margin-inline: auto;
|
|
158
|
+
}
|
|
159
|
+
|
|
150
160
|
&[data-overflow='visible'] {
|
|
151
161
|
overflow: visible;
|
|
152
162
|
}
|
package/package.json
CHANGED
|
@@ -147,6 +147,16 @@
|
|
|
147
147
|
height: 100%;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
&[data-m='auto'] {
|
|
151
|
+
margin: auto;
|
|
152
|
+
}
|
|
153
|
+
&[data-m='y-auto'] {
|
|
154
|
+
margin-block: auto;
|
|
155
|
+
}
|
|
156
|
+
&[data-m='x-auto'] {
|
|
157
|
+
margin-inline: auto;
|
|
158
|
+
}
|
|
159
|
+
|
|
150
160
|
&[data-overflow='visible'] {
|
|
151
161
|
overflow: visible;
|
|
152
162
|
}
|
|
@@ -104,6 +104,10 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
|
|
|
104
104
|
*/
|
|
105
105
|
dim?: boolean;
|
|
106
106
|
self?: 'auto' | 'start' | 'end' | 'center' | 'stretch';
|
|
107
|
+
/**
|
|
108
|
+
* Use margin to center self in flex
|
|
109
|
+
*/
|
|
110
|
+
m?: 'auto' | 'y-auto' | 'x-auto';
|
|
107
111
|
}
|
|
108
112
|
|
|
109
113
|
export function Box({
|
|
@@ -132,6 +136,7 @@ export function Box({
|
|
|
132
136
|
dim,
|
|
133
137
|
self,
|
|
134
138
|
squish,
|
|
139
|
+
m,
|
|
135
140
|
ref,
|
|
136
141
|
...rest
|
|
137
142
|
}: BoxProps) {
|
|
@@ -167,6 +172,7 @@ export function Box({
|
|
|
167
172
|
data-self={self}
|
|
168
173
|
data-dim={dim}
|
|
169
174
|
data-squish={squish}
|
|
175
|
+
data-m={m}
|
|
170
176
|
/>
|
|
171
177
|
);
|
|
172
178
|
|