@a-type/ui 5.0.8 → 5.0.10

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;
+		},
+	},
+);

package/src/components/switch/Switch.tsx

@@ -1,38 +1,38 @@
-import { Switch as BaseSwitch, SwitchRootProps } from '@base-ui/react/switch';
-import { withClassName } from '../../hooks/withClassName.js';
-
-const SwitchRoot = withClassName(
-	BaseSwitch.Root,
-	'layer-components:(unset appearance-none flex transition-all cursor-pointer w-42px h-25px p-3px bg-gray-light rounded-lg relative border-default flex-shrink-0 shadow-sm shadow-inset)',
-	'layer-components:data-[checked]:bg-main',
-	'layer-components:hover:[&:not(:disabled)]:(bg-lighten-2 ring-2 ring-bg)',
-	'layer-components:active:[&:not(:disabled)]:(bg-darken-1 ring-4)',
-	'layer-components:focus:outline-none',
-	'layer-components:focus-visible:(ring-4 ring-accent outline-off)',
-);
-
-const SwitchThumb = withClassName(
-	BaseSwitch.Thumb,
-	'layer-components:(block aspect-1 h-full bg-white rounded-lg border-default transition-transform will-change-transform shadow-sm)',
-	'layer-components:data-[checked]:(translate-x-1rem)',
-	'layer-components:data-[checked]:before:(content-["✓"] flex items-center justify-center absolute top-0 left-0 w-full h-full text-xs text-main-ink)',
-);
-
-export const Switch = Object.assign(
-	function Switch({
-		ref,
-		...props
-	}: SwitchRootProps & {
-		ref?: React.Ref<HTMLButtonElement>;
-	}) {
-		return (
-			<SwitchRoot {...props} ref={ref}>
-				<SwitchThumb />
-			</SwitchRoot>
-		);
-	},
-	{
-		Root: SwitchRoot,
-		Thumb: SwitchThumb,
-	},
-);
+import { Switch as BaseSwitch, SwitchRootProps } from '@base-ui/react/switch';
+import { withClassName } from '../../hooks/withClassName.js';
+
+const SwitchRoot = withClassName(
+	BaseSwitch.Root,
+	'layer-components:(unset relative h-25px w-42px flex flex-shrink-0 cursor-pointer appearance-none border-default rounded-lg p-3px shadow-sm shadow-inset transition-all bg-gray-light)',
+	'layer-components:data-[checked]:bg-main',
+	'layer-components:hover:[&:not(:disabled)]:(ring-2 bg-lighten-2 ring-bg)',
+	'layer-components:active:[&:not(:disabled)]:(ring-4 bg-darken-1)',
+	'layer-components:focus:outline-none',
+	'layer-components:foc',
+);
+
+const SwitchThumb = withClassName(
+	BaseSwitch.Thumb,
+	'layer-components:(block aspect-1 h-full border-default rounded-lg shadow-sm transition-transform will-change-transform bg-white)',
+	'layer-components:data-[checked]:(translate-x-1rem)',
+	'layer-components:data-[checked]:before:(absolute left-0 top-0 h-full w-full flex items-center justify-center text-xs text-main-ink content-["✓"])',
+);
+
+export const Switch = Object.assign(
+	function Switch({
+		ref,
+		...props
+	}: SwitchRootProps & {
+		ref?: React.Ref<HTMLButtonElement>;
+	}) {
+		return (
+			<SwitchRoot {...props} ref={ref}>
+				<SwitchThumb />
+			</SwitchRoot>
+		);
+	},
+	{
+		Root: SwitchRoot,
+		Thumb: SwitchThumb,
+	},
+);

package/src/components/tabs/tabs.tsx

@@ -24,7 +24,8 @@ export const TabsTrigger = withClassName(
 	'layer-components:(min-h-touch min-w-100px flex-shrink-0)',
 	'layer-components:(border rounded-lg bg-transparent border-transparent)',
 	'layer-components:hover:[&[data-state=inactive]]:(ring-4 bg-gray-light bg-darken-1 ring-bg)',
-	'layer-components:focus-visible:(outline-off border ring-4 bg-darken-1 border-black ring-accent)',
+	'layer-components:focus-visible:(border bg-darken-1 border-black)',
+	'foc',
 	'data-[active]:(cursor-default)',
 );
 

package/src/components/toggleGroup/toggleGroup.tsx

@@ -14,7 +14,7 @@ export const ToggleGroupItem = withClassName(
 	'layer-components:(flex cursor-pointer items-center justify-center border-1 rounded-lg border-solid px-md py-sm text-nowrap transition-all color-black bg-gray/30 border-transparent)',
 	'layer-components:hover:(ring-2 bg-lighten-2 border-main-ink/20 ring-bg)',
 	'layer-components:active:(ring-4 bg-darken-1 border-main-ink/30)',
-	'layer-components:focus-visible:(outline-off ring-4 ring-accent)',
+	'layer-components:foc',
 	'layer-components:data-[pressed]:(border-default shadow-sm bg-main hover:border-default)',
 );
 

package/src/components/viewport/Viewport.tsx

@@ -118,7 +118,7 @@ export function ViewportRoot({
 					<div
 						className={clsx(
 							'contain-strict relative h-full w-full flex-1 touch-none select-none overflow-hidden',
-							'focus-visible:(ring ring-accent)',
+							'foc',
 							className,
 						)}
 						{...gestureProps}

package/src/hooks/useVisualViewportOffset.ts

@@ -181,14 +181,18 @@ function useReactToViewportChanges(
 }
 
 export interface VirtualKeyboardFocusOptions {
-	focusElementTypes?: string[];
+	shouldScrollIntoView?: (el: Element) => boolean;
+}
+function defaultShouldScrollIntoView(el: Element) {
+	if (['input', 'textarea', 'select'].includes(el.tagName.toLowerCase()))
+		return true;
+	if (el.hasAttribute('contenteditable')) return true;
+	return false;
 }
 export function useVirtualKeyboardFocusBehavior({
-	focusElementTypes = ['input', 'textarea', 'select'],
+	shouldScrollIntoView = defaultShouldScrollIntoView,
 }: VirtualKeyboardFocusOptions = {}) {
-	const stableFocusElementTypes = focusElementTypes
-		.map((type) => type.toLowerCase())
-		.join(',');
+	const stableShouldScroll = useStableCallback(shouldScrollIntoView);
 	useEffect(() => {
 		if (typeof navigator === 'undefined' || typeof window === 'undefined') {
 			return;
@@ -204,21 +208,19 @@ export function useVirtualKeyboardFocusBehavior({
 
 		const virtualKeyboard = navigator.virtualKeyboard as any;
 
-		const matchElements = stableFocusElementTypes.split(',');
-
 		function update() {
 			const open = virtualKeyboard.boundingRect.height > 0;
 			if (open) {
 				console.log('keyboard opened');
 			}
 			const activeElement = document.activeElement;
-			if (
-				activeElement &&
-				matchElements.includes(activeElement.tagName.toLowerCase())
-			) {
+			if (activeElement && stableShouldScroll(activeElement)) {
 				setTimeout(() => {
 					console.log('scroll focused element');
-					activeElement.scrollIntoView(true);
+					activeElement.scrollIntoView({
+						behavior: 'instant',
+						block: 'start',
+					});
 				}, 10);
 			}
 		}
@@ -227,5 +229,5 @@ export function useVirtualKeyboardFocusBehavior({
 		return () => {
 			virtualKeyboard.removeEventListener('geometrychange', update);
 		};
-	}, [stableFocusElementTypes]);
+	}, [stableShouldScroll]);
 }

package/src/themes.stories.tsx

@@ -35,6 +35,7 @@ import {
 	Progress,
 	Provider,
 	Select,
+	Slider,
 	TextSkeleton,
 	ToggleGroup,
 	Tooltip,
@@ -242,6 +243,7 @@ export function DemoUI({ className }: { className?: string }) {
 						onChange={() => {}}
 					/>
 					<Progress value={50} className="m-auto" />
+					<Slider defaultValue={50} min={0} max={100} />
 					<Box surface color="primary" p gap d="col">
 						<H1>Primary surface</H1>
 						<H2>Primary surface</H2>

package/src/uno/logic/properties.ts

@@ -17,6 +17,7 @@ export const PROPS = {
 			SERIF: '--u-font-serif',
 			TITLE: '--u-font-title',
 		},
+		FOCUS_COLOR: '--u-focus-color',
 	},
 
 	PALETTE: {
@@ -134,5 +135,10 @@ export const PROPS = {
 		SHADOW_COLOR: '--un-shadow-color',
 		SHADOW_OPACITY: '--un-shadow-opacity',
 		SHADOW: '--un-shadow',
+		RING_WIDTH: '--un-ring-width',
+		RING_STYLE: '--un-ring-style',
+		RING_OFFSET_SHADOW: '--un-ring-offset-shadow',
+		RING_SHADOW: '--un-ring-shadow',
+		RING_INSET: '--un-ring-inset',
 	},
 };

package/src/uno/preflights/user.ts

@@ -18,10 +18,11 @@ export interface UserPreflightOptions {
 	cornerScale?: number;
 	shadowSpread?: number;
 	fontSize?: number;
+	focusColor?: 'black' | 'primary' | 'accent' | 'gray';
 }
 
 export const userPreflight = ({
-	saturation = 50,
+	saturation = 0.5,
 	primaryHue = defaultPresetHues.lemon.sourceHue,
 	accentHue = defaultPresetHues.leek.sourceHue,
 	spacingScale = 1,
@@ -30,13 +31,15 @@ export const userPreflight = ({
 	shadowSpread = 1,
 	namedHues,
 	fontSize = 16,
+	focusColor = 'accent',
 }: UserPreflightOptions) =>
 	preflight({
 		getCSS: () => {
+			const sat = saturation > 1 ? saturation / 100 : saturation;
 			return `
 @layer preflightBase {
 	:root {
-		${PROPS.USER.SATURATION}: ${saturation / 100};
+		${PROPS.USER.SATURATION}: ${sat};
 		${PROPS.USER.CORNER_SCALE}: ${cornerScale};
 		${PROPS.USER.SPACING_SCALE}: ${spacingScale};
 		${PROPS.USER.BORDER_SCALE}: ${borderScale};
@@ -44,6 +47,7 @@ export const userPreflight = ({
 
 		${PROPS.USER.COLOR.PRIMARY_HUE}: ${primaryHue};
 		${PROPS.USER.COLOR.ACCENT_HUE}: ${accentHue};
+		${PROPS.USER.FOCUS_COLOR}: var(${focusColors[focusColor]});
 		${
 			namedHues
 				? Object.entries(namedHues)
@@ -65,3 +69,13 @@ export const userPreflight = ({
 `;
 		},
 	});
+
+const focusColors: Record<
+	NonNullable<UserPreflightOptions['focusColor']>,
+	string
+> = {
+	black: PROPS.MODE.BLACK,
+	primary: PROPS.PALETTE.NAMED_SHADES('primary').DARK,
+	accent: PROPS.PALETTE.NAMED_SHADES('accent').MID,
+	gray: PROPS.PALETTE.GRAY_SHADES.DARK,
+};

package/src/uno/rules/focus.ts

@@ -0,0 +1,46 @@
+import { Theme } from '@unocss/preset-mini';
+import { Rule } from 'unocss';
+import { PROPS } from '../logic/properties.js';
+
+export const focusRules: Rule<Theme>[] = [
+	[
+		/^foc(?:-effect)?(-lg)?$/,
+		function* ([, size], { symbols }) {
+			yield {
+				[symbols.selector]: (selector) =>
+					`${selector}:focus-visible:not([data-focus-clicked]), ${selector}[data-focus-visible]`,
+				[PROPS.BUILT_IN.RING_COLOR]: `var(${PROPS.USER.FOCUS_COLOR})`,
+				[PROPS.BUILT_IN.RING_WIDTH]: size === '-lg' ? '4px' : '2px',
+				[PROPS.BUILT_IN.RING_STYLE]: 'solid',
+				[PROPS.BUILT_IN
+					.RING_SHADOW]: `var(${PROPS.BUILT_IN.RING_INSET}) 0 0 0 var(${PROPS.BUILT_IN.RING_WIDTH}) var(${PROPS.BUILT_IN.RING_COLOR})`,
+				outline: 'none',
+				'box-shadow': `var(${PROPS.BUILT_IN.RING_OFFSET_SHADOW}), var(${PROPS.BUILT_IN.RING_SHADOW}), var(${PROPS.BUILT_IN.SHADOW})`,
+			};
+			yield {
+				[symbols.selector]: (selector) => `${selector}:focus`,
+				outline: 'none',
+			};
+		},
+	],
+	[
+		/^foc-contained(-lg)?$/,
+		function* ([, size], { symbols }) {
+			yield {
+				[symbols.selector]: (selector) =>
+					`${selector}:has(:focus-visible:not([data-focus-clicked])), ${selector}:has([data-focus-visible])`,
+				[PROPS.BUILT_IN.RING_COLOR]: `var(${PROPS.USER.FOCUS_COLOR})`,
+				[PROPS.BUILT_IN.RING_WIDTH]: size === '-lg' ? '4px' : '2px',
+				[PROPS.BUILT_IN.RING_STYLE]: 'solid',
+				[PROPS.BUILT_IN
+					.RING_SHADOW]: `0 0 0 var(${PROPS.BUILT_IN.RING_WIDTH}) var(${PROPS.BUILT_IN.RING_COLOR})`,
+				outline: 'none',
+				'box-shadow': `var(${PROPS.BUILT_IN.RING_OFFSET_SHADOW}), var(${PROPS.BUILT_IN.RING_SHADOW})`,
+			};
+			yield {
+				[symbols.selector]: (selector) => `${selector}>*:focus`,
+				outline: 'none',
+			};
+		},
+	],
+];

package/src/uno/rules/index.ts

@@ -2,6 +2,7 @@ import { anchorRules } from './anchor.js';
 import { clipPathRules } from './clipPath.js';
 import { colorRules } from './color.js';
 import { containerRules } from './container.js';
+import { focusRules } from './focus.js';
 import { overflowRules } from './overflow.js';
 import { shadowRules } from './shadow.js';
 import { utilRules } from './util.js';
@@ -21,4 +22,5 @@ export const rules = [
 	...utilRules,
 	...clipPathRules,
 	...containerRules,
+	...focusRules,
 ];

package/src/uno/theme/colors.ts

@@ -4,7 +4,9 @@ import { PreflightConfig } from '../preflights/index.js';
 
 const contrastClamp = 'clamp(0, (0.36 / y - 1) * infinity, 1)';
 
-export function makeThemeColors(options: PreflightConfig): Theme['colors'] {
+export function makeThemeColors({
+	namedHues,
+}: PreflightConfig): Theme['colors'] {
 	return {
 		none: 'transparent',
 		transparent: 'transparent',
@@ -26,12 +28,14 @@ export function makeThemeColors(options: PreflightConfig): Theme['colors'] {
 		attention: shadesOf(PROPS.PALETTE.NAMED_SHADES('attention')),
 		success: shadesOf(PROPS.PALETTE.NAMED_SHADES('success')),
 
+		focus: `var(${PROPS.USER.FOCUS_COLOR})`,
+
 		main: shadesOf(PROPS.PALETTE.SHADES),
 		gray: shadesOf(PROPS.PALETTE.GRAY_SHADES),
 
-		...(options.namedHues
+		...(namedHues
 			? Object.fromEntries(
-					Object.keys(options.namedHues).map(([name]) => [
+					Object.keys(namedHues).map(([name]) => [
 						name,
 						shadesOf(PROPS.PALETTE.NAMED_SHADES(name)),
 					]),