@a-type/ui 5.0.21 → 6.0.0

package/src/components/colorPicker/ColorPicker.tsx

@@ -1,96 +0,0 @@
-import { SelectTriggerProps } from '@base-ui/react/select';
-import classNames, { clsx } from 'clsx';
-import { ReactNode } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-import { PaletteName, paletteNames } from '../../uno/index.js';
-import { Button } from '../button/index.js';
-import { Select } from '../select/Select.js';
-
-export interface ColorPickerProps
-	extends Omit<SelectTriggerProps, 'value' | 'onChange' | 'color'> {
-	value: PaletteName | null;
-	onChange: (value: PaletteName) => void;
-	showGray?: boolean;
-}
-
-export function ColorPicker({
-	value,
-	onChange,
-	showGray,
-	className,
-	nativeButton: _,
-	...rest
-}: ColorPickerProps) {
-	const resolvedValue =
-		value && paletteNames.includes(value) ? (value as PaletteName) : 'lemon';
-
-	return (
-		<Select
-			value={resolvedValue}
-			onValueChange={(v) => {
-				onChange(v as PaletteName);
-			}}
-		>
-			<Select.Trigger
-				className={clsx('layer-composed:p-sm', className)}
-				{...(rest as any)}
-			>
-				<Button.Icon render={<ColorSwatch value={resolvedValue} />} />
-			</Select.Trigger>
-			<Select.Content>
-				<Select.Item value="lemon">
-					<ColorSwatch value="lemon" />
-					<ItemLabel>Lemon</ItemLabel>
-				</Select.Item>
-				<Select.Item value="tomato">
-					<ColorSwatch value="tomato" />
-					<ItemLabel>Tomato</ItemLabel>
-				</Select.Item>
-				<Select.Item value="leek">
-					<ColorSwatch value="leek" />
-					<ItemLabel>Leek</ItemLabel>
-				</Select.Item>
-				<Select.Item value="blueberry">
-					<ColorSwatch value="blueberry" />
-					<ItemLabel>Blueberry</ItemLabel>
-				</Select.Item>
-				<Select.Item value="eggplant">
-					<ColorSwatch value="eggplant" />
-					<ItemLabel>Eggplant</ItemLabel>
-				</Select.Item>
-				{showGray && (
-					<Select.Item value="gray">
-						<ColorSwatch value="gray" />
-						<ItemLabel>Salt</ItemLabel>
-					</Select.Item>
-				)}
-			</Select.Content>
-		</Select>
-	);
-}
-
-const ItemLabel = withClassName('span', 'sr-only');
-
-export function ColorSwatch({
-	value,
-	children,
-	className,
-	...rest
-}: {
-	value: PaletteName;
-	children?: ReactNode;
-	className?: string;
-}) {
-	return (
-		<div
-			className={classNames(
-				'h-16px w-16px rounded-sm bg-main',
-				`palette-${value ?? 'lemon'}`,
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</div>
-	);
-}

package/src/components/colorPicker/index.ts

@@ -1 +0,0 @@
-export * from './ColorPicker.js';

package/src/components/primitives/menus.tsx

@@ -1,44 +0,0 @@
-import clsx from 'clsx';
-
-export const popupClassName = clsx(
-	'layer-primitives:(max-w-90vw min-w-120px border rounded-md shadow-lg transition bg-white border-black)',
-	'layer-primitives:transform-origin-[var(--transform-origin)]',
-	'layer-primitives:(max-h-[--available-height] max-w-[--available-width])',
-	'layer-primitives:foc',
-
-	'transform-origin-[--transform-origin] will-change-transform',
-	'important:motion-reduce:transition-none',
-	'layer-primitives:data-[starting-style]:data-[side=bottom]:(translate-y-4px opacity-0)',
-	'layer-primitives:data-[ending-style]:data-[side=bottom]:(translate-y-4px opacity-0)',
-	'layer-primitives:data-[starting-style]:data-[side=top]:(translate-y--4px opacity-0)',
-	'layer-primitives:data-[ending-style]:data-[side=top]:(translate-y-0 opacity-0)',
-	'layer-primitives:data-[starting-style]:data-[side=right]:(translate-x-4px opacity-0)',
-	'layer-primitives:data-[ending-style]:data-[side=right]:(translate-x-0 opacity-0)',
-	'layer-primitives:data-[starting-style]:data-[side=left]:(translate-x--4px opacity-0)',
-	'layer-primitives:data-[ending-style]:data-[side=left]:(translate-x-0 opacity-0)',
-);
-
-export const itemListClassName = clsx(
-	'layer-primitives:(max-h-full min-h-0 overflow-x-clip rounded-inherit overflow-y-auto overflow-unstable)',
-);
-
-export const itemClassName = clsx(
-	'layer-primitives:(relative min-h-touch-large flex cursor-pointer select-none items-center py-sm pl-8 pr-4 text-left text-md leading-4 color-main-ink)',
-	'layer-primitives:[&[data-disabled]]:(pointer-events-none color-gray-dark bg-white)',
-
-	'layer-primitives:hover:(color-black bg-main-light)',
-	'layer-primitives:data-[highlighted]:(color-black bg-main-light)',
-
-	'layer-primitives:focus:outline-none',
-	'layer-primitives:focus-visible:(color-black bg-main-light)',
-);
-
-export const arrowClassName = clsx(
-	'layer-primitives:(arrow)',
-	'layer-primitives:data-[closed]:(scale-0 opacity-0)',
-	'layer-primitives:data-[open]:(scale-100 opacity-100)',
-);
-
-export const separatorClassName = clsx(
-	'layer-primitives:(m-5px h-1px bg-gray)',
-);

package/src/components/provider/TweakPane.tsx

@@ -1,139 +0,0 @@
-import { useDeferredValue, useEffect, useState } from 'react';
-import { PROPS } from '../../uno/index.js';
-import { Box } from '../box/Box.js';
-import { Button } from '../button/Button.js';
-import { Collapsible } from '../collapsible/Collapsible.js';
-import { Icon } from '../icon/Icon.js';
-import { Slider } from '../slider/Slider.js';
-
-function getPropertyValue(prop: string, defaultValue: number) {
-	const value = document.documentElement.style.getPropertyValue(prop);
-	const parsed = parseFloat(value);
-	return isNaN(parsed) ? defaultValue : parsed;
-}
-
-function useTweakProperty(prop: string, defaultValue: number) {
-	const [value, setValue] = useState(() => {
-		const v = document.documentElement.style.getPropertyValue(prop);
-		const parsed = parseFloat(v);
-		return isNaN(parsed) ? defaultValue : parsed;
-	});
-	const delayedValue = useDeferredValue(value);
-	useEffect(() => {
-		document.documentElement.style.setProperty(prop, `${delayedValue}`);
-	}, [delayedValue]);
-	return [value, setValue] as const;
-}
-
-function TweakSlider({
-	prop,
-	min,
-	max,
-	label,
-	step,
-	defaultValue,
-}: {
-	prop: string;
-	min: number;
-	max: number;
-	label: string;
-	step?: number;
-	defaultValue: number;
-}) {
-	const [value, setValue] = useTweakProperty(prop, defaultValue);
-	return (
-		<Slider.Root
-			value={value}
-			onValueChange={(v) => {
-				setValue(Slider.getSingle(v));
-			}}
-			min={min}
-			max={max}
-			step={step}
-			className="w-200px flex flex-col gap-xs"
-		>
-			<div className="w-full flex flex-row items-center justify-between">
-				<label>{label}</label>
-				<Slider.Value />
-			</div>
-			<Slider.Ui />
-		</Slider.Root>
-	);
-}
-
-export function TweakPane() {
-	return (
-		<Box
-			elevated="lg"
-			surface="white"
-			border
-			className="fixed right-xs top-xs z-1000000"
-		>
-			<Collapsible>
-				<Collapsible.Trigger render={<Button size="small" emphasis="ghost" />}>
-					<Icon name="gear" />
-				</Collapsible.Trigger>
-				<Collapsible.Content>
-					<Box col p gap="sm">
-						<TweakSlider
-							prop={PROPS.USER.COLOR.PRIMARY_HUE}
-							min={0}
-							max={360}
-							step={1}
-							defaultValue={80}
-							label="Primary hue"
-						/>
-						<TweakSlider
-							prop={PROPS.USER.COLOR.ACCENT_HUE}
-							min={0}
-							max={360}
-							step={1}
-							defaultValue={340}
-							label="Accent hue"
-						/>
-						<TweakSlider
-							prop={PROPS.USER.SATURATION}
-							min={0}
-							max={1}
-							step={0.05}
-							defaultValue={1}
-							label="Saturation"
-						/>
-						<TweakSlider
-							prop={PROPS.USER.SHADOW_SPREAD}
-							min={0}
-							max={1}
-							step={0.25}
-							defaultValue={0}
-							label="Shadow Spread"
-						/>
-						<TweakSlider
-							prop={PROPS.USER.BORDER_SCALE}
-							min={0}
-							max={4}
-							step={0.25}
-							defaultValue={1}
-							label="Border Scale"
-						/>
-						<TweakSlider
-							prop={PROPS.USER.CORNER_SCALE}
-							min={0}
-							max={2}
-							step={0.125}
-							defaultValue={1}
-							label="Corner Scale"
-						/>
-						<TweakSlider
-							prop={PROPS.USER.SPACING_SCALE}
-							min={0}
-							max={2}
-							step={0.125}
-							defaultValue={1}
-							label="Spacing Scale"
-						/>
-					</Box>
-				</Collapsible.Content>
-			</Collapsible>
-		</Box>
-	);
-}

package/src/systems/GroupScale.tsx

@@ -1,50 +0,0 @@
-import { createContext, CSSProperties, ReactNode, useContext } from 'react';
-import { PROPS } from '../uno/index.js';
-
-export const GroupScaleContext = createContext<number>(1);
-
-const GROUP_SCALE_NESTING_FACTOR = 0.75;
-
-export const GroupScaleLayer = ({ children }: { children?: ReactNode }) => {
-	const current = useGroupScale();
-	return (
-		<GroupScaleContext.Provider value={current * GROUP_SCALE_NESTING_FACTOR}>
-			{children}
-		</GroupScaleContext.Provider>
-	);
-};
-
-export function useGroupScale() {
-	return useContext(GroupScaleContext);
-}
-
-export function useGroupScaleStyles(
-	composeStyles?: CSSProperties,
-	forceScale?: number,
-) {
-	const ctxScale = useGroupScale();
-	const scale = forceScale ?? ctxScale;
-	return {
-		[PROPS.LOCALS.SPACING_SCALE]: scale,
-		[PROPS.LOCALS.CORNER_SCALE]: scale,
-		...composeStyles,
-	};
-}
-
-export const GroupScaleReset = ({ children }: { children: ReactNode }) => {
-	return (
-		<GroupScaleContext.Provider value={1}>
-			{children}
-		</GroupScaleContext.Provider>
-	);
-};
-
-export function withGroupScaleReset<T>(Component: React.ComponentType<T>) {
-	return function WithGroupScaleReset(props: T) {
-		return (
-			<GroupScaleReset>
-				<Component {...(props as any)} />
-			</GroupScaleReset>
-		);
-	};
-}

package/src/uno/defaults.ts

@@ -1,13 +0,0 @@
-import { UserPreflightOptions } from './preflights/user.js';
-
-export const defaultPresetHues: NonNullable<UserPreflightOptions['namedHues']> =
-	{
-		lemon: { sourceHue: 90.8, accentHue: 165.88, saturation: 1 },
-		leek: { sourceHue: 165.88, accentHue: 90.8, saturation: 1 },
-		tomato: { sourceHue: 10.51, accentHue: 165.88, saturation: 1 },
-		blueberry: { sourceHue: 248.14, accentHue: 165.88, saturation: 1 },
-		eggplant: { sourceHue: 280.21, accentHue: 165.88, saturation: 1 },
-
-		attention: { sourceHue: 30, accentHue: 165.88, saturation: 1 },
-		success: { sourceHue: 140, accentHue: 165.88, saturation: 1 },
-	};

package/src/uno/index.ts

@@ -1,7 +0,0 @@
-export {
-	paletteHues,
-	paletteNames,
-	type PaletteName,
-} from './logic/palettes.js';
-export { PROPS } from './logic/properties.js';
-export type { PresetOptions } from './uno.preset.js';

package/src/uno/logic/color.test.ts

@@ -1,82 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import {
-	ColorEvaluationContext,
-	livePropertyColorContext,
-	snapshotColorContext,
-} from './color.js';
-import { defaultPalettes } from './palettes.js';
-
-describe('context snapshot evaluation', () => {
-	it('should snapshot color context from element properties', () => {
-		const context = snapshotColorContext('leek');
-		expect(context).toEqual({
-			sourceHue: '165.88',
-			localLightnessSpread: '1',
-			localSaturation: '1',
-			globalSaturation: '0.5',
-			mode: {
-				lNeutral: '90%',
-				lRangeUp: '10%',
-				lRangeDown: '70%',
-				sNeutral: '75%',
-				sRangeUp: '-55%',
-				sRangeDown: '20%',
-				mult: '1',
-			},
-		} satisfies ColorEvaluationContext);
-	});
-});
-
-describe('oklch color evaluation tools', () => {
-	const { wash, default: DEFAULT } = defaultPalettes.main.definitions;
-
-	it('should resolve lch values', () => {
-		const ctx = snapshotColorContext('leek');
-		const { l, c, h } = wash.raw(ctx);
-		expect(l.value).toBeCloseTo(100, 1);
-		expect(l.unit).toBe('%');
-		expect(c.value).toBeCloseTo(10, 1);
-		expect(c.unit).toBe('%');
-		expect(h.value).toBe(165.88);
-	});
-
-	it('should print a valid oklch color string', () => {
-		const colorString = wash.print(
-			livePropertyColorContext('var(--p-main-hue, 91.8)'),
-		);
-		expect(colorString).toMatchInlineSnapshot(
-			`"oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (1 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--p-main-hue, 91.8)))"`,
-		);
-	});
-	it('should evaluate a valid oklch color value using element property values', () => {
-		const context = snapshotColorContext('leek');
-		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
-			`"oklch(100% 10% 165.88)"`,
-		);
-		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
-			`"oklch(90% 37.5% 165.88)"`,
-		);
-	});
-	it('should evaluate different named palettes in addition to main', () => {
-		const context = snapshotColorContext('attention');
-		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
-			`"oklch(100% 10% 30)"`,
-		);
-		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
-			`"oklch(90% 37.5% 30)"`,
-		);
-	});
-	it('works in dark mode', () => {
-		const darkMode = document.createElement('div');
-		darkMode.classList.add('override-dark', 'palette-leek');
-		document.body.appendChild(darkMode);
-		const context = snapshotColorContext('leek', 'dark');
-		expect(wash.computeOklch(context)).toMatchInlineSnapshot(
-			`"oklch(22% 20% 165.88)"`,
-		);
-		expect(DEFAULT.computeOklch(context)).toMatchInlineSnapshot(
-			`"oklch(60% 40% 165.88)"`,
-		);
-		document.body.removeChild(darkMode);
-	});
-});