@a-type/ui 6.0.72 → 6.0.74

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.
Files changed (10) hide show
  1. package/dist/arbor/arbor.d.ts +1 -0
  2. package/dist/components/box/Box.d.ts +5 -1
  3. package/dist/components/box/Box.js +2 -2
  4. package/dist/components/box/Box.js.map +1 -1
  5. package/dist/components/box/Box.module.css +10 -0
  6. package/dist/components/scrollArea/ScrollArea.module.css +2 -2
  7. package/package.json +3 -3
  8. package/src/components/box/Box.module.css +10 -0
  9. package/src/components/box/Box.tsx +6 -0
  10. package/src/components/scrollArea/ScrollArea.module.css +2 -2
package/dist/arbor/arbor.d.ts CHANGED
@@ -693,6 +693,7 @@ export declare function presetAtype<TColors extends DefaultColorRangeName = Defa
693
693
  sm: "border-radius";
694
694
  md: "border-radius";
695
695
  lg: "border-radius";
696
+ full: "border-radius";
696
697
  };
697
698
  shadow: {
698
699
  $root: {
package/dist/components/box/Box.d.ts CHANGED
@@ -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 {};
package/dist/components/box/Box.js CHANGED
@@ -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) {
package/dist/components/box/Box.js.map CHANGED
@@ -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;AAyGnC,MAAM,UAAU,GAAG,CAAC,EA4BT;;QA5BS,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,GAAG,OAEO,EADP,IAAI,cA3BY,oPA4BnB,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,IAClB,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"}
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"}
package/dist/components/box/Box.module.css 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
  }
package/dist/components/scrollArea/ScrollArea.module.css CHANGED
@@ -118,7 +118,7 @@
118
118
  .thumb {
119
119
  @apply --mx-bg(var(--mx-fg-ref));
120
120
  @apply --mx-bg-faded(25%);
121
- border-radius: 9999px;
121
+ border-radius: var(--m-radius-full);
122
122
 
123
123
  &[data-orientation='vertical'] {
124
124
  width: 100%;
@@ -135,7 +135,7 @@
135
135
  display: flex;
136
136
  user-select: none;
137
137
  opacity: 0;
138
- border-radius: 9999px;
138
+ border-radius: var(--m-radius-full);
139
139
  touch-action: none;
140
140
  transition:
141
141
  opacity,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.72",
3
+ "version": "6.0.74",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
@@ -41,8 +41,8 @@
41
41
  },
42
42
  "dependencies": {
43
43
  "@a-type/utils": "^1.1.9",
44
- "@arbor-css/core": "^0.0.139",
45
- "@arbor-css/postcss": "^0.0.139",
44
+ "@arbor-css/core": "^0.0.140",
45
+ "@arbor-css/postcss": "^0.0.140",
46
46
  "@base-ui/react": "^1.4.1",
47
47
  "@use-gesture/react": "^10.3.1",
48
48
  "browser-image-resizer": "^2.4.1",
package/src/components/box/Box.module.css 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
  }
package/src/components/box/Box.tsx CHANGED
@@ -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
 
package/src/components/scrollArea/ScrollArea.module.css CHANGED
@@ -118,7 +118,7 @@
118
118
  .thumb {
119
119
  @apply --mx-bg(var(--mx-fg-ref));
120
120
  @apply --mx-bg-faded(25%);
121
- border-radius: 9999px;
121
+ border-radius: var(--m-radius-full);
122
122
 
123
123
  &[data-orientation='vertical'] {
124
124
  width: 100%;
@@ -135,7 +135,7 @@
135
135
  display: flex;
136
136
  user-select: none;
137
137
  opacity: 0;
138
- border-radius: 9999px;
138
+ border-radius: var(--m-radius-full);
139
139
  touch-action: none;
140
140
  transition:
141
141
  opacity,