@a-type/ui 1.3.4 → 1.3.6

package/dist/esm/components/layouts/layouts.stories.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Button } from '../button/index.js';
+import { Card } from '../card/Card.js';
 import { Icon } from '../icon/index.js';
 import { Input } from '../input/index.js';
 import { NavBarItem, NavBarItemIcon, NavBarItemIconWrapper, NavBarItemPip, NavBarItemText, NavBarRoot, } from '../navBar/index.js';
@@ -19,7 +20,7 @@ const meta = {
 };
 export default meta;
 export const Default = {
-    render: () => (_jsxs(PageRoot, { className: "w-full h-full", children: [_jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." })] }), _jsx(PageNowPlaying, { children: "Now playing" })] }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { asChild: true, children: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] })] }) })] })),
+    render: () => (_jsxs(PageRoot, { className: "w-full h-full", children: [_jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." }), _jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })] }), _jsx(PageNowPlaying, { children: "Now playing" })] }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { asChild: true, children: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] })] }) })] })),
 };
 export const WithoutNav = {
     render: () => (_jsx(PageRoot, { className: "w-full h-full", children: _jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." })] }), _jsx(PageNowPlaying, { children: "Now playing" })] }) })),

package/dist/esm/components/layouts/layouts.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"layouts.stories.js","sourceRoot":"","sources":["../../../../src/components/layouts/layouts.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"layouts.stories.js","sourceRoot":"","sources":["../../../../src/components/layouts/layouts.stories.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "type": "module",
   "files": [
     "/dist",

package/src/components/avatar/AvatarList.tsx

@@ -1,12 +1,12 @@
-import { ReactNode, createContext, useContext } from 'react';
 import classNames from 'clsx';
+import { ReactNode, createContext, useContext } from 'react';
 import { Avatar, AvatarProps } from './Avatar.js';
 
 const AvatarListContext = createContext<{ size: number }>({
 	size: 24,
 });
 
-export function AvatarList({
+export function AvatarListRoot({
 	children,
 	count,
 	size = 24,
@@ -69,3 +69,8 @@ export function AvatarListItem({
 		</AvatarListItemRoot>
 	);
 }
+
+export const AvatarList = Object.assign(AvatarListRoot, {
+	Item: AvatarListItem,
+	ItemRoot: AvatarListItemRoot,
+});

package/src/components/icon/generated/IconSpritesheet.tsx

@@ -865,6 +865,78 @@ export const IconSpritesheet = (props: any) => (
 					stroke="currentColor"
 				/>
 			</symbol>
+			<symbol id="icon-next" viewBox="0 0 15 15">
+				<path
+					d="M11 7.5L4 1V14L11 7.5Z"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</symbol>
+			<symbol id="icon-playPause" viewBox="0 0 15 15">
+				<path
+					d="M14.5 8L5 1V14L14.5 8Z"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<path
+					d="M2 1V14"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</symbol>
+			<symbol id="icon-pause" viewBox="0 0 15 15">
+				<path
+					d="M2 14H6V1H2V14Z"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<path
+					d="M9 14H13V1H9V14Z"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</symbol>
+			<symbol id="icon-previous" viewBox="0 0 15 15">
+				<path
+					d="M4 7.5L11 14L11 1L4 7.5Z"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</symbol>
+			<symbol id="icon-skipStart" viewBox="0 0 15 15">
+				<path
+					d="M4 7.5L11 14L11 1L4 7.5Z"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<path
+					d="M3 1V14"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</symbol>
+			<symbol id="icon-skipEnd" viewBox="0 0 15 15">
+				<path
+					d="M11 7.5L4 1L4 14L11 7.5Z"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+				<path
+					d="M12 14L12 1"
+					stroke="currentColor"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			</symbol>
 		</defs>
 	</svg>
 );

package/src/components/icon/generated/iconNames.ts

@@ -77,6 +77,12 @@ export const iconNames = [
 	'home',
 	'thermometer',
 	'lightbulb',
+	'next',
+	'playPause',
+	'pause',
+	'previous',
+	'skipStart',
+	'skipEnd',
 ] as const;
 
 export type IconName = (typeof iconNames)[number];

package/src/components/layouts/PageContent.tsx

@@ -29,7 +29,6 @@ export function PageContent({
 		<div
 			className={classNames(
 				'layer-components:([grid-area:content] max-w-full min-w-0 w-full flex flex-col items-start relative flex-1 gap-3)',
-				'layer-components:(rounded-b-lg border-b border-b-solid border-b-[#00000070] bg-wash [box-shadow:0_0_10px_0_var(--color-shadow-1)] sm:border-none sm:rounded-0 sm:shadow-none)',
 				{ 'layer-variants:(overflow-y-auto h-full)': scrollable },
 				className,
 			)}

package/src/components/layouts/PageNav.tsx

@@ -24,7 +24,8 @@ export function PageNav({
 			{...props}
 			className={classNames(
 				'layer-components:([grid-area:nav] relative z-nav pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))])',
-				'layer-components:sm:([grid-area:nav] sticky top-0 h-auto bottom-auto left-auto right-auto)',
+				'layer-components:before:(content-[""] absolute inset-x-4 top-0 h-px bg-[#00000070])',
+				'layer-components:sm:([grid-area:nav] sticky top-0 h-auto bottom-auto left-auto right-auto) layer-components:sm:before:(hidden)',
 				className,
 			)}
 			ref={ref}

package/src/components/layouts/PageRoot.tsx

@@ -2,7 +2,7 @@ import { withClassName } from '../../hooks.js';
 
 export const PageRoot = withClassName(
 	'div',
-	'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-0 h-full bg-gray-1)',
+	'layer-components:(flex-grow-1 flex-shrink-1 flex-basis-0 min-h-0 h-full bg-wash)',
 	'layer-components:(grid grid-areas-[content]-[nav] grid-cols-[1fr] grid-rows-[1fr] items-start justify-center)',
 	'sm:layer-responsive:(grid-areas-[gutter1_nav_content_gutter2] grid-cols-[1fr_auto_min(800px,60vw)_1fr] min-h-auto bg-wash)',
 );

package/src/components/layouts/layouts.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
 import { Button } from '../button/index.js';
+import { Card } from '../card/Card.js';
 import { Icon } from '../icon/index.js';
 import { Input } from '../input/index.js';
 import {
@@ -36,6 +37,13 @@ export const Default: Story = {
 				<div className="text-center">
 					<h1 className="text-3xl font-bold">Hello, World!</h1>
 					<p className="text-lg">This is a simple page layout.</p>
+					<Card.Grid>
+						{new Array(100).fill(null).map((_, i) => (
+							<Card key={i}>
+								<Card.Main />
+							</Card>
+						))}
+					</Card.Grid>
 				</div>
 				<PageNowPlaying>Now playing</PageNowPlaying>
 			</PageContent>