@a-type/ui 6.0.15 → 6.0.17

package/dist/components/lists/lists.d.ts

@@ -1,6 +1,10 @@
-export declare const Ol: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>> & {
+import { ComponentProps } from 'react';
+export interface OlProps extends ComponentProps<'ol'> {
+    unstyled?: boolean;
+}
+export declare const Ol: (({ unstyled, className, ...rest }: OlProps) => import("react/jsx-runtime").JSX.Element) & {
     Item: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
 };
-export declare const Ul: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>> & {
+export declare const Ul: (({ unstyled, className, ...rest }: OlProps) => import("react/jsx-runtime").JSX.Element) & {
     Item: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>;
 };

package/dist/components/lists/lists.js

@@ -1,11 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
 import { withClassName } from '../../hooks.js';
 import cls from './lists.module.css';
-const OlBase = withClassName('ol', cls.ol);
+const OlBase = (_a) => {
+    var { unstyled, className } = _a, rest = __rest(_a, ["unstyled", "className"]);
+    return (_jsx("ol", Object.assign({}, rest, { className: clsx(cls.ol, className), "data-unstyled": unstyled ? true : undefined })));
+};
 const OlItem = withClassName('li');
 export const Ol = Object.assign(OlBase, {
     Item: OlItem,
 });
-const UlBase = withClassName('ul', cls.ul);
+const UlBase = (_a) => {
+    var { unstyled, className } = _a, rest = __rest(_a, ["unstyled", "className"]);
+    return (_jsx("ul", Object.assign({}, rest, { className: clsx(cls.ul, className), "data-unstyled": unstyled ? true : undefined })));
+};
 const UlItem = withClassName('li');
 export const Ul = Object.assign(UlBase, {
     Item: UlItem,

package/dist/components/lists/lists.js.map

@@ -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"}
+{"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

@@ -10,6 +10,14 @@
 	& > li {
 		margin-left: var(--m-space-sm);
 	}
+
+	&[data-unstyled] {
+		list-style: none;
+		gap: 0;
+		& > li {
+			margin-left: 0;
+		}
+	}
 }
 
 .ol {

package/dist/components/lists/lists.stories.d.ts

@@ -12,3 +12,4 @@ export default meta;
 type Story = StoryObj;
 export declare const OrderedList: Story;
 export declare const UnorderedList: Story;
+export declare const NoMarkers: Story;

package/dist/components/lists/lists.stories.js

@@ -18,4 +18,9 @@ export const UnorderedList = {
         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" })] })));
     },
 };
+export const NoMarkers = {
+    render(args) {
+        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" })] })));
+    },
+};
 //# sourceMappingURL=lists.stories.js.map

package/dist/components/lists/lists.stories.js.map

@@ -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"}
+{"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

@@ -126,3 +126,54 @@
 .p-xl {
 	padding: var(--m-space-xl);
 }
+
+/* Responsive */
+.lt-sm {
+	display: block;
+	@media (max-width: 640px) {
+		display: none;
+	}
+}
+.gt-sm {
+	display: none;
+	@media (min-width: 640px) {
+		display: block;
+	}
+}
+.lt-md {
+	display: block;
+	@media (max-width: 768px) {
+		display: none;
+	}
+}
+.gt-md {
+	display: none;
+	@media (min-width: 768px) {
+		display: block;
+	}
+}
+.lt-lg {
+	display: block;
+	@media (max-width: 1024px) {
+		display: none;
+	}
+}
+.gt-lg {
+	display: none;
+	@media (min-width: 1024px) {
+		display: block;
+	}
+}
+
+/* Visually hidden */
+.sr-only {
+	position: absolute;
+	width: --fn-literal(1px);
+	height: --fn-literal(1px);
+	padding: 0;
+	margin: --fn-literal(-1px);
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.15",
+  "version": "6.0.17",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/lists/lists.module.css

@@ -10,6 +10,14 @@
 	& > li {
 		margin-left: var(--m-space-sm);
 	}
+
+	&[data-unstyled] {
+		list-style: none;
+		gap: 0;
+		& > li {
+			margin-left: 0;
+		}
+	}
 }
 
 .ol {

package/src/components/lists/lists.stories.tsx

@@ -36,3 +36,15 @@ export const UnorderedList: Story = {
 		);
 	},
 };
+
+export const NoMarkers: Story = {
+	render(args) {
+		return (
+			<Ul {...args} unstyled>
+				<Ul.Item>First item</Ul.Item>
+				<Ul.Item>Second item</Ul.Item>
+				<Ul.Item>Third item</Ul.Item>
+			</Ul>
+		);
+	},
+};

package/src/components/lists/lists.tsx

@@ -1,14 +1,36 @@
+import clsx from 'clsx';
+import { ComponentProps } from 'react';
 import { withClassName } from '../../hooks.js';
 import cls from './lists.module.css';
 
-const OlBase = withClassName('ol', cls.ol);
+export interface OlProps extends ComponentProps<'ol'> {
+	unstyled?: boolean;
+}
+
+const OlBase = ({ unstyled, className, ...rest }: OlProps) => {
+	return (
+		<ol
+			{...rest}
+			className={clsx(cls.ol, className)}
+			data-unstyled={unstyled ? true : undefined}
+		/>
+	);
+};
 const OlItem = withClassName('li');
 
 export const Ol = Object.assign(OlBase, {
 	Item: OlItem,
 });
 
-const UlBase = withClassName('ul', cls.ul);
+const UlBase = ({ unstyled, className, ...rest }: OlProps) => {
+	return (
+		<ul
+			{...rest}
+			className={clsx(cls.ul, className)}
+			data-unstyled={unstyled ? true : undefined}
+		/>
+	);
+};
 const UlItem = withClassName('li');
 
 export const Ul = Object.assign(UlBase, {

package/src/css/util.css

@@ -126,3 +126,54 @@
 .p-xl {
 	padding: var(--m-space-xl);
 }
+
+/* Responsive */
+.lt-sm {
+	display: block;
+	@media (max-width: 640px) {
+		display: none;
+	}
+}
+.gt-sm {
+	display: none;
+	@media (min-width: 640px) {
+		display: block;
+	}
+}
+.lt-md {
+	display: block;
+	@media (max-width: 768px) {
+		display: none;
+	}
+}
+.gt-md {
+	display: none;
+	@media (min-width: 768px) {
+		display: block;
+	}
+}
+.lt-lg {
+	display: block;
+	@media (max-width: 1024px) {
+		display: none;
+	}
+}
+.gt-lg {
+	display: none;
+	@media (min-width: 1024px) {
+		display: block;
+	}
+}
+
+/* Visually hidden */
+.sr-only {
+	position: absolute;
+	width: --fn-literal(1px);
+	height: --fn-literal(1px);
+	padding: 0;
+	margin: --fn-literal(-1px);
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}