@a-type/ui 6.0.17 → 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.
Files changed (13) hide show
  1. package/dist/components/box/Box.d.ts +2 -1
  2. package/dist/components/box/Box.js +2 -2
  3. package/dist/components/box/Box.js.map +1 -1
  4. package/dist/components/box/Box.module.css +15 -0
  5. package/dist/components/typography/typography.d.ts +4 -1
  6. package/dist/components/typography/typography.js +4 -1
  7. package/dist/components/typography/typography.js.map +1 -1
  8. package/dist/components/typography/typography.module.css +19 -0
  9. package/package.json +1 -1
  10. package/src/components/box/Box.module.css +15 -0
  11. package/src/components/box/Box.tsx +3 -0
  12. package/src/components/typography/typography.module.css +19 -0
  13. package/src/components/typography/typography.tsx +9 -0
package/dist/components/box/Box.d.ts CHANGED
@@ -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 {};
package/dist/components/box/Box.js CHANGED
@@ -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) {
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;AAyCnC,MAAM,UAAU,GAAG,CAAC,EAwBT;QAxBS,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,GAAG,OAEO,EADP,IAAI,cAvBY,+MAwBnB,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,IAChB,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;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"}
package/dist/components/box/Box.module.css 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;
package/dist/components/typography/typography.d.ts CHANGED
@@ -6,10 +6,13 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
6
6
  strikethrough?: boolean;
7
7
  bold?: boolean;
8
8
  thin?: boolean;
9
+ normal?: boolean;
10
+ uppercase?: boolean;
9
11
  truncate?: boolean;
10
12
  dim?: boolean;
13
+ color?: 'neutral' | 'main' | 'attention' | 'success';
11
14
  }
12
- export declare function Text({ emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
15
+ export declare function Text({ emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, color, normal, uppercase, ...rest }: TypographyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
13
16
  export declare const Heading: import("react").FunctionComponent<TypographyProps>;
14
17
  export declare const HeroText: import("react").FunctionComponent<TypographyProps>;
15
18
  export declare const P: (props: TypographyProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/typography/typography.js CHANGED
@@ -16,7 +16,7 @@ import { withClassName } from '../../hooks/withClassName.js';
16
16
  import { withProps } from '../../hooks/withProps.js';
17
17
  import cls from './typography.module.css';
18
18
  export function Text(_a) {
19
- var { emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className", "bold", "thin", "truncate", "dim"]);
19
+ var { emphasis, italic, underline, strikethrough, render, className, bold, thin, truncate, dim, color, normal, uppercase } = _a, rest = __rest(_a, ["emphasis", "italic", "underline", "strikethrough", "render", "className", "bold", "thin", "truncate", "dim", "color", "normal", "uppercase"]);
20
20
  return useRender({
21
21
  render,
22
22
  defaultTagName: 'span',
@@ -30,6 +30,9 @@ export function Text(_a) {
30
30
  thin: thin ? true : undefined,
31
31
  truncate: truncate ? true : undefined,
32
32
  dim: dim ? true : undefined,
33
+ color: color ? color : undefined,
34
+ normal: normal ? true : undefined,
35
+ uppercase: uppercase ? true : undefined,
33
36
  },
34
37
  });
35
38
  }
package/dist/components/typography/typography.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAa1C,MAAM,UAAU,IAAI,CAAC,EAYH;QAZG,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,GAAG,OAEc,EADd,IAAI,cAXa,8GAYpB,CADO;IAEP,OAAO,SAAS,CAAC;QAChB,MAAM;QACN,cAAc,EAAE,MAAM;QACtB,KAAK,kCACD,IAAI,KACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,GAC5D;QACD,KAAK,EAAE;YACN,QAAQ;YACR,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACjC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACvC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC/C,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC7B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YAC7B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;YACrC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;SAC3B;KACD,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,aAAK,EAAE,CAAC,CAAC;AAEpD;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,WAAW;CACrB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AACH;;GAEG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE;IACpC,MAAM,EAAE,cAAM;IACd,QAAQ,EAAE,SAAS;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,EAAE;IACvC,MAAM,EAAE,aAAK;IACb,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,IAAI;CACf,CAAC,CAAC"}
1
+ {"version":3,"file":"typography.js","sourceRoot":"","sources":["../../../src/components/typography/typography.tsx"],"names":[],"mappings":"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"}
package/dist/components/typography/typography.module.css CHANGED
@@ -31,6 +31,12 @@
31
31
  &[data-thin] {
32
32
  font-weight: var(--m-text-weight-thin);
33
33
  }
34
+ &[data-normal] {
35
+ font-weight: var(--m-text-weight-normal);
36
+ }
37
+ &[data-uppercase] {
38
+ text-transform: uppercase;
39
+ }
34
40
  &[data-truncate] {
35
41
  overflow: hidden;
36
42
  text-overflow: ellipsis;
@@ -40,6 +46,19 @@
40
46
  &[data-dim] {
41
47
  @apply --mx-fg(var(--m-color-neutral-heavy));
42
48
  }
49
+
50
+ &[data-color='neutral'] {
51
+ @apply --mx-fg(var(--m-color-neutral-ink));
52
+ }
53
+ &[data-color='main'] {
54
+ @apply --mx-fg(var(--m-color-main-heavy));
55
+ }
56
+ &[data-color='attention'] {
57
+ @apply --mx-fg(var(--m-color-palette-attention-heavy));
58
+ }
59
+ &[data-color='success'] {
60
+ @apply --mx-fg(var(--m-color-palette-success-heavy));
61
+ }
43
62
  }
44
63
 
45
64
  @layer components {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.17",
3
+ "version": "6.0.19",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/box/Box.module.css 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;
package/src/components/box/Box.tsx CHANGED
@@ -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
 
package/src/components/typography/typography.module.css CHANGED
@@ -31,6 +31,12 @@
31
31
  &[data-thin] {
32
32
  font-weight: var(--m-text-weight-thin);
33
33
  }
34
+ &[data-normal] {
35
+ font-weight: var(--m-text-weight-normal);
36
+ }
37
+ &[data-uppercase] {
38
+ text-transform: uppercase;
39
+ }
34
40
  &[data-truncate] {
35
41
  overflow: hidden;
36
42
  text-overflow: ellipsis;
@@ -40,6 +46,19 @@
40
46
  &[data-dim] {
41
47
  @apply --mx-fg(var(--m-color-neutral-heavy));
42
48
  }
49
+
50
+ &[data-color='neutral'] {
51
+ @apply --mx-fg(var(--m-color-neutral-ink));
52
+ }
53
+ &[data-color='main'] {
54
+ @apply --mx-fg(var(--m-color-main-heavy));
55
+ }
56
+ &[data-color='attention'] {
57
+ @apply --mx-fg(var(--m-color-palette-attention-heavy));
58
+ }
59
+ &[data-color='success'] {
60
+ @apply --mx-fg(var(--m-color-palette-success-heavy));
61
+ }
43
62
  }
44
63
 
45
64
  @layer components {
package/src/components/typography/typography.tsx CHANGED
@@ -11,8 +11,11 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
11
11
  strikethrough?: boolean;
12
12
  bold?: boolean;
13
13
  thin?: boolean;
14
+ normal?: boolean;
15
+ uppercase?: boolean;
14
16
  truncate?: boolean;
15
17
  dim?: boolean;
18
+ color?: 'neutral' | 'main' | 'attention' | 'success';
16
19
  }
17
20
 
18
21
  export function Text({
@@ -26,6 +29,9 @@ export function Text({
26
29
  thin,
27
30
  truncate,
28
31
  dim,
32
+ color,
33
+ normal,
34
+ uppercase,
29
35
  ...rest
30
36
  }: TypographyProps) {
31
37
  return useRender({
@@ -44,6 +50,9 @@ export function Text({
44
50
  thin: thin ? true : undefined,
45
51
  truncate: truncate ? true : undefined,
46
52
  dim: dim ? true : undefined,
53
+ color: color ? color : undefined,
54
+ normal: normal ? true : undefined,
55
+ uppercase: uppercase ? true : undefined,
47
56
  },
48
57
  });
49
58
  }