@a-type/ui 1.6.5 → 1.7.0

package/src/components/dialog/Dialog.tsx

@@ -22,14 +22,14 @@ import { selectTriggerClassName } from '../select/index.js';
 
 const StyledOverlay = withClassName(
 	DialogPrimitive.Overlay,
-	'layer-components:(fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200 bg-overlay [box-shadow:inset_0_30px_60px_0px_var(--color-overlay)] border-top-1 border-top-solid border-top-gray-5)',
+	'layer-components:(fixed inset-0 z-dialog-backdrop animate-fade-in animate-duration-200 bg-overlay [box-shadow:inset_0_30px_60px_0px_var(--color-overlay)] border-top-1 border-top-solid border-top-gray)',
 	'layer-components:[&[data-state=closed]]:animate-fade-out',
 	'motion-reduce:animate-none',
 );
 
 const StyledContent = withClassName(
 	DialogPrimitive.Content,
-	'layer-components:(z-dialog fixed shadow-xl-up bg-white overflow-y-auto flex flex-col border-top-1 border-top-solid border-top-gray-5)',
+	'layer-components:(z-dialog fixed shadow-xl-up bg-white overflow-y-auto flex flex-col border-top-1 border-top-solid border-top-gray)',
 	'layer-components:sm:(shadow-xl)',
 	'transform-gpu !motion-reduce:animate-none',
 	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-w-450px max-h-85vh p-6 pt-8 rounded-lg border-b-1 pt-6)',
@@ -188,7 +188,7 @@ export const DialogSwipeHandle = function DialogSwipeHandle({
 				className,
 			)}
 		>
-			<div className="w-full h-[4px] bg-gray-4 rounded-lg" />
+			<div className="w-full h-[4px] bg-gray rounded-lg" />
 		</div>
 	);
 };

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -16,8 +16,8 @@ const StyledContent = withClassName(
 );
 const itemClassName = classNames(
 	'layer-components:(text-md leading-4 color-black flex items-center pr-4 pl-8 py-2 relative text-left select-none cursor-pointer)',
-	'layer-components:[&[data-disabled]]:(color-gray9 pointer-events-none)',
-	'layer-components:focus-visible:(bg-gray2 color-gray9)',
+	'layer-components:[&[data-disabled]]:(color-black pointer-events-none)',
+	'layer-components:focus-visible:(bg-gray-light bg-darken-0.5 color-black)',
 	'layer-components:focus:outline-none',
 );
 const StyledItemBase = withClassName(DropdownMenuPrimitive.Item, itemClassName);
@@ -55,7 +55,7 @@ const StyledRadioItem = withClassName(
 
 const StyledLabel = withClassName(
 	DropdownMenuPrimitive.Label,
-	'pl-3 py-1 font-bold text-sm leading-6 color-gray-9',
+	'pl-3 py-1 font-bold text-sm leading-6 color-gray-dark',
 );
 
 const StyledSeparator = withClassName(
@@ -102,7 +102,7 @@ export const DropdownMenuContent = ({
 	return (
 		<StyledPortal forceMount={forceMount}>
 			<StyledContent {...props}>
-				<div className="overflow-hidden rounded-xl">{children}</div>
+				<div className="overflow-hidden rounded-lg">{children}</div>
 				<StyledArrow />
 			</StyledContent>
 		</StyledPortal>

package/src/components/editableText/EditableText.tsx

@@ -104,7 +104,7 @@ export function EditableText({
 				inputClassName,
 				'layer-variants:(border-transparent bg-transparent w-auto inline-flex items-center gap-2 font-size-inherit text-inherit shadow-none)',
 				'layer-variants:hover:(bg-gray-blend)',
-				'layer-variants:focus-visible:(outline-none bg-gray-dark-blend)',
+				'layer-variants:focus-visible:(outline-none bg-gray-darkBlend)',
 				'cursor-pointer',
 				className,
 			)}

package/src/components/forms/CheckboxField.tsx

@@ -43,5 +43,5 @@ const FieldRoot = withClassName(
 
 const FieldLabel = withClassName(
 	'label',
-	'layer-components:(inline-flex flex-col gap-1 text-md font-normal text-dark-blend mt-2px)',
+	'layer-components:(inline-flex flex-col gap-1 text-md font-normal text-darkBlend mt-2px)',
 );

package/src/components/forms/NumberStepperField.tsx

@@ -1,10 +1,10 @@
 import { useField } from 'formik';
 import { withClassName } from '../../hooks.js';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import {
 	NumberStepper,
 	NumberStepperProps,
 } from '../numberStepper/NumberStepper.js';
-import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 
 export interface NumberStepperFieldProps
 	extends Omit<NumberStepperProps, 'value' | 'onChange'> {
@@ -50,5 +50,5 @@ const FieldRoot = withClassName(
 
 const FieldLabel = withClassName(
 	'label',
-	'layer-components:(block flex-col gap-1 text-md font-normal text-dark-blend mt-2px)',
+	'layer-components:(block flex-col gap-1 text-md font-normal text-darkBlend mt-2px)',
 );

package/src/components/forms/TextField.tsx

@@ -133,5 +133,5 @@ export const FieldRoot = withClassName(
 );
 export const FieldLabel = withClassName(
 	'label',
-	'inline-flex flex-col gap-1 text-sm font-bold text-dark-blend mb-1',
+	'inline-flex flex-col gap-1 text-sm font-bold text-darkBlend mb-1',
 );

package/src/components/horizontalList/HorizontalList.tsx

@@ -170,7 +170,7 @@ export function HorizontalList({
 							className={clsx(
 								'flex-shrink-0 bg-[var(--scroll-bg)] sticky left-0 top-2 z-1',
 								!open &&
-									'rounded-none h-full border-r border-r-solid border-r-gray-5',
+									'rounded-none h-full border-r border-r-solid border-r-gray',
 							)}
 						>
 							<Icon

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

@@ -429,6 +429,19 @@ export const IconSpritesheet = (props: any) => (
 					fill="currentColor"
 				/>
 			</symbol>
+			<symbol id="icon-linkRemove" viewBox="0 0 15 15">
+				<path
+					d="M12.5 2.5L2.5 12.5"
+					stroke="currentColor"
+					strokeLinecap="round"
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9.58577 4.00001H9.50002C9.22387 4.00001 9.00002 4.22387 9.00002 4.50001C9.00002 4.52706 9.00216 4.55361 9.0063 4.57949L9.58577 4.00001ZM6.58579 7H5.00068C4.72454 7 4.50068 7.22386 4.50068 7.5C4.50068 7.77614 4.72454 8 5.00068 8H5.58579L6.58579 7ZM8.41421 8L9.41421 7H10.0007C10.2768 7 10.5007 7.22386 10.5007 7.5C10.5007 7.77614 10.2768 8 10.0007 8H8.41421ZM3.62037 9.96542C3.61557 9.96456 3.61081 9.96367 3.60607 9.96277C2.80293 9.8094 2.19187 9.21108 2.03765 8.46678C2.00264 8.29778 2.00002 8.08251 2.00002 7.50001C2.00002 6.91752 2.00264 6.70225 2.03765 6.53324C2.19187 5.78895 2.80293 5.19062 3.60607 5.03725C3.78938 5.00225 4.02114 5.00001 4.62502 5.00001H5.50002C5.77616 5.00001 6.00002 4.77615 6.00002 4.50001C6.00002 4.22387 5.77616 4.00001 5.50002 4.00001H4.62502L4.56433 4.00001C4.04165 3.99993 3.70718 3.99988 3.41851 4.055C2.2382 4.28039 1.29877 5.17053 1.05845 6.33035C0.999843 6.61321 0.999909 6.93998 1.00001 7.43689L1.00002 7.50001L1.00001 7.56313C0.999909 8.06004 0.999843 8.38681 1.05845 8.66967C1.25643 9.62517 1.92889 10.3976 2.81962 10.7662L3.62037 9.96542ZM5.4142 11L5.99373 10.4205C5.99787 10.4464 6.00002 10.4729 6.00002 10.5C6.00002 10.7762 5.77616 11 5.50002 11H5.4142ZM11.3796 5.0346L12.1804 4.23384C13.0711 4.60237 13.7436 5.37484 13.9416 6.33035C14.0002 6.61321 14.0001 6.93998 14 7.43688L14 7.50001L14 7.56314C14.0001 8.06005 14.0002 8.38681 13.9416 8.66967C13.7013 9.8295 12.7618 10.7196 11.5815 10.945C11.2929 11.0001 10.9584 11.0001 10.4357 11L10.375 11H9.50002C9.22387 11 9.00002 10.7762 9.00002 10.5C9.00002 10.2239 9.22387 10 9.50002 10H10.375C10.9789 10 11.2107 9.99777 11.394 9.96277C12.1971 9.8094 12.8082 9.21108 12.9624 8.46678C12.9974 8.29778 13 8.08251 13 7.50001C13 6.91752 12.9974 6.70225 12.9624 6.53324C12.8082 5.78895 12.1971 5.19062 11.394 5.03725C11.3892 5.03635 11.3844 5.03546 11.3796 5.0346Z"
+					fill="currentColor"
+				/>
+			</symbol>
 			<symbol id="icon-camera" viewBox="0 0 15 15">
 				<path
 					fillRule="evenodd"
@@ -957,6 +970,12 @@ export const IconSpritesheet = (props: any) => (
 					strokeLinejoin="round"
 				/>
 			</symbol>
+			<symbol id="icon-share" viewBox="0 0 15 15">
+				<circle cx="11.5" cy="2.5" r="2" fill="currentColor" />
+				<circle cx="11.5" cy="12.5" r="2" fill="currentColor" />
+				<circle cx="4" cy="7.5" r="2" fill="currentColor" />
+				<path d="M11.5 2.5L3.5 7.5L11.5 12.5" stroke="currentColor" />
+			</symbol>
 		</defs>
 	</svg>
 );

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

@@ -38,6 +38,7 @@ export const iconNames = [
 	'maximize',
 	'email',
 	'link',
+	'linkRemove',
 	'camera',
 	'calendar',
 	'page',
@@ -85,6 +86,7 @@ export const iconNames = [
 	'skipEnd',
 	'enterKey',
 	'gamePiece',
+	'share',
 ] as const;
 
 export type IconName = (typeof iconNames)[number];

package/src/components/input/Input.tsx

@@ -4,10 +4,10 @@ import { ChangeEvent, ComponentProps, FocusEvent, useCallback } from 'react';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export const inputClassName = classNames(
-	'layer-components:(px-5 py-1.25 text-md font-sans rounded-xl bg-white select-auto min-w-60px color-black border-solid border border-gray-5 shadow-sm-inset)',
-	'layer-components:focus:(outline-none bg-gray-1 ring-4	ring-white)',
-	'layer-components:focus-visible:(outline-none ring-gray-dark-blend)',
-	'layer-components:disabled:(bg-transparent border-gray-5 placeholder-gray-7 shadow-none)',
+	'layer-components:(px-5 py-1.25 text-md font-sans rounded-xl bg-white select-auto min-w-60px color-black border-solid border border-gray-dark shadow-sm-inset)',
+	'layer-components:focus:(outline-none bg-lighten-2 ring-4	ring-white)',
+	'layer-components:focus-visible:(outline-none ring-gray-darkBlend)',
+	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',
 	'layer-components:md:(min-w-120px)',
 );
 

package/src/components/masonry/masonry.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Masonry } from './masonry.js';
 import { useState } from 'react';
+import { Masonry } from './masonry.js';
 
 const meta = {
 	title: 'Masonry',
@@ -33,7 +33,7 @@ const content = (spans?: boolean) =>
 		return (
 			<div
 				key={i}
-				className="bg-gray-5 rounded-lg"
+				className="bg-gray-light rounded-lg"
 				style={{ height: size }}
 				data-span={spans ? span : undefined}
 				onClick={() => setSpan((v) => (v === 1 ? 2 : 1))}

package/src/components/navBar/NavBar.tsx

@@ -5,12 +5,12 @@ import { withClassName } from '../../hooks.js';
 import { Icon, IconProps } from '../icon/index.js';
 
 export const navBarItemClass = classNames(
-	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-gray-7 select-none)',
+	'layer-components:(flex flex-col items-center justify-center whitespace-nowrap py-1 px-3 bg-transparent rounded-md border-none cursor-pointer text-sm transition-colors h-full gap-6px relative text-gray-dark select-none)',
 	'layer-components:sm:(flex-row-reverse h-auto justify-start gap-2 overflow-visible)',
-	'layer-components:active:bg-primary-wash layer-components:sm:active:bg-gray-dark-blend',
-	'layer-components:hover:bg-primary-wash',
-	'layer-components:focus-visible:(outline-none bg-primary-wash)',
-	'layer-components:[&[data-active=true]]:(bg-primary-wash text-black)',
+	'layer-components:active:bg-darken-2 layer-components:sm:active:bg-darken-2',
+	'layer-components:hover:bg-darken-1',
+	'layer-components:focus-visible:(outline-none bg-darken-3)',
+	'layer-components:[&[data-active=true]]:(bg-[var(--bg)] bg-darken-2 text-black)',
 	'layer-components:([--bg:var(--color-primary-wash)] [--fill:var(--color-primary)])',
 );
 
@@ -40,11 +40,11 @@ export const NavBarItem = function NavBarItem({
 			className={classNames(
 				navBarItemClass,
 				color === 'neutral' && [
-					'layer-variants:active:bg-gray-dark-blend layer-variants:sm:active:bg-gray-dark-blend',
-					'layer-variants:hover:bg-gray-dark-blend',
-					'layer-variants:focus-visible:(bg-gray-dark-blend)',
-					'layer-variants:[&[data-active=true]]:(bg-gray-dark-blend text-black)',
-					'layer-variants:([--bg:var(--color-gray-blend)] [--fill:var(--color-gray-5)])',
+					'layer-variants:active:bg-gray-darkBlend layer-variants:sm:active:bg-gray-darkBlend',
+					'layer-variants:hover:bg-gray-darkBlend',
+					'layer-variants:focus-visible:(bg-gray-darkBlend)',
+					'layer-variants:[&[data-active=true]]:(bg-gray-darkBlend text-black)',
+					'layer-variants:([--bg:var(--color-gray-blend)] [--fill:var(--color-gray)])',
 				],
 				className,
 			)}

package/src/components/numberStepper/NumberStepper.tsx

@@ -67,9 +67,9 @@ export function NumberStepper({
 	return (
 		<div
 			className={classNames(
-				'layer-components:(flex items-center border-solid border border-gray-5 rounded-lg overflow-hidden w-min-content flex-shrink-0 bg-white shadow-sm)',
+				'layer-components:(flex items-center border-solid border border-gray-dark rounded-lg overflow-hidden w-min-content flex-shrink-0 bg-white shadow-sm)',
 				disabled &&
-					'layer-variants:(border-gray-dark-blend bg-transparent shadow-none)',
+					'layer-variants:(border-gray-darkBlend bg-transparent shadow-none)',
 				{
 					'layer-variants:(bg-accent-wash color-black)':
 						!!highlightChange && value !== 1,

package/src/components/popover/Popover.tsx

@@ -26,7 +26,7 @@ const StyledArrow = withClassName(
 
 const StyledClose = withClassName(
 	PopoverPrimitive.Close,
-	'layer-components:([all:unset] [font-family:inherit] rounded-lg h-25px w-25px inline-flex items-center justify-center color-dark-blend absolute top-5px right-5px hover:bg-light-blend focus:shadow-focus)',
+	'layer-components:([all:unset] [font-family:inherit] rounded-lg h-25px w-25px inline-flex items-center justify-center color-darkBlend absolute top-5px right-5px hover:bg-lightBlend focus:shadow-focus)',
 );
 
 // Exports

package/src/components/richEditor/index.ts

@@ -10,7 +10,7 @@ export const tipTapClassName = clsx(
 	'layer-components:[&_.ProseMirror_h4]:(text-sm font-bold mb-sm)',
 	'layer-components:[&_.ProseMirror_p]:(mb-sm)',
 	'layer-components:[&_.ProseMirror_a]:underline',
-	'layer-components:[&_.ProseMirror]:(bg-white rounded-[20px] px-4 py-2 shadow-sm-inset border-gray-5 border-solid border-1)',
+	'layer-components:[&_.ProseMirror]:(bg-white rounded-[20px] px-4 py-2 shadow-sm-inset border-gray border-solid border-1)',
 );
 
 export const tipTapReadonlyClassName = clsx(

package/src/components/scrollArea/ScrollArea.tsx

@@ -38,15 +38,15 @@ export const ScrollAreaViewport = withClassName(
 
 export const ScrollAreaScrollbarRoot = withClassName(
 	Primitive.Scrollbar,
-	'layer-components:(flex select-none touch-none p-0.5 bg-gray-2 transition-colors duration-160ms ease-out)',
-	'layer-components:hover:bg-gray-3',
+	'layer-components:(flex select-none touch-none p-0.5 bg-gray-wash transition-colors duration-160ms ease-out)',
+	'layer-components:hover:bg-lighten-1',
 	'layer-components:[&[data-orientation=vertical]]:w-2.5',
 	'layer-components:[&[data-orientation=horizontal]]:(flex-col h-2.5)',
 );
 
 export const ScrollAreaThumb = withClassName(
 	Primitive.Thumb,
-	'layer-components:(flex-1 rounded-lg relative bg-gray-5)',
+	'layer-components:(flex-1 rounded-lg relative bg-gray)',
 	'before:(content-[""] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full min-w-44px min-h-44px)',
 );
 

package/src/components/select/Select.tsx

@@ -44,8 +44,10 @@ export const SelectItem = ({
 
 export const SelectItemRoot = withClassName(
 	SelectPrimitive.Item,
-	'text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none',
-	'[&[data-disabled]]:(color-gray5 pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)',
+	'layer-components:(text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none)',
+	'layer-components:[&[data-disabled]]:(color-gray5 pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)',
+	'layer-components:[&:first-child]:(rounded-t-lg)',
+	'layer-components:[&:last-child]:(rounded-b-lg)',
 );
 export const SelectItemIndicatorRoot = withClassName(
 	SelectPrimitive.ItemIndicator,

package/src/components/tabs/tabs.tsx

@@ -11,17 +11,15 @@ export const TabsList = withClassName(
 
 export const TabsTriggerBase = withClassName(
 	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold text-gray-8 border-gray-8 transition-colors cursor-pointer select-none font-sans flex-shrink-0 shadow-sm)',
-	'layer-components:hover:bg-[var(--hover)]',
-	'layer-components:focus-visible:(focus-ring focus-ring-[var(--focus)] outline-off)',
-	'[&[data-state=active]]:(font-semibold bg-[var(--focus,var(--hover))] text-black cursor-default hover:bg-[var(--hover)] relative z-1)',
+	'layer-components:(flex flex-row items-center cursor-pointer justify-center gap-2 color-black py-1 px-5 bg-wash text-md min-w-100px rounded-lg border-default font-semibold text-gray-darkBlend border-gray-dark transition-all cursor-pointer select-none font-sans flex-shrink-0 shadow-sm)',
+	'layer-components:hover:(bg-darken-1 ring-4 ring-bg)',
+	'layer-components:focus-visible:(bg-darken-3 ring-6 ring-bg outline-off)',
+	'[&[data-state=active]]:(bg-[var(--bg)] font-semibold text-black cursor-default hover:bg-darken-1 relative z-1)',
 );
 
 const colorClasses = {
-	default:
-		'layer-variants:([--bg:var(--color-white)] [--hover:var(--color-gray-3)] [--focus:var(--color-gray-4)] [--active:var(--color-gray-4)])',
-	primary:
-		'layer-variants:([--bg:var(--color-primary)] [--hover:var(--color-primary-light)] [--focus:var(--color-primary-light)] [--active:var(--color-primary-light)])',
+	default: 'layer-variants:([--bg:var(--color-white)])',
+	primary: 'layer-variants:([--bg:var(--color-primary-light)])',
 };
 
 export interface TabsTriggerProps

package/src/themes.stories.tsx

@@ -4,7 +4,26 @@ import { ActionBar, ActionButton } from './components/actions/index.js';
 import { Button } from './components/button/index.js';
 import { Card } from './components/card/index.js';
 import { Icon } from './components/icon/index.js';
-import { AvatarList, Dialog, Tooltip } from './components/index.js';
+import {
+	AvatarList,
+	Box,
+	DateRangePicker,
+	Dialog,
+	DropdownMenu,
+	ImageUploader,
+	NavBarItem,
+	NavBarItemIcon,
+	NavBarItemIconWrapper,
+	NavBarItemPip,
+	NavBarItemText,
+	NavBarRoot,
+	Note,
+	PageContent,
+	PageNav,
+	PageRoot,
+	Progress,
+	Tooltip,
+} from './components/index.js';
 import { Input } from './components/input/index.js';
 import { Tabs } from './components/tabs/tabs.js';
 import { TextArea } from './components/textArea/index.js';
@@ -22,91 +41,146 @@ export default meta;
 type Story = StoryObj;
 
 function DemoUI({ className }: { className?: string }) {
+	const nextWeek = new Date();
+	nextWeek.setDate(nextWeek.getDate() + 7);
 	return (
-		<div className={clsx('grid gap-2 grid-cols-3', className)}>
-			<div className="col">
-				<Button color="primary">Primary</Button>
-				<Button color="accent">Accent</Button>
-				<Button>Default</Button>
-				<Button color="contrast">Contrast</Button>
-				<Button color="ghost">Ghost</Button>
-				<Button color="ghostAccent">Ghost Accent</Button>
-				<Button size="small" color="destructive">
-					Destructive
-				</Button>
-				<Button size="small" color="ghostDestructive">
-					Ghost Destructive
-				</Button>
-			</div>
-			<div className="col">
-				<Input placeholder="Placeholder" />
-				<TextArea placeholder="Placeholder" />
-			</div>
-			<div>
-				<Card>
-					<Card.Main>
-						<Card.Title>Card Title</Card.Title>
-						<Card.Content>Card Content</Card.Content>
-					</Card.Main>
-					<Card.Footer>
-						<Card.Actions>
-							<Button size="small">Action 1</Button>
-						</Card.Actions>
-					</Card.Footer>
-				</Card>
-			</div>
-			<div>
-				<Tabs defaultValue="tab1">
-					<Tabs.List>
-						<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
-						<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
-					</Tabs.List>
-					<Tabs.Content value="tab1">Tab 1 Content</Tabs.Content>
-					<Tabs.Content value="tab2">Tab 2 Content</Tabs.Content>
-				</Tabs>
-			</div>
-			<div>
-				<ActionBar>
-					<ActionButton>
-						<Icon name="placeholder" />
-						Hello
-					</ActionButton>
-					<ActionButton color="primary">
-						<Icon name="placeholder" />
-						World
-					</ActionButton>
-					<ActionButton>
-						<Icon name="placeholder" />
-					</ActionButton>
-				</ActionBar>
-			</div>
-			<div>
-				<AvatarList count={3}>
-					<AvatarList.Item index={0} name="John Doe" />
-					<AvatarList.Item index={1} name="Jane Doe" />
-					<AvatarList.Item index={2} name="John Smith" />
-				</AvatarList>
-			</div>
-			<div>
-				<Tooltip content="Hello World">
-					<Button>Hover me</Button>
-				</Tooltip>
-			</div>
-			<div>
-				<Dialog>
-					<Dialog.Trigger asChild>
-						<Button>Click</Button>
-					</Dialog.Trigger>
-					<Dialog.Content>
-						<Dialog.Title>Hello there</Dialog.Title>
-						<Dialog.Description>Im a dialog</Dialog.Description>
-						<Dialog.Actions>
-							<Dialog.Close>Close</Dialog.Close>
-						</Dialog.Actions>
-					</Dialog.Content>
-				</Dialog>
-			</div>
-		</div>
+		<PageRoot>
+			<PageContent>
+				<div className={clsx('grid gap-2 grid-cols-2', className)}>
+					<Box gap wrap p>
+						<Button color="primary">Primary</Button>
+						<Button color="accent">Accent</Button>
+						<Button>Default</Button>
+						<Button color="contrast">Contrast</Button>
+						<Button color="destructive">Destructive</Button>
+						<Button color="ghost">Ghost</Button>
+						<Button color="ghostAccent">Ghost Accent</Button>
+						<Button size="small" color="destructive">
+							Destructive Small
+						</Button>
+						<Button size="small" color="ghostDestructive">
+							Ghost Destructive Small
+						</Button>
+					</Box>
+					<Box gap wrap p>
+						<Input placeholder="Placeholder" />
+						<TextArea placeholder="Placeholder" />
+					</Box>
+					<Card>
+						<Card.Main>
+							<Card.Title>Card Title</Card.Title>
+							<Card.Content>Card Content</Card.Content>
+						</Card.Main>
+						<Card.Footer>
+							<Card.Actions>
+								<Button size="small">Action 1</Button>
+							</Card.Actions>
+						</Card.Footer>
+					</Card>
+					<Tabs defaultValue="tab1">
+						<Tabs.List>
+							<Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+							<Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+						</Tabs.List>
+						<Tabs.Content value="tab1">Tab 1 Content</Tabs.Content>
+						<Tabs.Content value="tab2">Tab 2 Content</Tabs.Content>
+					</Tabs>
+					<ActionBar>
+						<ActionButton>
+							<Icon name="placeholder" />
+							Hello
+						</ActionButton>
+						<ActionButton color="primary">
+							<Icon name="placeholder" />
+							World
+						</ActionButton>
+						<ActionButton>
+							<Icon name="placeholder" />
+						</ActionButton>
+					</ActionBar>
+					<AvatarList count={3}>
+						<AvatarList.Item index={0} name="John Doe" />
+						<AvatarList.Item index={1} name="Jane Doe" />
+						<AvatarList.Item index={2} name="John Smith" />
+					</AvatarList>
+					<Tooltip content="Hello World">
+						<Button>Hover me</Button>
+					</Tooltip>
+					<Dialog>
+						<Dialog.Trigger asChild>
+							<Button>Click</Button>
+						</Dialog.Trigger>
+						<Dialog.Content>
+							<Dialog.Title>Hello there</Dialog.Title>
+							<Dialog.Description>Im a dialog</Dialog.Description>
+							<Dialog.Actions>
+								<Dialog.Close>Close</Dialog.Close>
+							</Dialog.Actions>
+						</Dialog.Content>
+					</Dialog>
+					<DateRangePicker
+						className="grid-col-span-2"
+						value={{
+							start: new Date(),
+							end: nextWeek,
+						}}
+						onChange={() => {}}
+					/>
+					<Progress value={50} className="m-auto" />
+					<Box surface="primary" p>
+						Primary surface
+					</Box>
+					<Box surface="accent" p>
+						Accent surface
+					</Box>
+					<Box surface="default" p>
+						Default surface
+					</Box>
+					<Box>
+						<Note>Note note</Note>
+					</Box>
+					<ImageUploader className="h-400px" value={null} onChange={() => {}} />
+					<DropdownMenu>
+						<DropdownMenu.Trigger asChild>
+							<Button>Dropdown</Button>
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content>
+							<DropdownMenu.Item>Item 1</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 2</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 3</DropdownMenu.Item>
+						</DropdownMenu.Content>
+					</DropdownMenu>
+				</div>
+			</PageContent>
+			<PageNav>
+				<NavBarRoot>
+					<NavBarItem>
+						<NavBarItemIconWrapper>
+							<NavBarItemIcon name="cart" />
+						</NavBarItemIconWrapper>
+						<NavBarItemText>Item 1 long</NavBarItemText>
+					</NavBarItem>
+					<NavBarItem active={true}>
+						<NavBarItemIconWrapper>
+							<NavBarItemIcon asChild>
+								<Icon name="book" />
+							</NavBarItemIcon>
+						</NavBarItemIconWrapper>
+						<NavBarItemText>Item 2</NavBarItemText>
+						<NavBarItemPip />
+					</NavBarItem>
+					<NavBarItem color="neutral" active={true}>
+						<NavBarItemIconWrapper>
+							<NavBarItemIcon asChild>
+								<Icon name="book" />
+							</NavBarItemIcon>
+						</NavBarItemIconWrapper>
+						<NavBarItemText>Neutral</NavBarItemText>
+						<NavBarItemPip />
+					</NavBarItem>
+				</NavBarRoot>
+			</PageNav>
+		</PageRoot>
 	);
 }