@a-type/ui 6.0.16 → 6.0.18

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 (19) hide show
  1. package/dist/components/lists/lists.d.ts +6 -2
  2. package/dist/components/lists/lists.js +21 -2
  3. package/dist/components/lists/lists.js.map +1 -1
  4. package/dist/components/lists/lists.module.css +8 -0
  5. package/dist/components/lists/lists.stories.d.ts +1 -0
  6. package/dist/components/lists/lists.stories.js +5 -0
  7. package/dist/components/lists/lists.stories.js.map +1 -1
  8. package/dist/components/typography/typography.d.ts +4 -1
  9. package/dist/components/typography/typography.js +4 -1
  10. package/dist/components/typography/typography.js.map +1 -1
  11. package/dist/components/typography/typography.module.css +19 -0
  12. package/dist/css/util.css +13 -0
  13. package/package.json +1 -1
  14. package/src/components/lists/lists.module.css +8 -0
  15. package/src/components/lists/lists.stories.tsx +12 -0
  16. package/src/components/lists/lists.tsx +24 -2
  17. package/src/components/typography/typography.module.css +19 -0
  18. package/src/components/typography/typography.tsx +9 -0
  19. package/src/css/util.css +13 -0
package/dist/components/lists/lists.d.ts CHANGED
@@ -1,6 +1,10 @@
1
- export declare const Ol: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>> & {
1
+ import { ComponentProps } from 'react';
2
+ export interface OlProps extends ComponentProps<'ol'> {
3
+ unstyled?: boolean;
4
+ }
5
+ export declare const Ol: (({ unstyled, className, ...rest }: OlProps) => import("react/jsx-runtime").JSX.Element) & {
2
6
  Item: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
3
7
  };
4
- export declare const Ul: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>> & {
8
+ export declare const Ul: (({ unstyled, className, ...rest }: OlProps) => import("react/jsx-runtime").JSX.Element) & {
5
9
  Item: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
6
10
  };
package/dist/components/lists/lists.js CHANGED
@@ -1,11 +1,30 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import clsx from 'clsx';
1
14
  import { withClassName } from '../../hooks.js';
2
15
  import cls from './lists.module.css';
3
- const OlBase = withClassName('ol', cls.ol);
16
+ const OlBase = (_a) => {
17
+ var { unstyled, className } = _a, rest = __rest(_a, ["unstyled", "className"]);
18
+ return (_jsx("ol", Object.assign({}, rest, { className: clsx(cls.ol, className), "data-unstyled": unstyled ? true : undefined })));
19
+ };
4
20
  const OlItem = withClassName('li');
5
21
  export const Ol = Object.assign(OlBase, {
6
22
  Item: OlItem,
7
23
  });
8
- const UlBase = withClassName('ul', cls.ul);
24
+ const UlBase = (_a) => {
25
+ var { unstyled, className } = _a, rest = __rest(_a, ["unstyled", "className"]);
26
+ return (_jsx("ul", Object.assign({}, rest, { className: clsx(cls.ul, className), "data-unstyled": unstyled ? true : undefined })));
27
+ };
9
28
  const UlItem = withClassName('li');
10
29
  export const Ul = Object.assign(UlBase, {
11
30
  Item: UlItem,
package/dist/components/lists/lists.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lists.js","sourceRoot":"","sources":["../../../src/components/lists/lists.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAErC,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAC3C,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IACvC,IAAI,EAAE,MAAM;CACZ,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAC3C,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IACvC,IAAI,EAAE,MAAM;CACZ,CAAC,CAAC"}
1
+ {"version":3,"file":"lists.js","sourceRoot":"","sources":["../../../src/components/lists/lists.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAMrC,MAAM,MAAM,GAAG,CAAC,EAAyC,EAAE,EAAE;QAA7C,EAAE,QAAQ,EAAE,SAAS,OAAoB,EAAf,IAAI,cAA9B,yBAAgC,CAAF;IAC7C,OAAO,CACN,6BACK,IAAI,IACR,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,mBACnB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IACzC,CACF,CAAC;AACH,CAAC,CAAC;AACF,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IACvC,IAAI,EAAE,MAAM;CACZ,CAAC,CAAC;AAEH,MAAM,MAAM,GAAG,CAAC,EAAyC,EAAE,EAAE;QAA7C,EAAE,QAAQ,EAAE,SAAS,OAAoB,EAAf,IAAI,cAA9B,yBAAgC,CAAF;IAC7C,OAAO,CACN,6BACK,IAAI,IACR,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,SAAS,CAAC,mBACnB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,IACzC,CACF,CAAC;AACH,CAAC,CAAC;AACF,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;AAEnC,MAAM,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;IACvC,IAAI,EAAE,MAAM;CACZ,CAAC,CAAC"}
package/dist/components/lists/lists.module.css CHANGED
@@ -10,6 +10,14 @@
10
10
  & > li {
11
11
  margin-left: var(--m-space-sm);
12
12
  }
13
+
14
+ &[data-unstyled] {
15
+ list-style: none;
16
+ gap: 0;
17
+ & > li {
18
+ margin-left: 0;
19
+ }
20
+ }
13
21
  }
14
22
 
15
23
  .ol {
package/dist/components/lists/lists.stories.d.ts CHANGED
@@ -12,3 +12,4 @@ export default meta;
12
12
  type Story = StoryObj;
13
13
  export declare const OrderedList: Story;
14
14
  export declare const UnorderedList: Story;
15
+ export declare const NoMarkers: Story;
package/dist/components/lists/lists.stories.js CHANGED
@@ -18,4 +18,9 @@ export const UnorderedList = {
18
18
  return (_jsxs(Ul, Object.assign({}, args, { children: [_jsx(Ul.Item, { children: "First item" }), _jsx(Ul.Item, { children: "Second item" }), _jsx(Ul.Item, { children: "Third item" })] })));
19
19
  },
20
20
  };
21
+ export const NoMarkers = {
22
+ render(args) {
23
+ return (_jsxs(Ul, Object.assign({}, args, { unstyled: true, children: [_jsx(Ul.Item, { children: "First item" }), _jsx(Ul.Item, { children: "Second item" }), _jsx(Ul.Item, { children: "Third item" })] })));
24
+ },
25
+ };
21
26
  //# sourceMappingURL=lists.stories.js.map
package/dist/components/lists/lists.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lists.stories.js","sourceRoot":"","sources":["../../../src/components/lists/lists.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEpC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,WAAW,GAAU;IACjC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,EAAE,oBAAK,IAAI,eACX,KAAC,EAAE,CAAC,IAAI,6BAAqB,EAC7B,KAAC,EAAE,CAAC,IAAI,8BAAsB,EAC9B,KAAC,EAAE,CAAC,IAAI,6BAAqB,KACzB,CACL,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IACnC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,EAAE,oBAAK,IAAI,eACX,KAAC,EAAE,CAAC,IAAI,6BAAqB,EAC7B,KAAC,EAAE,CAAC,IAAI,8BAAsB,EAC9B,KAAC,EAAE,CAAC,IAAI,6BAAqB,KACzB,CACL,CAAC;IACH,CAAC;CACD,CAAC"}
1
+ {"version":3,"file":"lists.stories.js","sourceRoot":"","sources":["../../../src/components/lists/lists.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAEpC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,WAAW,GAAU;IACjC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,EAAE,oBAAK,IAAI,eACX,KAAC,EAAE,CAAC,IAAI,6BAAqB,EAC7B,KAAC,EAAE,CAAC,IAAI,8BAAsB,EAC9B,KAAC,EAAE,CAAC,IAAI,6BAAqB,KACzB,CACL,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IACnC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,EAAE,oBAAK,IAAI,eACX,KAAC,EAAE,CAAC,IAAI,6BAAqB,EAC7B,KAAC,EAAE,CAAC,IAAI,8BAAsB,EAC9B,KAAC,EAAE,CAAC,IAAI,6BAAqB,KACzB,CACL,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC/B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,EAAE,oBAAK,IAAI,IAAE,QAAQ,mBACrB,KAAC,EAAE,CAAC,IAAI,6BAAqB,EAC7B,KAAC,EAAE,CAAC,IAAI,8BAAsB,EAC9B,KAAC,EAAE,CAAC,IAAI,6BAAqB,KACzB,CACL,CAAC;IACH,CAAC;CACD,CAAC"}
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/dist/css/util.css CHANGED
@@ -164,3 +164,16 @@
164
164
  display: block;
165
165
  }
166
166
  }
167
+
168
+ /* Visually hidden */
169
+ .sr-only {
170
+ position: absolute;
171
+ width: --fn-literal(1px);
172
+ height: --fn-literal(1px);
173
+ padding: 0;
174
+ margin: --fn-literal(-1px);
175
+ overflow: hidden;
176
+ clip: rect(0, 0, 0, 0);
177
+ white-space: nowrap;
178
+ border: 0;
179
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.16",
3
+ "version": "6.0.18",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/lists/lists.module.css CHANGED
@@ -10,6 +10,14 @@
10
10
  & > li {
11
11
  margin-left: var(--m-space-sm);
12
12
  }
13
+
14
+ &[data-unstyled] {
15
+ list-style: none;
16
+ gap: 0;
17
+ & > li {
18
+ margin-left: 0;
19
+ }
20
+ }
13
21
  }
14
22
 
15
23
  .ol {
package/src/components/lists/lists.stories.tsx CHANGED
@@ -36,3 +36,15 @@ export const UnorderedList: Story = {
36
36
  );
37
37
  },
38
38
  };
39
+
40
+ export const NoMarkers: Story = {
41
+ render(args) {
42
+ return (
43
+ <Ul {...args} unstyled>
44
+ <Ul.Item>First item</Ul.Item>
45
+ <Ul.Item>Second item</Ul.Item>
46
+ <Ul.Item>Third item</Ul.Item>
47
+ </Ul>
48
+ );
49
+ },
50
+ };
package/src/components/lists/lists.tsx CHANGED
@@ -1,14 +1,36 @@
1
+ import clsx from 'clsx';
2
+ import { ComponentProps } from 'react';
1
3
  import { withClassName } from '../../hooks.js';
2
4
  import cls from './lists.module.css';
3
5
 
4
- const OlBase = withClassName('ol', cls.ol);
6
+ export interface OlProps extends ComponentProps<'ol'> {
7
+ unstyled?: boolean;
8
+ }
9
+
10
+ const OlBase = ({ unstyled, className, ...rest }: OlProps) => {
11
+ return (
12
+ <ol
13
+ {...rest}
14
+ className={clsx(cls.ol, className)}
15
+ data-unstyled={unstyled ? true : undefined}
16
+ />
17
+ );
18
+ };
5
19
  const OlItem = withClassName('li');
6
20
 
7
21
  export const Ol = Object.assign(OlBase, {
8
22
  Item: OlItem,
9
23
  });
10
24
 
11
- const UlBase = withClassName('ul', cls.ul);
25
+ const UlBase = ({ unstyled, className, ...rest }: OlProps) => {
26
+ return (
27
+ <ul
28
+ {...rest}
29
+ className={clsx(cls.ul, className)}
30
+ data-unstyled={unstyled ? true : undefined}
31
+ />
32
+ );
33
+ };
12
34
  const UlItem = withClassName('li');
13
35
 
14
36
  export const Ul = Object.assign(UlBase, {
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
  }
package/src/css/util.css CHANGED
@@ -164,3 +164,16 @@
164
164
  display: block;
165
165
  }
166
166
  }
167
+
168
+ /* Visually hidden */
169
+ .sr-only {
170
+ position: absolute;
171
+ width: --fn-literal(1px);
172
+ height: --fn-literal(1px);
173
+ padding: 0;
174
+ margin: --fn-literal(-1px);
175
+ overflow: hidden;
176
+ clip: rect(0, 0, 0, 0);
177
+ white-space: nowrap;
178
+ border: 0;
179
+ }