@a-type/ui 5.0.7 → 5.0.9

package/src/components/navBar/NavBar.tsx

@@ -1,101 +1,101 @@
-import { Button } from '@base-ui/react/button';
-import { UseRenderComponentProps } from '@base-ui/react/use-render';
-import classNames, { clsx } from 'clsx';
-import { ReactElement, ReactNode, Ref } from 'react';
-import { withClassName } from '../../hooks.js';
-import { Icon, IconProps } from '../icon/index.js';
-
-export const navBarItemClass = classNames(
-	'layer-components:(relative h-full flex flex-col cursor-pointer select-none items-center justify-center gap-6px whitespace-nowrap rounded-sm border-none px-3 py-1 text-sm transition-colors color-black bg-transparent)',
-	'layer-components:active:bg-darken-2',
-	'layer-components:hover:(bg-main-light)',
-	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
-	'layer-components:[&[data-active=true]]:(color-black color-lighten-2 bg-main-light/50)',
-	'layer-responsive:md:(h-auto flex-row-reverse justify-start gap-2 overflow-visible active:bg-darken-2)',
-);
-
-export interface NavBarItemProps extends UseRenderComponentProps<'button'> {
-	className?: string;
-	children?: ReactNode;
-	active?: boolean;
-	color?: 'primary' | 'gray';
-	render?: ReactElement | (() => ReactElement);
-}
-
-export const NavBarItem = function NavBarItem({
-	ref,
-	className,
-	active,
-	color = 'primary',
-	...rest
-}: NavBarItemProps & {
-	ref?: React.Ref<HTMLButtonElement>;
-}) {
-	return (
-		<Button
-			ref={ref}
-			className={classNames(navBarItemClass, `palette-${color}`, className)}
-			data-active={active}
-			{...rest}
-		/>
-	);
-};
-
-export const NavBarItemIconWrapper = withClassName(
-	'div',
-	'layer-components:(relative flex)',
-	'layer-components:md:(p-6px rounded-lg bg-gray-blend)',
-	'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]',
-);
-
-export const NavBarItemText = withClassName(
-	'span',
-	'layer-components:(overflow-hidden inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:md:(text-md leading-normal)',
-);
-
-interface NavBarItemIconProps extends Omit<IconProps, 'name'> {
-	name?: IconProps['name'];
-	className?: string;
-	children?: ReactNode;
-	ref?: Ref<any>;
-}
-export const NavBarItemIcon = function NavBarItemIcon({
-	ref,
-	className,
-	name = 'placeholder',
-	...rest
-}: NavBarItemIconProps) {
-	return (
-		<Icon
-			name={name}
-			className={clsx(
-				'layer-components:(relative z-1 flex color-inherit)',
-				'layer-variants:[*[data-active=true]_&]:fill-main',
-				className,
-			)}
-			{...rest}
-			ref={ref}
-		/>
-	);
-};
-
-export const NavBarItemPip = withClassName(
-	'div',
-	'palette-attention',
-	'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-lg bg-main shadow-sm)',
-);
-
-export const NavBarRoot = withClassName(
-	'div',
-	'layer-components:(grid [grid-auto-columns:1fr] [grid-auto-flow:column] justify-items-center w-full rounded-none overflow-hidden z-50 p-1 h-auto)',
-	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
-	'layer-components:md:(bg-transparent flex flex-col rounded-none border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)',
-);
-
-export const NavBar = Object.assign(NavBarRoot, {
-	Item: NavBarItem,
-	ItemIcon: NavBarItemIcon,
-	ItemText: NavBarItemText,
-	ItemIconWrapper: NavBarItemIconWrapper,
-	ItemPip: NavBarItemPip,
-});
+import { Button } from '@base-ui/react/button';
+import { UseRenderComponentProps } from '@base-ui/react/use-render';
+import classNames, { clsx } from 'clsx';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { withClassName } from '../../hooks.js';
+import { Icon, IconProps } from '../icon/index.js';
+
+export const navBarItemClass = classNames(
+	'layer-components:(relative h-full flex flex-col cursor-pointer select-none items-center justify-center gap-6px whitespace-nowrap rounded-sm border-none px-3 py-1 text-sm transition-colors color-black bg-transparent)',
+	'layer-components:active:bg-darken-2',
+	'layer-components:hover:(bg-main-light)',
+	'layer-components:foc-effect',
+	'layer-components:[&[data-active=true]]:(color-black color-lighten-2 bg-main-light/50)',
+	'layer-responsive:md:(h-auto flex-row-reverse justify-start gap-2 overflow-visible active:bg-darken-2)',
+);
+
+export interface NavBarItemProps extends UseRenderComponentProps<'button'> {
+	className?: string;
+	children?: ReactNode;
+	active?: boolean;
+	color?: 'primary' | 'gray';
+	render?: ReactElement | (() => ReactElement);
+}
+
+export const NavBarItem = function NavBarItem({
+	ref,
+	className,
+	active,
+	color = 'primary',
+	...rest
+}: NavBarItemProps & {
+	ref?: React.Ref<HTMLButtonElement>;
+}) {
+	return (
+		<Button
+			ref={ref}
+			className={classNames(navBarItemClass, `palette-${color}`, className)}
+			data-active={active}
+			{...rest}
+		/>
+	);
+};
+
+export const NavBarItemIconWrapper = withClassName(
+	'div',
+	'layer-components:(relative flex)',
+	'layer-components:md:bg-gray-blend layer-components:md:(rounded-lg p-6px)',
+	'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]',
+);
+
+export const NavBarItemText = withClassName(
+	'span',
+	'layer-components:(inline-block overflow-hidden text-ellipsis whitespace-nowrap text-xxs) layer-components:md:(text-md leading-normal)',
+);
+
+interface NavBarItemIconProps extends Omit<IconProps, 'name'> {
+	name?: IconProps['name'];
+	className?: string;
+	children?: ReactNode;
+	ref?: Ref<any>;
+}
+export const NavBarItemIcon = function NavBarItemIcon({
+	ref,
+	className,
+	name = 'placeholder',
+	...rest
+}: NavBarItemIconProps) {
+	return (
+		<Icon
+			name={name}
+			className={clsx(
+				'layer-components:(relative z-1 flex color-inherit)',
+				'layer-variants:[*[data-active=true]_&]:fill-main',
+				className,
+			)}
+			{...rest}
+			ref={ref}
+		/>
+	);
+};
+
+export const NavBarItemPip = withClassName(
+	'div',
+	'palette-attention',
+	'layer-components:(absolute right-6px top-6px h-6px w-6px rounded-lg shadow-sm bg-main)',
+);
+
+export const NavBarRoot = withClassName(
+	'div',
+	'layer-components:([grid-auto-columns:1fr] [grid-auto-flow:column] z-50 grid h-auto w-full justify-items-center overflow-hidden rounded-none p-1)',
+	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
+	'layer-components:md:(h-min-content flex flex-col items-stretch justify-start gap-2 overflow-x-hidden rounded-none border-none pb-10 bg-transparent border-transparent overflow-y-auto shadow-none)',
+);
+
+export const NavBar = Object.assign(NavBarRoot, {
+	Item: NavBarItem,
+	ItemIcon: NavBarItemIcon,
+	ItemText: NavBarItemText,
+	ItemIconWrapper: NavBarItemIconWrapper,
+	ItemPip: NavBarItemPip,
+});

package/src/components/note/Note.tsx

@@ -14,7 +14,7 @@ function NoteRoot({ className, color, children, ...rest }: NoteProps) {
 		<div
 			className={classNames(
 				color && `palette-${color}`,
-				'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:(ring ring-4 ring-accent)',
+				'foc-contained',
 				'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:(ring ring-4 bg-lighten-3 ring-main-light)',
 				className,
 			)}
@@ -34,7 +34,7 @@ function NoteRoot({ className, color, children, ...rest }: NoteProps) {
 					aria-hidden
 				>
 					{/* folded corner */}
-					<div className="layer-components:(relative h-[20px] w-[20px] flex-[0_0_20px] border-0 border-solid border-main-dark) layer-variants:(border-b-1px border-l-1px)">
+					<div className="layer-components:(relative h-[20px] w-[20px] flex-[0_0_20px] border-0 border-solid border-main-dark) layer-variants:(border-b border-l)">
 						{/* top corner */}
 						<div
 							className={`layer-components:(box-content h-0 w-0 transform-origin-br translate--7px rotate--45 border-13px border-solid border-transparent border-r-main-wash border-r-darken-1)`}
@@ -43,7 +43,7 @@ function NoteRoot({ className, color, children, ...rest }: NoteProps) {
 						<div className="layer-components:(absolute left-9px top--3px h-27px w-0.5px transform-origin-cc rotate--45 bg-main-dark)" />
 					</div>
 					{/* bottom right corner */}
-					<div className="layer-components:(flex-1 border-0 border-solid bg-main-wash bg-darken-1 border-main-dark) layer-variants:(border-b-1px border-r-1px)" />
+					<div className="layer-components:(flex-1 border-0 border-solid bg-main-wash bg-darken-1 border-main-dark) layer-variants:(border-b border-r)" />
 				</div>
 			</div>
 		</div>

package/src/components/primitives/menus.tsx

@@ -4,7 +4,7 @@ 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:focus-visible:(outline-none ring-2 ring-accent)',
+	'layer-primitives:foc',
 
 	'transform-origin-[--transform-origin] will-change-transform',
 	'important:motion-reduce:transition-none',

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

@@ -1,11 +1,16 @@
 import { createContext, ReactNode, useContext } from 'react';
-import { useThemedTitleBar, useVisualViewportOffset } from '../../hooks.js';
+import {
+	useThemedTitleBar,
+	useVirtualKeyboardFocusBehavior,
+	useVisualViewportOffset,
+} from '../../hooks.js';
 import { useVirtualKeyboardBehavior } from '../../hooks/useVirtualKeyboardBehavior.js';
 import { IconSpritesheet } from '../icon/index.js';
 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;
@@ -14,6 +19,7 @@ export interface ProviderProps {
 	virtualKeyboardBehavior?: 'overlay' | 'displace';
 	disableTitleBarColor?: boolean;
 	manifestPath?: string;
+	tweaks?: boolean;
 }
 
 /**
@@ -26,8 +32,10 @@ export function Provider({
 	virtualKeyboardBehavior = 'displace',
 	disableTitleBarColor,
 	manifestPath,
+	tweaks,
 }: ProviderProps) {
 	useVisualViewportOffset(disableViewportOffset);
+	useVirtualKeyboardFocusBehavior();
 	const supportedVirtualKeyboardBehavior =
 		typeof navigator !== 'undefined' && 'virtualKeyboard' in navigator
 			? virtualKeyboardBehavior
@@ -39,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>
+	);
+}