@a-type/ui 6.0.16 → 6.0.17

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/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/css/util.css +13 -0
  9. package/package.json +1 -1
  10. package/src/components/lists/lists.module.css +8 -0
  11. package/src/components/lists/lists.stories.tsx +12 -0
  12. package/src/components/lists/lists.tsx +24 -2
  13. 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/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.17",
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/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
+ }