@a-type/ui 5.0.8 → 5.0.9

package/src/components/progress/Progress.tsx

@@ -1,101 +1,101 @@
-import {
-	Progress as ProgressPrimitive,
-	ProgressRootProps,
-	ProgressValueProps,
-} from '@base-ui/react/progress';
-import clsx from 'clsx';
-import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/index.js';
-
-export const ProgressRoot = withClassName(
-	ProgressPrimitive.Root,
-	'layer-components:(grid grid-columns-[1fr_1fr] gap-col-md gap-row-xs items-center w-full)',
-);
-export const ProgressIndicator = withClassName(
-	ProgressPrimitive.Indicator,
-	'layer-components:(bg-main w-full h-full rounded-lg transition-transform)',
-	'layer-components:data-[complete]:(bg-success)',
-);
-export const ProgressTrack = withClassName(
-	ProgressPrimitive.Track,
-	'layer-components:(w-full relative overflow-hidden ring ring-black ring-1 rounded-lg h-6px)',
-);
-
-const ProgressBase = function ProgressBase({
-	ref,
-	children,
-	color,
-	max = 100,
-	value,
-	className,
-	...props
-}: ProgressRootProps & {
-	ref?: React.Ref<HTMLDivElement>;
-	color?: PaletteName;
-}) {
-	return (
-		<ProgressPrimitive.Root
-			{...props}
-			className={clsx(
-				color && `palette-${color}`,
-				'layer-components:w-full',
-				className,
-			)}
-			value={value}
-			max={max}
-			ref={ref}
-		>
-			<ProgressTrack>
-				<ProgressIndicator />
-			</ProgressTrack>
-			{children}
-		</ProgressPrimitive.Root>
-	);
-};
-
-const ProgressLabel = withClassName(
-	ProgressPrimitive.Label,
-	'layer-components:(font-size-xs color-gray-ink col-start-1 row-start-1)',
-);
-
-const ProgressValue = withClassName(
-	ProgressPrimitive.Value,
-	'layer-components:(font-size-xs font-semibold color-gray-ink col-start-2 row-start-1 justify-self-end)',
-);
-
-export const ProgressLabeled = function ProgressLabeled({
-	ref,
-	label,
-	className,
-	color,
-	formatValue,
-	...props
-}: Omit<ProgressRootProps, 'children'> & {
-	ref?: React.Ref<HTMLDivElement>;
-	label: React.ReactNode;
-	color?: PaletteName;
-	formatValue?: ProgressValueProps['children'];
-}) {
-	return (
-		<ProgressRoot
-			ref={ref}
-			className={clsx(color && `palette-${color}`, className)}
-			{...props}
-		>
-			<ProgressLabel>{label}</ProgressLabel>
-			<ProgressValue>{formatValue}</ProgressValue>
-			<ProgressTrack className="col-span-2">
-				<ProgressIndicator />
-			</ProgressTrack>
-		</ProgressRoot>
-	);
-};
-
-export const Progress = Object.assign(ProgressBase, {
-	Root: ProgressRoot,
-	Indicator: ProgressIndicator,
-	Track: ProgressTrack,
-	Labeled: ProgressLabeled,
-	Label: ProgressLabel,
-	Value: ProgressValue,
-});
+import {
+	Progress as ProgressPrimitive,
+	ProgressRootProps,
+	ProgressValueProps,
+} from '@base-ui/react/progress';
+import clsx from 'clsx';
+import { withClassName } from '../../hooks.js';
+import { PaletteName } from '../../uno/index.js';
+
+export const ProgressRoot = withClassName(
+	ProgressPrimitive.Root,
+	'layer-components:grid-columns-[1fr_1fr] layer-components:(grid w-full items-center gap-col-md gap-row-xs)',
+);
+export const ProgressIndicator = withClassName(
+	ProgressPrimitive.Indicator,
+	'layer-components:(w-full rounded-lg transition-transform bg-main)',
+	'layer-components:data-[complete]:(bg-success)',
+);
+export const ProgressTrack = withClassName(
+	ProgressPrimitive.Track,
+	'layer-components:(relative h-8px w-full overflow-hidden border rounded-lg border-black)',
+);
+
+const ProgressBase = function ProgressBase({
+	ref,
+	children,
+	color,
+	max = 100,
+	value,
+	className,
+	...props
+}: ProgressRootProps & {
+	ref?: React.Ref<HTMLDivElement>;
+	color?: PaletteName;
+}) {
+	return (
+		<ProgressPrimitive.Root
+			{...props}
+			className={clsx(
+				color && `palette-${color}`,
+				'layer-components:w-full',
+				className,
+			)}
+			value={value}
+			max={max}
+			ref={ref}
+		>
+			<ProgressTrack>
+				<ProgressIndicator />
+			</ProgressTrack>
+			{children}
+		</ProgressPrimitive.Root>
+	);
+};
+
+const ProgressLabel = withClassName(
+	ProgressPrimitive.Label,
+	'layer-components:(col-start-1 row-start-1 font-size-xs color-gray-ink)',
+);
+
+const ProgressValue = withClassName(
+	ProgressPrimitive.Value,
+	'layer-components:(col-start-2 row-start-1 justify-self-end font-size-xs font-semibold color-gray-ink)',
+);
+
+export const ProgressLabeled = function ProgressLabeled({
+	ref,
+	label,
+	className,
+	color,
+	formatValue,
+	...props
+}: Omit<ProgressRootProps, 'children'> & {
+	ref?: React.Ref<HTMLDivElement>;
+	label: React.ReactNode;
+	color?: PaletteName;
+	formatValue?: ProgressValueProps['children'];
+}) {
+	return (
+		<ProgressRoot
+			ref={ref}
+			className={clsx(color && `palette-${color}`, className)}
+			{...props}
+		>
+			<ProgressLabel>{label}</ProgressLabel>
+			<ProgressValue>{formatValue}</ProgressValue>
+			<ProgressTrack className="col-span-2">
+				<ProgressIndicator />
+			</ProgressTrack>
+		</ProgressRoot>
+	);
+};
+
+export const Progress = Object.assign(ProgressBase, {
+	Root: ProgressRoot,
+	Indicator: ProgressIndicator,
+	Track: ProgressTrack,
+	Labeled: ProgressLabeled,
+	Label: ProgressLabel,
+	Value: ProgressValue,
+});

package/src/components/provider/Provider.tsx

@@ -10,6 +10,7 @@ import { ParticleLayer } from '../particles/index.js';
 import { PwaInstall } from '../pwaInstall/PwaInstall.js';
 import { DefaultToastProvider, Toaster } from '../toasts/toasts.js';
 import { TooltipProvider } from '../tooltip/index.js';
+import { TweakPane } from './TweakPane.js';
 
 export interface ProviderProps {
 	children?: ReactNode;
@@ -18,6 +19,7 @@ export interface ProviderProps {
 	virtualKeyboardBehavior?: 'overlay' | 'displace';
 	disableTitleBarColor?: boolean;
 	manifestPath?: string;
+	tweaks?: boolean;
 }
 
 /**
@@ -30,6 +32,7 @@ export function Provider({
 	virtualKeyboardBehavior = 'displace',
 	disableTitleBarColor,
 	manifestPath,
+	tweaks,
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
 	useVirtualKeyboardFocusBehavior();
@@ -44,6 +47,7 @@ export function Provider({
 			<IconSpritesheet />
 			<Toaster />
 			<PwaInstall manifestPath={manifestPath} />
+			{tweaks && <TweakPane />}
 		</>
 	);
 

package/src/components/provider/TweakPane.tsx

@@ -0,0 +1,139 @@
+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/components/scrollArea/ScrollArea.tsx

@@ -11,27 +11,27 @@ export type * from '@base-ui/react/scroll-area';
 
 export const ScrollAreaRoot = withClassName(
 	BaseScrollArea.Root,
-	'layer-components:(min-w-0 min-h-0 flex flex-col box-border)',
+	'layer-components:(box-border min-h-0 min-w-0 flex flex-col)',
 );
 
 export const ScrollAreaViewport = withClassName(
 	BaseScrollArea.Viewport,
-	'layer-components:(h-full outline-none min-h-0)',
-	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
+	'layer-components:(h-full min-h-0 outline-none)',
+	'layer-components:foc',
 );
 
 export const ScrollAreaVerticalFades = withClassName(
 	'div',
-	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-y-start:inherit] [--scroll-area-overflow-y-end:inherit])',
-	'layer-components:before:(content-empty [--scroll-area-overflow-y-start:inherit] top-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-start,40px))] bg-gradient-to-b bg-gradient-from-bg bg-gradient-to-transparent)',
-	'layer-components:after:(content-empty [--scroll-area-overflow-y-end:inherit] bottom-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-end,40px))] bg-gradient-to-t bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:([--scroll-area-overflow-y-end:inherit] [--scroll-area-overflow-y-start:inherit] pointer-events-none absolute inset-0)',
+	'layer-components:before:([--scroll-area-overflow-y-start:inherit] absolute left-0 top-0 block h-[min(40px,var(--scroll-area-overflow-y-start,40px))] w-full bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-b transition-height content-empty)',
+	'layer-components:after:([--scroll-area-overflow-y-end:inherit] absolute bottom-0 left-0 block h-[min(40px,var(--scroll-area-overflow-y-end,40px))] w-full bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-t transition-height content-empty)',
 );
 
 export const ScrollAreaHorizontalFades = withClassName(
 	'div',
-	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-x-start:inherit] [--scroll-area-overflow-x-end:inherit])',
-	'layer-components:before:(content-empty [--scroll-area-overflow-x-start:inherit] left-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-start,40px))] bg-gradient-to-r bg-gradient-from-bg bg-gradient-to-transparent)',
-	'layer-components:after:(content-empty [--scroll-area-overflow-x-end:inherit] right-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-end,40px))] bg-gradient-to-l bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:([--scroll-area-overflow-x-end:inherit] [--scroll-area-overflow-x-start:inherit] pointer-events-none absolute inset-0)',
+	'layer-components:before:([--scroll-area-overflow-x-start:inherit] absolute left-0 top-0 block h-full w-[min(40px,var(--scroll-area-overflow-x-start,40px))] bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-r transition-width content-empty)',
+	'layer-components:after:([--scroll-area-overflow-x-end:inherit] absolute right-0 top-0 block h-full w-[min(40px,var(--scroll-area-overflow-x-end,40px))] bg-gradient-from-bg bg-gradient-to-transparent bg-gradient-to-l transition-width content-empty)',
 );
 
 export const ScrollAreaViewportFades = () => (
@@ -76,14 +76,14 @@ ComposedScrollbar.displayName = 'ScrollAreaScrollbar';
 
 export const ScrollAreaScrollbar = withClassName(
 	ComposedScrollbar,
-	'layer-components:(flex rounded-full relative select-none touch-none pointer-events-none m-xxs opacity-0)',
-	'layer-components:(bg-fg/5 transition-[opacity,height,width])',
-	'layer-components:data-[hovering]:(opacity-100 pointer-events-auto)',
+	'layer-components:(pointer-events-none relative m-xxs flex touch-none select-none rounded-full opacity-0)',
+	'layer-components:(transition-[opacity,height,width] bg-fg/5)',
+	'layer-components:data-[hovering]:(pointer-events-auto opacity-100)',
 	'layer-components:data-[scrolling]:(duration-0)',
-	'layer-components:before:(content-empty absolute)',
+	'layer-components:before:(absolute content-empty)',
 
-	'layer-components:data-[orientation=vertical]:(w-0.25rem justify-center before:(w-1.25rem h-full) hover:w-0.5rem)',
-	'layer-components:data-[orientation=horizontal]:(h-0.25rem items-center before:(h-1.25rem w-full) hover:h-0.5rem)',
+	'layer-components:data-[orientation=vertical]:(w-0.25rem justify-center before:h-full before:w-1.25rem hover:w-0.5rem)',
+	'layer-components:data-[orientation=horizontal]:(h-0.25rem items-center before:h-1.25rem before:w-full hover:h-0.5rem)',
 );
 
 export const ScrollAreaCorner = withClassName(

package/src/components/slider/Slider.tsx

@@ -1,97 +1,103 @@
-import { Slider as BaseSlider, SliderRootProps } from '@base-ui/react/slider';
-import clsx from 'clsx';
-import { Ref } from 'react';
-import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/index.js';
-
-export const SliderRoot = withClassName(
-	BaseSlider.Root,
-	'layer-components:w-full',
-);
-
-export const SliderControl = withClassName(
-	BaseSlider.Control,
-	'layer-components:(relative flex items-center select-none touch-none w-full h-30px translate-z-0)',
-	'layer-variants:[&[data-orientation=vertical]]:(flex-col h-full w-30px)',
-);
-export const SliderTrack = withClassName(
-	BaseSlider.Track,
-	'layer-components:(bg-transparent relative grow rounded-lg h-7px ring-1 ring-black transition-colors select-none)',
-	'layer-variants:[&[data-orientation=vertical]]:(w-7px h-full flex-1)',
-);
-export const SliderRange = withClassName(
-	BaseSlider.Indicator,
-	'layer-components:(bg-main rounded-lg transition-colors)',
-	'layer-variants:[&[data-orientation=vertical]]:(bg-main)',
-);
-export const SliderThumb = withClassName(
-	BaseSlider.Thumb,
-	'layer-components:(flex items-center justify-center leading-none cursor-pointer w-5 h-5 bg-white shadow-sm rounded-lg ring-2 ring-black touch-none transition-color)',
-	'layer-components:hover:(shadow-md)',
-	'layer-components:active:(shadow-lg ring-4 ring-main-dark ring-opacity-50 bg-main-light)',
-	'layer-components:focus-visible:(shadow-lg ring-4 ring-accent ring-opacity-50 outline-none bg-main-light)',
-	'layer-components:focus:(outline-none)',
-	'layer-components:disabled:(opacity-50)',
-);
-
-export const SliderBase = ({
-	children,
-	color,
-	className,
-	...props
-}: SliderProps) => {
-	return (
-		<SliderRoot
-			{...props}
-			className={clsx(color && `palette-${color}`, className)}
-		>
-			<SliderControl>{children}</SliderControl>
-		</SliderRoot>
-	);
-};
-
-/**
- * A pre-configured Slider UI component. Meant to compose
- * under Slider.Root when you want to use Slider.Value, too
- */
-export const SliderUi = ({
-	label,
-	className,
-}: {
-	label?: string;
-	className?: string;
-}) => (
-	<Slider.Control className={className}>
-		<SliderTrack>
-			<SliderRange />
-			<SliderThumb aria-label={label} />
-		</SliderTrack>
-	</Slider.Control>
-);
-
-export interface SliderProps extends SliderRootProps {
-	color?: PaletteName;
-	ref?: Ref<HTMLDivElement>;
-}
-
-export const Slider = Object.assign(
-	function Slider(props: SliderProps) {
-		return (
-			<SliderRoot {...props}>
-				<SliderUi />
-			</SliderRoot>
-		);
-	},
-	{
-		Root: SliderRoot,
-		Base: SliderBase,
-		Control: SliderControl,
-		Track: SliderTrack,
-		/** @deprecated - use Indicator */
-		Range: SliderRange,
-		Indicator: SliderRange,
-		Thumb: SliderThumb,
-		Value: BaseSlider.Value,
-		Ui: SliderUi,
-	},
-);
+import { Slider as BaseSlider, SliderRootProps } from '@base-ui/react/slider';
+import clsx from 'clsx';
+import { Ref } from 'react';
+import { withClassName } from '../../hooks.js';
+import { PaletteName } from '../../uno/index.js';
+
+export const SliderRoot = withClassName(
+	BaseSlider.Root,
+	'layer-components:w-full',
+);
+
+export const SliderControl = withClassName(
+	BaseSlider.Control,
+	'layer-components:(relative h-30px w-full flex translate-z-0 touch-none select-none items-center)',
+	'layer-variants:[&[data-orientation=vertical]]:(h-full w-30px flex-col)',
+);
+export const SliderTrack = withClassName(
+	BaseSlider.Track,
+	'layer-components:(relative h-7px grow select-none rounded-lg ring-1 transition-colors bg-transparent ring-black)',
+	'layer-variants:[&[data-orientation=vertical]]:(h-full w-7px flex-1)',
+);
+export const SliderRange = withClassName(
+	BaseSlider.Indicator,
+	'layer-components:(rounded-lg transition-colors bg-main)',
+	'layer-variants:[&[data-orientation=vertical]]:(bg-main)',
+);
+export const SliderThumb = withClassName(
+	BaseSlider.Thumb,
+	'layer-components:(h-5 w-5 flex cursor-pointer touch-none items-center justify-center rounded-lg leading-none shadow-sm ring-2 transition-color bg-white ring-black)',
+	'layer-components:hover:(shadow-md)',
+	'layer-components:active:(shadow-lg ring-4 ring-opacity-50 bg-main-light ring-main-dark)',
+	'layer-components:focus-visible:(shadow-lg bg-main-light)',
+	'foc-lg',
+	'layer-components:focus:(outline-none)',
+	'layer-components:disabled:(opacity-50)',
+);
+
+export const SliderBase = ({
+	children,
+	color,
+	className,
+	...props
+}: SliderProps) => {
+	return (
+		<SliderRoot
+			{...props}
+			className={clsx(color && `palette-${color}`, className)}
+		>
+			<SliderControl>{children}</SliderControl>
+		</SliderRoot>
+	);
+};
+
+/**
+ * A pre-configured Slider UI component. Meant to compose
+ * under Slider.Root when you want to use Slider.Value, too
+ */
+export const SliderUi = ({
+	label,
+	className,
+}: {
+	label?: string;
+	className?: string;
+}) => (
+	<Slider.Control className={className}>
+		<SliderTrack>
+			<SliderRange />
+			<SliderThumb aria-label={label} />
+		</SliderTrack>
+	</Slider.Control>
+);
+
+export interface SliderProps extends SliderRootProps {
+	color?: PaletteName;
+	ref?: Ref<HTMLDivElement>;
+}
+
+export const Slider = Object.assign(
+	function Slider(props: SliderProps) {
+		return (
+			<SliderRoot {...props}>
+				<SliderUi />
+			</SliderRoot>
+		);
+	},
+	{
+		Root: SliderRoot,
+		Base: SliderBase,
+		Control: SliderControl,
+		Track: SliderTrack,
+		/** @deprecated - use Indicator */
+		Range: SliderRange,
+		Indicator: SliderRange,
+		Thumb: SliderThumb,
+		Value: BaseSlider.Value,
+		Ui: SliderUi,
+
+		getSingle: (v: number | readonly number[]) => {
+			if (Array.isArray(v)) return v[0];
+			return v;
+		},
+	},
+);