@a-type/ui 5.0.21 → 6.0.0

package/src/components/tooltip/Tooltip.tsx

@@ -6,15 +6,16 @@ import {
 } from '@base-ui/react/tooltip';
 import classNames from 'clsx';
 import { ReactElement, ReactNode } from 'react';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
+import menuCls from '../primitives/menus.module.css';
 import { ArrowSvg } from '../utility/ArrowSvg.js';
+import cls from './Tooltip.module.css';
 
 export type * from '@base-ui/react/tooltip';
 
 export interface TooltipContentProps
 	extends TooltipPopupProps,
 		Omit<TooltipPositionerProps, 'className' | 'style' | 'render'> {
-	color?: 'contrast' | 'white' | 'neutral' | 'attention';
+	color?: 'contrast' | 'neutral' | 'attention';
 }
 
 function Content({
@@ -38,46 +39,39 @@ function Content({
 }: TooltipContentProps) {
 	return (
 		<TooltipPrimitive.Portal>
-			<GroupScaleReset>
-				<TooltipPrimitive.Positioner
-					side={side}
-					sideOffset={sideOffset}
-					align={align}
-					alignOffset={alignOffset}
-					anchor={anchor}
-					disableAnchorTracking={disableAnchorTracking}
-					sticky={sticky}
-					arrowPadding={arrowPadding}
-					collisionAvoidance={collisionAvoidance}
-					collisionBoundary={collisionBoundary}
-					collisionPadding={collisionPadding}
-					positionMethod={positionMethod}
+			<TooltipPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				disableAnchorTracking={disableAnchorTracking}
+				sticky={sticky}
+				arrowPadding={arrowPadding}
+				collisionAvoidance={collisionAvoidance}
+				collisionBoundary={collisionBoundary}
+				collisionPadding={collisionPadding}
+				positionMethod={positionMethod}
+			>
+				<TooltipPrimitive.Popup
+					data-color={color}
+					render={render}
+					className={classNames(
+						cls.popup,
+						'@mode-dense',
+						{
+							'@mode-attention': color === 'attention',
+						},
+						className,
+					)}
+					{...props}
 				>
-					<TooltipPrimitive.Popup
-						render={render}
-						className={classNames(
-							'layer-components:(relative flex select-none rounded-sm px-sm py-xs text-sm leading-tight shadow-sm transition)',
-							'layer-components:data-[instant]:transition-none',
-							'layer-components:start-end:(scale-95 opacity-0)',
-							'layer-components:transform-origin-[var(--transform-origin)]',
-							{
-								'layer-variants:(color-white bg-black)': color === 'contrast',
-								'layer-variants:(border color-black bg-white border-gray)':
-									color === 'white' || color === 'neutral',
-								'layer-variants:(color-white bg-attention-ink)':
-									color === 'attention',
-							},
-							className,
-						)}
-						{...props}
-					>
-						{children}
-						<TooltipPrimitive.Arrow className="layer-components:arrow">
-							<ArrowSvg />
-						</TooltipPrimitive.Arrow>
-					</TooltipPrimitive.Popup>
-				</TooltipPrimitive.Positioner>
-			</GroupScaleReset>
+					{children}
+					<TooltipPrimitive.Arrow className={menuCls.arrow}>
+						<ArrowSvg />
+					</TooltipPrimitive.Arrow>
+				</TooltipPrimitive.Popup>
+			</TooltipPrimitive.Positioner>
 		</TooltipPrimitive.Portal>
 	);
 }

package/src/components/typography/typography.module.css

@@ -0,0 +1,24 @@
+.typography {
+	@apply --mx-fg(inherit);
+	font-size: var(--m-text-secondary-size);
+	line-height: var(--m-text-secondary-lineHeight);
+	font-weight: var(--m-text-secondary-weight);
+
+	&[data-emphasis='primary'] {
+		font-size: var(--m-text-primary-size);
+		line-height: var(--m-text-primary-lineHeight);
+		font-weight: var(--m-text-primary-weight);
+	}
+
+	&[data-emphasis='ambient'] {
+		font-size: var(--m-text-ambient-size);
+		line-height: var(--m-text-ambient-lineHeight);
+		font-weight: var(--m-text-ambient-weight);
+	}
+}
+
+@layer components {
+	.removeMargin {
+		margin-block: 0;
+	}
+}

package/src/components/typography/typography.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Box } from '../box/Box.js';
+import { Heading, HeroText, Text } from './typography.js';
+
+const meta = {
+	title: 'Components/typography',
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+	render() {
+		return (
+			<Box col gap>
+				<HeroText emphasis="primary">
+					Hero Text: Lorem ipsum dolor sit amet etc etc
+				</HeroText>
+				<Heading emphasis="primary">
+					Heading Primary: Lorem ipsum dolor sit amet etc etc
+				</Heading>
+				<Heading emphasis="secondary">
+					Heading Secondary: Lorem ipsum dolor sit amet etc etc
+				</Heading>
+				<Heading emphasis="ambient">
+					Heading Ambient: Lorem ipsum dolor sit amet etc etc
+				</Heading>
+				<Text emphasis="primary">
+					Text Primary: Contrary to popular belief, Lorem Ipsum is not simply
+					random text. It has roots in a piece of classical Latin literature
+					from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
+					professor at Hampden-Sydney College in Virginia, looked up one of the
+					more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
+					going through the cites of the word in classical literature,
+					discovered the undoubtable source. Lorem Ipsum comes from sections
+					1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
+					of Good and Evil) by Cicero, written in 45 BC. This book is a treatise
+					on the theory of ethics, very popular during the Renaissance. The
+					first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
+					a line in section 1.10.32.
+				</Text>
+				<Text emphasis="secondary">
+					Text Secondary: Contrary to popular belief, Lorem Ipsum is not simply
+					random text. It has roots in a piece of classical Latin literature
+					from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
+					professor at Hampden-Sydney College in Virginia, looked up one of the
+					more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
+					going through the cites of the word in classical literature,
+					discovered the undoubtable source. Lorem Ipsum comes from sections
+					1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
+					of Good and Evil) by Cicero, written in 45 BC. This book is a treatise
+					on the theory of ethics, very popular during the Renaissance. The
+					first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
+					a line in section 1.10.32.
+				</Text>
+				<Text emphasis="ambient">
+					Text Ambient: Contrary to popular belief, Lorem Ipsum is not simply
+					random text. It has roots in a piece of classical Latin literature
+					from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
+					professor at Hampden-Sydney College in Virginia, looked up one of the
+					more obscure Latin words, consectetur, from a Lorem Ipsum passage, and
+					going through the cites of the word in classical literature,
+					discovered the undoubtable source. Lorem Ipsum comes from sections
+					1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes
+					of Good and Evil) by Cicero, written in 45 BC. This book is a treatise
+					on the theory of ethics, very popular during the Renaissance. The
+					first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
+					a line in section 1.10.32.
+				</Text>
+			</Box>
+		);
+	},
+};

package/src/components/typography/typography.tsx

@@ -1,26 +1,68 @@
+import { useRender } from '@base-ui/react';
+import clsx from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
+import { withProps } from '../../hooks/withProps.js';
+import cls from './typography.module.css';
 
-const baseHeadingClass = 'layer-components:my-0';
-export const H1 = withClassName(
-	'h1',
-	baseHeadingClass,
-	'layer-components:(font-title text-2xl font-semibold color-inherit color-darken-1)',
-);
-export const H2 = withClassName(
-	'h2',
-	baseHeadingClass,
-	'layer-components:(text-lg font-title font-bold color-inherit color-lighten-1)',
-);
-export const H3 = withClassName(
-	'h3',
-	baseHeadingClass,
-	'layer-components:(font-title text-md font-500 color-inherit color-lighten-2)',
-);
-export const H4 = withClassName(
-	'h4',
-	baseHeadingClass,
-	'layer-components:(text-xs uppercase color-inherit color-lighten-2)',
-);
-export const H5 = withClassName('h5', baseHeadingClass);
+export interface TypographyProps extends useRender.ComponentProps<'span'> {
+	emphasis?: 'primary' | 'secondary' | 'ambient';
+}
 
-export const P = withClassName('p', 'layer-components:(my-0 leading-normal)');
+export function Text({
+	emphasis,
+	render,
+	className,
+	...rest
+}: TypographyProps) {
+	return useRender({
+		render,
+		defaultTagName: 'span',
+		props: {
+			...rest,
+			className: clsx(cls.typography, cls.removeMargin, className),
+		},
+		state: {
+			emphasis,
+		},
+	});
+}
+
+export const Heading = withClassName(Text, '@mode-heading');
+export const HeroText = withClassName(Text, '@mode-hero');
+export const P = withProps(Text, { render: <p /> });
+
+/**
+ * @deprecated Use Heading with appropriate render and emphasis instead
+ */
+export const H1 = withProps(Heading, {
+	render: <h1 />,
+	emphasis: 'primary',
+});
+/**
+ * @deprecated Use Heading with appropriate render and emphasis instead
+ */
+export const H2 = withProps(Heading, {
+	render: <h2 />,
+	emphasis: 'secondary',
+});
+/**
+ * @deprecated Use Heading with appropriate render and emphasis instead
+ */
+export const H3 = withProps(Heading, {
+	render: <h3 />,
+	emphasis: 'secondary',
+});
+/**
+ * @deprecated Use Heading with appropriate render and emphasis instead
+ */
+export const H4 = withProps(Heading, {
+	render: <h4 />,
+	emphasis: 'ambient',
+});
+/**
+ * @deprecated Use Heading with appropriate render and emphasis instead
+ */
+export const H5 = withProps(Heading, {
+	render: <h5 />,
+	emphasis: 'ambient',
+});

package/src/components/viewport/Viewport.module.css

@@ -0,0 +1,44 @@
+.root {
+	min-height: 32px;
+	min-width: 32px;
+}
+
+.positioner {
+	contain: strict;
+	position: relative;
+	height: 100%;
+	width: 100%;
+	display: flex;
+	touch-action: none;
+	user-select: none;
+	overflow: clip;
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		@apply --mx-shadow;
+		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 1px);
+	}
+}
+
+.controlContent {
+	position: absolute;
+
+	&[data-position='top-left'] {
+		top: var(--m-spacing-sm);
+		left: var(--m-spacing-sm);
+	}
+	&[data-position='top-right'] {
+		top: var(--m-spacing-sm);
+		right: var(--m-spacing-sm);
+	}
+	&[data-position='bottom-left'] {
+		bottom: var(--m-spacing-sm);
+		left: var(--m-spacing-sm);
+	}
+	&[data-position='bottom-right'] {
+		bottom: var(--m-spacing-sm);
+		right: var(--m-spacing-sm);
+	}
+}

package/src/components/viewport/Viewport.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
 import { Viewport } from './Viewport.js';
@@ -29,7 +29,13 @@ const CenterButton = () => {
 export const Default: Story = {
 	render(args) {
 		return (
-			<Viewport className="h-600px w-full" {...args}>
+			<Viewport
+				style={{
+					height: 600,
+					width: '100%',
+				}}
+				{...args}
+			>
 				<img src="https://resources.biscuits.club/images/pashka.jpg" />
 				<Viewport.Control>
 					<Viewport.ZoomControls />
@@ -46,7 +52,10 @@ export const HighZoomLevel: Story = {
 	render(args) {
 		return (
 			<Viewport
-				className="h-600px w-full"
+				style={{
+					height: 600,
+					width: '100%',
+				}}
 				defaultZoom={100}
 				maxZoom={1000}
 				minZoom={10}

package/src/components/viewport/Viewport.tsx

@@ -18,6 +18,7 @@ import {
 	useViewportGestureControls,
 	ViewportGestureControlOptions,
 } from './useViewportGestures.js';
+import cls from './Viewport.module.css';
 import { ViewportContent } from './ViewportContent.js';
 import { ViewportProvider } from './ViewportContext.js';
 import { PositionOrPercentage, ViewportState } from './ViewportState.js';
@@ -111,16 +112,12 @@ export function ViewportRoot({
 		<ViewportProvider value={viewport}>
 			<ViewportControlContext.Provider value={controlsRoot}>
 				<Box
-					className={clsx('min-h-32px min-w-32px', className)}
+					className={clsx(cls.root, className)}
 					style={style}
 					ref={controlsRef}
 				>
 					<div
-						className={clsx(
-							'contain-strict relative h-full w-full flex-1 touch-none select-none overflow-hidden',
-							'foc',
-							className,
-						)}
+						className={clsx(cls.positioner, className)}
 						{...gestureProps}
 						{...keyboardProps}
 						tabIndex={0}
@@ -152,16 +149,7 @@ export function ViewportControlContent({
 
 	return createPortal(
 		<Box
-			className={clsx(
-				'layer-variants:(absolute)',
-				{
-					'layer-components:(left-sm top-sm)': position === 'top-left',
-					'layer-components:(right-sm top-sm)': position === 'top-right',
-					'layer-components:(bottom-sm left-sm)': position === 'bottom-left',
-					'layer-components:(bottom-sm right-sm)': position === 'bottom-right',
-				},
-				className,
-			)}
+			className={clsx(cls.controlContent, className)}
 			surface
 			border
 			elevated="md"

package/src/components/viewport/ViewportContent.module.css

@@ -0,0 +1,8 @@
+.root {
+	position: absolute;
+	transform-origin: center;
+	touch-action: none;
+	user-select: none;
+	overflow: visible;
+	overscroll-behavior: none;
+}

package/src/components/viewport/ViewportContent.tsx

@@ -9,6 +9,7 @@ import {
 } from 'motion/react';
 import { useEffect, useRef } from 'react';
 import useMergedRef from '../../hooks/useMergedRef.js';
+import cls from './ViewportContent.module.css';
 import { ViewportState } from './ViewportState.js';
 
 export interface ViewportContentProps
@@ -89,10 +90,7 @@ export function ViewportContent({
 	return (
 		<motion.div
 			{...rest}
-			className={clsx(
-				'layer-components:(absolute transform-origin-center touch-none select-none overflow-visible overscroll-none)',
-				className,
-			)}
+			className={clsx(cls.root, className)}
 			ref={finalRef}
 			style={{ transform }}
 			onDragStartCapture={preventDefault}

package/src/css/arbor.css

@@ -0,0 +1 @@
+/* @import('arbor:css') */

package/src/css/base.css

@@ -0,0 +1,46 @@
+@import './arbor.css';
+
+/* default layers */
+@layer reset, arbor;
+
+#root,
+#main,
+#app,
+#storybook-root {
+	isolation: isolate;
+	display: flex;
+	flex-direction: column;
+	min-height: 100dvh;
+}
+
+:root {
+	--z-now-playing: 40;
+	--z-nav: 50;
+}
+
+@layer reset {
+	html,
+	body {
+		margin: 0;
+		padding: 0;
+		font-family: Inter, sans-serif;
+		min-height: 100%;
+		--webkit-font-smoothing: antialiased;
+		--moz-osx-font-smoothing: grayscale;
+	}
+
+	body {
+		overflow: overlay;
+		@apply --mx-bg(var(--m-color-main-paper));
+	}
+
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	* {
+		box-sizing: border-box;
+		-webkit-tap-highlight-color: transparent;
+	}
+}

package/src/css/main.css

@@ -0,0 +1,2 @@
+@import './base.css';
+@import './util.css';

package/src/css/util.css

@@ -0,0 +1,128 @@
+/* Sizes */
+.w-auto {
+	width: auto;
+}
+.h-auto {
+	height: auto;
+}
+.w-full {
+	width: 100%;
+}
+.h-full {
+	height: 100%;
+}
+
+/* Overflows */
+.overflow-visible {
+	overflow: visible;
+}
+.overflow-hidden {
+	overflow: hidden;
+}
+.overflow-auto {
+	overflow: auto;
+}
+.overflow-x-auto {
+	overflow-x: auto;
+}
+.overflow-y-auto {
+	overflow-y: auto;
+}
+.overflow-x-hidden {
+	overflow-x: hidden;
+}
+.overflow-y-hidden {
+	overflow-y: hidden;
+}
+
+/* Flex */
+.flex {
+	display: flex;
+}
+.flex-row {
+	flex-direction: row;
+}
+.flex-col {
+	flex-direction: column;
+}
+.flex-wrap {
+	flex-wrap: wrap;
+}
+.flex-nowrap {
+	flex-wrap: nowrap;
+}
+.flex-center {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.gap-none {
+	gap: 0;
+}
+.gap-xs {
+	gap: var(--m-spacing-xs);
+}
+.gap-sm {
+	gap: var(--m-spacing-sm);
+}
+.gap-md {
+	gap: var(--m-spacing-md);
+}
+.gap-lg {
+	gap: var(--m-spacing-lg);
+}
+.gap-xl {
+	gap: var(--m-spacing-xl);
+}
+
+.items-start {
+	align-items: flex-start;
+}
+.items-center {
+	align-items: center;
+}
+.items-end {
+	align-items: flex-end;
+}
+.items-stretch {
+	align-items: stretch;
+}
+.justify-start {
+	justify-content: flex-start;
+}
+.justify-center {
+	justify-content: center;
+}
+.justify-end {
+	justify-content: flex-end;
+}
+.justify-between {
+	justify-content: space-between;
+}
+.justify-around {
+	justify-content: space-around;
+}
+.justify-evenly {
+	justify-content: space-evenly;
+}
+
+/* Spacing */
+.p-none {
+	padding: 0;
+}
+.p-xs {
+	padding: var(--m-spacing-xs);
+}
+.p-sm {
+	padding: var(--m-spacing-sm);
+}
+.p-md {
+	padding: var(--m-spacing-md);
+}
+.p-lg {
+	padding: var(--m-spacing-lg);
+}
+.p-xl {
+	padding: var(--m-spacing-xl);
+}

package/src/css-modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+	const classes: { readonly [key: string]: string };
+	export default classes;
+}

package/src/hooks/useOverrideTheme.ts

@@ -1,14 +1,13 @@
 import { useLayoutEffect } from 'react';
-import { PaletteName } from '../uno/index.js';
 
-export function useOverrideTheme(theme: PaletteName | null | undefined) {
+export function useOverrideRootMode(mode: string | null | undefined) {
 	useLayoutEffect(() => {
-		if (!theme || typeof document === 'undefined') {
+		if (!mode || typeof document === 'undefined') {
 			return;
 		}
-		document.body.classList.add(`theme-${theme}`);
+		document.documentElement.classList.add(`@mode-${mode}`);
 		return () => {
-			document.body.classList.remove(`theme-${theme}`);
+			document.documentElement.classList.remove(`@mode-${mode}`);
 		};
-	}, [theme]);
+	}, [mode]);
 }

package/src/hooks/useTitleBarColor.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 import { Box, Button, Dialog, Icon, Provider } from '../components/index.js';
 import { useThemedTitleBar, useTitleBarColor } from './useTitleBarColor.js';
@@ -19,7 +19,12 @@ export const Default: Story = {
 	render() {
 		return (
 			<Provider>
-				<Box col border surface className="aspect-[9/16] overflow-hidden">
+				<Box
+					col
+					border
+					surface
+					style={{ aspectRatio: '9/16', overflow: 'hidden' }}
+				>
 					<MockTitleBar />
 					<Box p="md">
 						<p>