@a-type/ui 5.0.22 → 6.0.0

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>

package/src/hooks/useTitleBarColor.ts

@@ -1,11 +1,4 @@
-import { useCallback, useEffect, useSyncExternalStore } from 'react';
-import { useResolvedColorMode } from '../colorMode.js';
-import { snapshotColorContext } from '../uno/logic/color.js';
-import {
-	ColorLogicalPalette,
-	ColorLogicalPaletteDefinitions,
-	defaultPalettes,
-} from '../uno/logic/palettes.js';
+import { useCallback } from 'react';
 
 let defaultColor = '#ffffff';
 function getCurrentColor() {
@@ -22,7 +15,7 @@ function changeThemeColor(color: string) {
 		return;
 	}
 	// evaluate css var if necessary
-	if (color.startsWith('var(')) {
+	while (color.startsWith('var(')) {
 		const root = document.documentElement;
 		const cssVar = color.slice(4, -1).trim();
 		color = getComputedStyle(root).getPropertyValue(cssVar);
@@ -40,23 +33,7 @@ function changeThemeColor(color: string) {
 export function useTitleBarColor(
 	color: string | { light: string; dark: string },
 ) {
-	const colorMode = useResolvedColorMode();
-	useEffect(() => {
-		const finalColor =
-			typeof color === 'string'
-				? color
-				: colorMode === 'dark'
-				? color.dark
-				: color.light;
-		const previousColor =
-			document
-				.querySelector('meta[name=theme-color]')
-				?.getAttribute('content') ?? defaultColor;
-		changeThemeColor(finalColor);
-		return () => {
-			changeThemeColor(previousColor);
-		};
-	}, [color, colorMode]);
+	/* TODO: rewrite this */
 }
 
 export function useSetTitleBarColor() {
@@ -66,50 +43,11 @@ export function useSetTitleBarColor() {
 }
 
 export function useThemedTitleBar(
-	paletteOrName:
-		| Exclude<keyof typeof defaultPalettes, 'main'>
-		| ColorLogicalPalette,
-	value: keyof ColorLogicalPaletteDefinitions,
+	paletteOrName: any,
+	value: any,
 	/** If not provided, will inherit from app */
 	mode?: 'light' | 'dark',
 	skip?: boolean,
 ) {
-	const { setColor } = useSetTitleBarColor();
-	// using a variable to rerun the effect instead of subscribing in-effect...
-	// this is an attempt to preserve the cascading behavior in the React tree
-	// if a child calls this hook, so ideally the parent and child should both
-	// re-evaluate but the child should 'win'
-	const visible = useSyncExternalStore(
-		(onStoreChange) => {
-			document.addEventListener('visibilitychange', onStoreChange);
-			return () => {
-				document.removeEventListener('visibilitychange', onStoreChange);
-			};
-		},
-		() => document.visibilityState === 'visible',
-		() => true,
-	);
-
-	useEffect(() => {
-		if (skip) return;
-		const previousColor = getCurrentColor();
-
-		function update() {
-			const palette =
-				typeof paletteOrName === 'string'
-					? defaultPalettes[paletteOrName] ?? defaultPalettes.primary
-					: paletteOrName;
-			console.log('snapshot:', palette.name, value, mode);
-			const context = snapshotColorContext(palette.name, mode);
-			const color = palette.definitions[value].computeOklch(context);
-			setColor(color);
-		}
-		update();
-
-		if (previousColor) {
-			return () => {
-				setColor(previousColor);
-			};
-		}
-	}, [setColor, paletteOrName, value, mode, skip, visible]);
+	/* TODO: rewrite this */
 }

package/src/hooks/withProps.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import { mergeProps } from '@base-ui/react';
+import { ComponentType } from 'react';
 
 export const withProps = <T extends object>(
-	Component: React.ComponentType<T>,
+	Component: ComponentType<T>,
 	extras: Partial<T>,
 ) => {
 	return (props: T) => {
-		return <Component {...props} {...extras} />;
+		return <Component {...(mergeProps<any>(props, extras) as any)} />;
 	};
 };
 
@@ -13,7 +14,7 @@ type OptionalKeys<T> = {
 	[K in keyof T]-?: undefined extends T[K] ? K : never;
 }[keyof T];
 export const withoutProps = <T extends object, P extends OptionalKeys<T>>(
-	Component: React.ComponentType<T>,
+	Component: ComponentType<T>,
 	_remove: P[],
 ) => {
 	return (props: Omit<T, P>) => {

package/src/index.ts

@@ -3,4 +3,3 @@ export { clsx } from 'clsx';
 export * from './colorMode.js';
 export * from './components/index.js';
 export * from './hooks.js';
-export * from './uno/index.js';

package/src/keyboard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
 	Input,
 	PageContent,
@@ -27,13 +27,28 @@ export const Default: Story = {
 		return (
 			<PageRoot id="root">
 				<PageContent>
-					<div className="h-screen flex flex-col">
-						<div className="flex flex-grow flex-col items-center justify-center p-lg">
+					<div
+						style={{
+							height: '100vh',
+							display: 'flex',
+							flexDirection: 'column',
+						}}
+					>
+						<div
+							className="flex-grow"
+							style={{
+								display: 'flex',
+								flexDirection: 'column',
+								alignItems: 'center',
+								justifyContent: 'center',
+								padding: 'var(--m-spacing-lg)',
+							}}
+						>
 							Focus the inputs below to see how the virtual keyboard behavior
 							works.
 						</div>
-						<Input className="w-full" />
-						<TextArea className="w-full" />
+						<Input style={{ width: '100%' }} />
+						<TextArea style={{ width: '100%' }} />
 					</div>
 					<PageNowPlaying keepAboveKeyboard>
 						<Input placeholder="now playing" />

package/src/shadows.stories.tsx

@@ -1,16 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import clsx from 'clsx';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Box } from './components/index.js';
 
 const meta = {
 	title: 'System/Shadows',
-	argTypes: {
-		opacity: {
-			control: { type: 'range', min: 0, max: 1, step: 0.1 },
-			defaultValue: 0.1,
-			description: 'Opacity modifier',
-		},
-	},
 	args: {
 		opacity: 0.1,
 	},
@@ -23,28 +15,15 @@ export default meta;
 
 type Story = StoryObj<Meta>;
 
-const opacityClasses = [
-	'shadow-op-0',
-	'shadow-op-10',
-	'shadow-op-20',
-	'shadow-op-30',
-	'shadow-op-40',
-	'shadow-op-50',
-	'shadow-op-60',
-	'shadow-op-70',
-	'shadow-op-80',
-	'shadow-op-90',
-	'shadow-op-100',
-];
-
 export const Default: Story = {
 	render(args) {
 		return (
 			<div
-				className={clsx(
-					'grid grid-cols-4 gap-xl',
-					opacityClasses[args.opacity * 10],
-				)}
+				style={{
+					display: 'grid',
+					gridTemplateColumns: 'repeat(4, 1fr)',
+					gap: 'var(--m-spacing-xl)',
+				}}
 			>
 				<Box surface border p elevated="sm">
 					Small Shadow

package/src/theme.stories.module.css

@@ -0,0 +1,13 @@
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: var(--m-spacing-lg);
+	width: 100%;
+	min-width: 0;
+	flex: 1 0 auto;
+
+	& > * {
+		min-width: 0;
+		width: 100%;
+	}
+}

package/src/themes.stories.tsx

@@ -1,7 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import clsx from 'clsx';
-import { useRef, useState } from 'react';
-import { setColorMode, useColorMode } from './colorMode.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { $userColorHue, $userColorSaturation } from './arbor/props.js';
 import { ActionBar, ActionButton } from './components/actions/index.js';
 import { Button } from './components/button/index.js';
 import { Card } from './components/card/index.js';
@@ -10,15 +9,13 @@ import {
 	AvatarList,
 	Box,
 	Checkbox,
-	ColorPicker,
 	ContextMenu,
 	DateRangePicker,
 	Dialog,
 	DropdownMenu,
-	H1,
 	H2,
 	H3,
-	H4,
+	Heading,
 	HorizontalList,
 	ImageUploader,
 	NavBarItem,
@@ -33,7 +30,6 @@ import {
 	PageNav,
 	PageRoot,
 	Progress,
-	Provider,
 	Select,
 	Slider,
 	TextSkeleton,
@@ -43,8 +39,8 @@ import {
 import { Input } from './components/input/index.js';
 import { Tabs } from './components/tabs/tabs.js';
 import { TextArea } from './components/textArea/index.js';
-import { useOverrideTheme } from './hooks/useOverrideTheme.js';
-import { PaletteName, PROPS } from './uno/index.js';
+
+import cls from './theme.stories.module.css';
 
 const meta = {
 	title: 'Theme Demo',
@@ -60,33 +56,37 @@ export default meta;
 
 type Story = StoryObj;
 
-export function DemoUI({ className }: { className?: string }) {
+export function DemoUI({
+	className,
+	style,
+}: {
+	className?: string;
+	style?: React.CSSProperties;
+}) {
 	const nextWeek = new Date();
 	nextWeek.setDate(nextWeek.getDate() + 7);
 	return (
-		<PageRoot data-testid="demo" className={clsx('flex-1', className)}>
+		<PageRoot data-testid="demo" className={className} style={style}>
 			<PageContent>
-				<div className={clsx('grid grid-cols-2 gap-2')}>
+				<div className={cls.grid}>
 					<Box gap wrap p>
-						<Button color="primary" emphasis="primary">
-							Primary
-						</Button>
-						<Button color="accent" emphasis="primary">
+						<Button emphasis="primary">Primary</Button>
+						<Button className="@mode-accent" emphasis="primary">
 							Accent
 						</Button>
 						<Button>Default</Button>
-						<Button emphasis="contrast">Contrast</Button>
-						<Button color="attention" emphasis="primary">
+						<Button className="@mode-inverted">Contrast</Button>
+						<Button className="@mode-attention" emphasis="primary">
 							Destructive
 						</Button>
 						<Button emphasis="ghost">Ghost</Button>
-						<Button color="accent" emphasis="ghost">
+						<Button className="@mode-accent" emphasis="ghost">
 							Ghost Accent
 						</Button>
-						<Button size="small" color="attention" emphasis="primary">
+						<Button size="small" className="@mode-attention" emphasis="primary">
 							Destructive Small
 						</Button>
-						<Button size="small" color="attention" emphasis="ghost">
+						<Button size="small" className="@mode-attention" emphasis="ghost">
 							Ghost Destructive Small
 						</Button>
 					</Box>
@@ -107,13 +107,12 @@ export function DemoUI({ className }: { className?: string }) {
 						d="col"
 						gap
 						p
-						className="max-h-200px"
+						style={{ maxHeight: 200 }}
 						overflow="auto-y"
 					>
-						<H1>Heading 1</H1>
-						<H2>Heading 2</H2>
-						<H3>Heading 3</H3>
-						<H4>Heading 4</H4>
+						<Heading emphasis="primary">Heading 1</Heading>
+						<Heading emphasis="secondary">Heading 2</Heading>
+						<Heading emphasis="ambient">Heading 3</Heading>
 						<P>
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
 							eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -188,7 +187,10 @@ export function DemoUI({ className }: { className?: string }) {
 						</ContextMenu.Content>
 					</ContextMenu>
 					<DropdownMenu>
-						<DropdownMenu.Trigger render={<Button />} className="m-auto">
+						<DropdownMenu.Trigger
+							render={<Button />}
+							style={{ margin: 'auto' }}
+						>
 							Dropdown
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content>
@@ -235,32 +237,31 @@ export function DemoUI({ className }: { className?: string }) {
 						</Dialog.Content>
 					</Dialog>
 					<DateRangePicker
-						className="grid-col-span-2"
+						style={{ gridColumn: 'span 2' }}
 						value={{
 							start: new Date(),
 							end: nextWeek,
 						}}
 						onChange={() => {}}
 					/>
-					<Progress value={50} className="m-auto" />
+					<Progress value={50} style={{ margin: 'auto' }} />
 					<Slider defaultValue={50} min={0} max={100} />
-					<Box surface color="primary" p gap d="col">
-						<H1>Primary surface</H1>
-						<H2>Primary surface</H2>
-						<H3>Primary surface</H3>
+					<Box surface="primary" p gap d="col">
+						<Heading emphasis="primary">Primary surface</Heading>
+						<Heading emphasis="secondary">Primary surface</Heading>
+						<Heading emphasis="ambient">Primary surface</Heading>
 						<div>Primary surface</div>
 						<Button emphasis="ghost">Ghost</Button>
 					</Box>
 					<Box
-						surface
+						surface="primary"
 						color="accent"
 						p
 						d="col"
-						className="max-h-200px"
+						style={{ maxHeight: 200 }}
 						overflow="auto-y"
 					>
-						<H2>Accent surface</H2>
-						<H3>Accent surface</H3>
+						<Heading emphasis="primary">Accent surface</Heading>
 						<P>
 							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
 							eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -277,8 +278,11 @@ export function DemoUI({ className }: { className?: string }) {
 						<TextSkeleton maxLength={10} />
 						Accent surface
 					</Box>
-					<Box surface p d="col">
-						Default surface
+					<Box surface="secondary" p d="col">
+						Secondary surface
+					</Box>
+					<Box surface="ambient" p d="col">
+						Ambient surface
 					</Box>
 					<Box surface color="attention" p d="col">
 						<H2>Attention surface</H2>
@@ -297,9 +301,18 @@ export function DemoUI({ className }: { className?: string }) {
 							<Button size="small">Four</Button>
 							<Button size="small">Five</Button>
 							<Button size="small">Six</Button>
+							<Button size="small">Seven</Button>
+							<Button size="small">Eight</Button>
+							<Button size="small">Nine</Button>
+							<Button size="small">Ten</Button>
+							<Button size="small">Eleven</Button>
 						</HorizontalList>
 					</Box>
-					<ImageUploader className="h-200px" value={null} onChange={() => {}} />
+					<ImageUploader
+						style={{ height: 200 }}
+						value={null}
+						onChange={() => {}}
+					/>
 				</div>
 			</PageContent>
 			<PageNav>
@@ -317,13 +330,13 @@ export function DemoUI({ className }: { className?: string }) {
 						<NavBarItemText>Item 2</NavBarItemText>
 						<NavBarItemPip />
 					</NavBarItem>
-					<NavBarItem color="gray">
+					<NavBarItem color="neutral">
 						<NavBarItemIconWrapper>
 							<NavBarItemIcon render={<Icon name="book" />} />
 						</NavBarItemIconWrapper>
 						<NavBarItemText>Neutral</NavBarItemText>
 					</NavBarItem>
-					<NavBarItem color="gray" active>
+					<NavBarItem color="neutral" active>
 						<NavBarItemIconWrapper>
 							<NavBarItemIcon render={<Icon name="book" />} />
 						</NavBarItemIconWrapper>
@@ -340,128 +353,32 @@ export const Nesting: Story = {
 	render() {
 		return (
 			<Box d="col" p gap>
-				<Box d="row" gap surface color="primary">
+				<Box d="row" gap surface="primary">
 					<Button color="primary">Root theme</Button>
 				</Box>
-				<DemoUI className="palette-eggplant override-dark flex-1" />
+				<DemoUI className="@mode-eggplant override-dark" style={{ flex: 1 }} />
 			</Box>
 		);
 	},
 };
 
-export const Override: Story = {
-	render() {
-		const [theme, setTheme] = useState<PaletteName | null>(null);
-		useOverrideTheme(theme);
-		const colorMode = useColorMode();
-		return (
-			<Provider>
-				<Box d="col" gap>
-					<Box gap p>
-						<ColorPicker value={theme} onChange={setTheme} />
-						<Select
-							value={colorMode}
-							onValueChange={(v) => setColorMode(v as any)}
-						>
-							<Select.Trigger />
-							<Select.Content>
-								<Select.Item value="system">System</Select.Item>
-								<Select.Item value="light">Light</Select.Item>
-								<Select.Item value="dark">Dark</Select.Item>
-							</Select.Content>
-						</Select>
-					</Box>
-					<DemoUI />
-				</Box>
-			</Provider>
-		);
-	},
-};
-
 export const Custom: Story = {
 	render() {
 		const [theme, setTheme] = useState({
-			[PROPS.USER.COLOR.PRIMARY_HUE]: 70,
-			[PROPS.USER.COLOR.ACCENT_HUE]: 290,
-			[PROPS.USER.SATURATION]: 0.5,
-			[PROPS.USER.BORDER_SCALE]: 1.5,
-			[PROPS.USER.SPACING_SCALE]: 1,
-			[PROPS.USER.CORNER_SCALE]: 1,
+			[$userColorHue]: 70,
+			[$userColorSaturation]: 0.5,
 		});
 		const reroll = () => {
 			setTheme({
-				[PROPS.USER.COLOR.PRIMARY_HUE]: Math.floor(Math.random() * 360),
-				[PROPS.USER.COLOR.ACCENT_HUE]: Math.floor(Math.random() * 360),
-				[PROPS.USER.SATURATION]: Math.random(),
-				[PROPS.USER.BORDER_SCALE]: Math.random() * 2,
-				[PROPS.USER.SPACING_SCALE]: Math.random() * 2,
-				[PROPS.USER.CORNER_SCALE]: Math.random() * 1.25,
+				[$userColorHue]: Math.floor(Math.random() * 360),
+				[$userColorSaturation]: Math.random(),
 			});
 		};
 		return (
-			<Box d="col" gap items="start" style={theme as any}>
+			<Box d="col" full gap items="stretch" style={theme as any}>
 				<Button onClick={reroll}>Reroll</Button>
-				<DemoUI className="theme" />
+				<DemoUI className="@mode-user" />
 			</Box>
 		);
 	},
 };
-
-export const Trippy: Story = {
-	render() {
-		const ref = useRef<HTMLDivElement>(null);
-		const values = useRef({
-			primarySource: 0,
-			accentSource: 180,
-			saturation: 0.5,
-			borderScale: 2,
-			spacingScale: 0.5,
-			cornerScale: 0.5,
-		});
-		const dt = 1000;
-		setInterval(() => {
-			const current = ref.current;
-			if (!current) return;
-			values.current.primarySource =
-				(values.current.primarySource + dt / 100) % 360;
-			values.current.accentSource =
-				(values.current.accentSource + dt / 50) % 360;
-			values.current.saturation =
-				0.5 + 0.5 * Math.sin((Date.now() / 100000) * Math.PI * 2);
-			values.current.borderScale =
-				1.5 + 1.5 * Math.sin((Date.now() / 20000) * Math.PI * 2);
-			values.current.spacingScale =
-				1 + Math.sin((Date.now() / 50000) * Math.PI * 2);
-			values.current.cornerScale = 1 + Math.sin(Date.now() / 3000);
-			current.style.setProperty(
-				PROPS.USER.COLOR.PRIMARY_HUE,
-				values.current.primarySource.toString(),
-			);
-			current.style.setProperty(
-				PROPS.USER.COLOR.ACCENT_HUE,
-				values.current.accentSource.toString(),
-			);
-			current.style.setProperty(
-				PROPS.USER.SATURATION,
-				values.current.saturation.toString(),
-			);
-			current.style.setProperty(
-				PROPS.USER.BORDER_SCALE,
-				values.current.borderScale.toString(),
-			);
-			current.style.setProperty(
-				PROPS.USER.SPACING_SCALE,
-				values.current.spacingScale.toString(),
-			);
-			current.style.setProperty(
-				PROPS.USER.CORNER_SCALE,
-				values.current.cornerScale.toString(),
-			);
-		}, dt);
-		return (
-			<div ref={ref}>
-				<DemoUI className="theme" />
-			</div>
-		);
-	},
-};

package/dist/esm/__tests__/render.js

@@ -1,8 +0,0 @@
-// @unocss-include
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { render as baseRender, } from '@testing-library/react';
-import { IconSpritesheet, Provider } from '../components/index.js';
-export const render = (ui, options) => {
-    return baseRender(ui, Object.assign({ wrapper: ({ children }) => (_jsxs(Provider, { disableParticles: true, children: [children, _jsx(IconSpritesheet, {})] })) }, options));
-};
-//# sourceMappingURL=render.js.map

package/dist/esm/__tests__/render.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../../../src/__tests__/render.tsx"],"names":[],"mappings":";AAAA,OAAO,EACN,MAAM,IAAI,UAAU,GAGpB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,CACrB,EAAgB,EAChB,OAAuB,EACR,EAAE;IACjB,OAAO,UAAU,CAAC,EAAE,kBACnB,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC1B,MAAC,QAAQ,IAAC,gBAAgB,mBACxB,QAAQ,EACT,KAAC,eAAe,KAAG,IACT,CACX,IACE,OAAO,EACT,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/__tests__/setup.js

@@ -1,4 +0,0 @@
-// @unocss-include
-/// <reference types="vitest/browser" />
-import '../../dist/css/main.css';
-//# sourceMappingURL=setup.js.map

package/dist/esm/__tests__/setup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../../src/__tests__/setup.ts"],"names":[],"mappings":"AAAA,wCAAwC;AACxC,OAAO,yBAAyB,CAAC"}