@a-type/ui 4.1.2 → 4.1.4

package/src/components/tooltip/Tooltip.tsx

@@ -1,135 +1,134 @@
-import {
-	TooltipPopupProps,
-	TooltipPositionerProps,
-	Tooltip as TooltipPrimitive,
-	TooltipTriggerProps,
-} from '@base-ui/react/tooltip';
-import classNames from 'clsx';
-import { ReactElement, ReactNode } from 'react';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
-import { ArrowSvg } from '../utility/ArrowSvg.js';
-
-export type * from '@base-ui/react/tooltip';
-
-export interface TooltipContentProps
-	extends TooltipPopupProps,
-		Omit<TooltipPositionerProps, 'className' | 'style' | 'render'> {
-	color?: 'contrast' | 'white' | 'neutral' | 'attention';
-}
-
-function Content({
-	children,
-	className,
-	color = 'contrast',
-	render,
-	side,
-	sideOffset,
-	align,
-	alignOffset,
-	anchor,
-	disableAnchorTracking,
-	sticky,
-	arrowPadding,
-	collisionAvoidance,
-	collisionBoundary,
-	collisionPadding,
-	positionMethod,
-	...props
-}: TooltipContentProps) {
-	return (
-		<TooltipPrimitive.Portal>
-			<GroupScaleReset>
-				<TooltipPrimitive.Positioner
-					side={side}
-					sideOffset={sideOffset}
-					align={align}
-					alignOffset={alignOffset}
-					anchor={anchor}
-					disableAnchorTracking={disableAnchorTracking}
-					sticky={sticky}
-					arrowPadding={arrowPadding}
-					collisionAvoidance={collisionAvoidance}
-					collisionBoundary={collisionBoundary}
-					collisionPadding={collisionPadding}
-					positionMethod={positionMethod}
-				>
-					<TooltipPrimitive.Popup
-						render={render}
-						className={classNames(
-							'layer-components:(relative flex select-none rounded-sm px-sm py-xs text-sm leading-tight shadow-sm transition)',
-							'layer-components:data-[instant]:transition-none',
-							'layer-components:data-[starting-style]:(scale-95 opacity-0)',
-							'layer-components:data-[ending-style]:(scale-95 opacity-0)',
-							'layer-components:transform-origin-[var(--transform-origin)]',
-							{
-								'layer-variants:(color-white bg-black)': color === 'contrast',
-								'layer-variants:(border color-black bg-white border-gray)':
-									color === 'white' || color === 'neutral',
-								'layer-variants:(color-white bg-attention-ink)':
-									color === 'attention',
-							},
-							className,
-						)}
-						{...props}
-					>
-						{children}
-						<TooltipPrimitive.Arrow className="layer-components:arrow">
-							<ArrowSvg />
-						</TooltipPrimitive.Arrow>
-					</TooltipPrimitive.Popup>
-				</TooltipPrimitive.Positioner>
-			</GroupScaleReset>
-		</TooltipPrimitive.Portal>
-	);
-}
-
-export const TooltipProvider = TooltipPrimitive.Provider;
-
-export interface TooltipProps
-	extends Omit<TooltipTriggerProps, 'content' | 'children'>,
-		Pick<TooltipContentProps, 'side' | 'sideOffset' | 'color'> {
-	content: ReactNode;
-	children?: ReactElement;
-	open?: boolean;
-	disabled?: boolean;
-}
-
-export const Tooltip = Object.assign(
-	function Tooltip({
-		ref,
-		content,
-		children,
-		open,
-		disabled,
-		className,
-		sideOffset = 12,
-		side,
-		color,
-		...rest
-	}: TooltipProps & {
-		ref?: React.Ref<HTMLButtonElement>;
-	}) {
-		return (
-			<TooltipPrimitive.Root open={open}>
-				{disabled ? (
-					children
-				) : (
-					<TooltipPrimitive.Trigger ref={ref} {...rest} render={children} />
-				)}
-				<Content
-					color={color}
-					side={side}
-					sideOffset={sideOffset}
-					className={className}
-				>
-					{content}
-				</Content>
-			</TooltipPrimitive.Root>
-		);
-	},
-	{
-		Trigger: TooltipPrimitive.Trigger,
-		Content,
-		createHandle: TooltipPrimitive.createHandle,
-	},
-);
+import {
+	TooltipPopupProps,
+	TooltipPositionerProps,
+	Tooltip as TooltipPrimitive,
+	TooltipTriggerProps,
+} from '@base-ui/react/tooltip';
+import classNames from 'clsx';
+import { ReactElement, ReactNode } from 'react';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
+
+export type * from '@base-ui/react/tooltip';
+
+export interface TooltipContentProps
+	extends TooltipPopupProps,
+		Omit<TooltipPositionerProps, 'className' | 'style' | 'render'> {
+	color?: 'contrast' | 'white' | 'neutral' | 'attention';
+}
+
+function Content({
+	children,
+	className,
+	color = 'contrast',
+	render,
+	side,
+	sideOffset,
+	align,
+	alignOffset,
+	anchor,
+	disableAnchorTracking,
+	sticky,
+	arrowPadding,
+	collisionAvoidance,
+	collisionBoundary,
+	collisionPadding,
+	positionMethod,
+	...props
+}: TooltipContentProps) {
+	return (
+		<TooltipPrimitive.Portal>
+			<GroupScaleReset>
+				<TooltipPrimitive.Positioner
+					side={side}
+					sideOffset={sideOffset}
+					align={align}
+					alignOffset={alignOffset}
+					anchor={anchor}
+					disableAnchorTracking={disableAnchorTracking}
+					sticky={sticky}
+					arrowPadding={arrowPadding}
+					collisionAvoidance={collisionAvoidance}
+					collisionBoundary={collisionBoundary}
+					collisionPadding={collisionPadding}
+					positionMethod={positionMethod}
+				>
+					<TooltipPrimitive.Popup
+						render={render}
+						className={classNames(
+							'layer-components:(relative flex select-none rounded-sm px-sm py-xs text-sm leading-tight shadow-sm transition)',
+							'layer-components:data-[instant]:transition-none',
+							'layer-components:start-end:(scale-95 opacity-0)',
+							'layer-components:transform-origin-[var(--transform-origin)]',
+							{
+								'layer-variants:(color-white bg-black)': color === 'contrast',
+								'layer-variants:(border color-black bg-white border-gray)':
+									color === 'white' || color === 'neutral',
+								'layer-variants:(color-white bg-attention-ink)':
+									color === 'attention',
+							},
+							className,
+						)}
+						{...props}
+					>
+						{children}
+						<TooltipPrimitive.Arrow className="layer-components:arrow">
+							<ArrowSvg />
+						</TooltipPrimitive.Arrow>
+					</TooltipPrimitive.Popup>
+				</TooltipPrimitive.Positioner>
+			</GroupScaleReset>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export const TooltipProvider = TooltipPrimitive.Provider;
+
+export interface TooltipProps
+	extends Omit<TooltipTriggerProps, 'content' | 'children'>,
+		Pick<TooltipContentProps, 'side' | 'sideOffset' | 'color'> {
+	content: ReactNode;
+	children?: ReactElement;
+	open?: boolean;
+	disabled?: boolean;
+}
+
+export const Tooltip = Object.assign(
+	function Tooltip({
+		ref,
+		content,
+		children,
+		open,
+		disabled,
+		className,
+		sideOffset = 12,
+		side,
+		color,
+		...rest
+	}: TooltipProps & {
+		ref?: React.Ref<HTMLButtonElement>;
+	}) {
+		return (
+			<TooltipPrimitive.Root open={open}>
+				{disabled ? (
+					children
+				) : (
+					<TooltipPrimitive.Trigger ref={ref} {...rest} render={children} />
+				)}
+				<Content
+					color={color}
+					side={side}
+					sideOffset={sideOffset}
+					className={className}
+				>
+					{content}
+				</Content>
+			</TooltipPrimitive.Root>
+		);
+	},
+	{
+		Trigger: TooltipPrimitive.Trigger,
+		Content,
+		createHandle: TooltipPrimitive.createHandle,
+	},
+);

package/src/systems/ValueMonitor.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+export class ValueMonitor<T> extends EventTarget {
+	private current: T;
+	constructor(initialValue: T) {
+		super();
+		this.current = initialValue;
+	}
+
+	set(value: T) {
+		if (this.current !== value) {
+			this.current = value;
+			this.dispatchEvent(new Event('change'));
+		}
+	}
+
+	get() {
+		return this.current;
+	}
+}
+
+export function useValueMonitor<T>(initialValue: T) {
+	const monitor = useState(() => new ValueMonitor<T>(initialValue))[0];
+	return monitor;
+}
+
+export function useMonitor<T>(
+	monitor: ValueMonitor<T>,
+	onChange: (value: T) => void,
+) {
+	useEffect(() => {
+		const handleChange = () => {
+			onChange(monitor.get());
+		};
+		monitor.addEventListener('change', handleChange);
+		onChange(monitor.get());
+		return () => {
+			monitor.removeEventListener('change', handleChange);
+		};
+	}, [monitor, onChange]);
+}

package/src/uno/rules/clipPath.ts

@@ -0,0 +1,44 @@
+import { Rule } from 'unocss';
+
+export const clipPathRules: Rule[] = [
+	[
+		/^clip-(:?path-)?(.+)$/,
+		([, path]) => ({
+			'clip-path': `url(#${path})`,
+		}),
+	],
+	[
+		/^clip-(:?path-)?none$/,
+		() => ({
+			'clip-path': 'none',
+		}),
+	],
+	[
+		/^clip-(:?path-)?inset-(.+)$/,
+		([, value, value2]) => {
+			const parts = (value2 || value).split(']-[');
+			const unbracketed = parts
+				.map((part) => part.trim())
+				.map((part) => {
+					if (part.startsWith('[') && part.endsWith(']')) {
+						return part.slice(1, -1);
+					} else if (part.startsWith('[')) {
+						return part.slice(1);
+					} else if (part.endsWith(']')) {
+						return part.slice(0, -1);
+					}
+					return part;
+				})
+				.map((part) => part.replace(/_/g, ' '));
+			return {
+				'clip-path': `inset(${unbracketed.join(' ')})`,
+			};
+		},
+	],
+	[
+		/^clip-(:?path-)?circle-(.+)$/,
+		([, value]) => ({
+			'clip-path': `circle(${value})`,
+		}),
+	],
+];

package/src/uno/rules/index.ts

@@ -1,4 +1,5 @@
 import { anchorRules } from './anchor.js';
+import { clipPathRules } from './clipPath.js';
 import { colorRules } from './color.js';
 import { overflowRules } from './overflow.js';
 import { shadowRules } from './shadow.js';
@@ -10,4 +11,5 @@ export const rules = [
 	...overflowRules,
 	...shadowRules,
 	...utilRules,
+	...clipPathRules,
 ];

package/src/uno/variants/baseUi.ts

@@ -0,0 +1,13 @@
+import { Variant } from 'unocss';
+
+export const baseUIVariants: Variant[] = [
+	// apply same styles to [data-starting-style] as [data-ending-style]
+	(matcher) => {
+		if (matcher.startsWith('start-end:')) {
+			return {
+				matcher: matcher.replace('start-end:', ''),
+				selector: (s) => `${s}[data-starting-style], ${s}[data-ending-style]`,
+			};
+		}
+	},
+];

package/src/uno/variants/index.ts

@@ -1,4 +1,5 @@
 import { Variant } from 'unocss';
+import { baseUIVariants } from './baseUi.js';
 
 export const variants: Variant[] = [
 	/** Selects &+&, good for top borders */
@@ -9,4 +10,6 @@ export const variants: Variant[] = [
 			selector: (s) => `${s} + ${s}`,
 		};
 	},
+
+	...baseUIVariants,
 ];