@passui/react 0.1.45 → 0.1.46

package/src/components/sidebar/sidebar.tsx

@@ -1,102 +1,102 @@
-import { useId, type ReactNode } from "react"
-import { cn } from "../../lib/class-names"
+import { useId, type ReactNode } from "react";
+import { cn } from "../../lib/class-names";
 
 export interface SidebarSectionProps {
-    /** Visible heading for this group of navigation rows. */
-    title: string
-    children: ReactNode
+	/** Visible heading for this group of navigation rows. */
+	title: string;
+	children: ReactNode;
 }
 
 export interface SidebarItemContentProps {
-    icon?: ReactNode
-    /** Optional trailing count. */
-    count?: number
-    /** Matches the router link's active state. */
-    active?: boolean
-    children: ReactNode
+	icon?: ReactNode;
+	/** Optional trailing count. */
+	count?: number;
+	/** Matches the router link's active state. */
+	active?: boolean;
+	children: ReactNode;
 }
 
 export function SidebarSection({
-    title,
-    children,
-    size = "md",
+	title,
+	children,
+	size = "md",
 }: SidebarSectionProps & { size?: SidebarSize }) {
-    const headingId = useId()
-    return (
-        <section aria-labelledby={headingId} className="flex flex-col gap-0.5">
-            <h2 id={headingId} className={sidebarHeadingSizes[size]}>
-                {title}
-            </h2>
-            {children}
-        </section>
-    )
+	const headingId = useId();
+	return (
+		<section aria-labelledby={headingId} className="flex flex-col gap-0.5">
+			<h2 id={headingId} className={sidebarHeadingSizes[size]}>
+				{title}
+			</h2>
+			{children}
+		</section>
+	);
 }
 
 /** Classes for a sidebar row; apply to the app's router link. */
-export type SidebarDensity = "regular" | "compact"
-export type SidebarSize = "sm" | "md" | "lg"
+export type SidebarDensity = "regular" | "compact";
+export type SidebarSize = "sm" | "md" | "lg";
 
 const sidebarItemSizes: Record<SidebarSize, string> = {
-    sm: "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10",
-    md: "rounded-2xl px-2.5 py-[7px] text-subheadline",
-    lg: "rounded-2xl px-3 py-2.5 text-body [@media(pointer:coarse)]:min-h-13",
-}
+	sm: "min-h-8 rounded-lg px-2 py-1 text-footnote [@media(pointer:coarse)]:min-h-10",
+	md: "rounded-2xl px-2.5 py-[7px] text-subheadline",
+	lg: "rounded-2xl px-3 py-2.5 text-body [@media(pointer:coarse)]:min-h-13",
+};
 const sidebarHeadingSizes: Record<SidebarSize, string> = {
-    sm: "px-2 pb-1 text-caption2 font-semibold text-label-tertiary",
-    md: "px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary",
-    lg: "px-3 pb-2 text-subheadline font-semibold text-label-tertiary",
-}
+	sm: "px-2 pb-1 text-caption2 font-semibold text-label-tertiary",
+	md: "px-2.5 pb-1.5 text-caption font-semibold text-label-tertiary",
+	lg: "px-3 pb-2 text-subheadline font-semibold text-label-tertiary",
+};
 const sidebarCountSizes: Record<SidebarSize, string> = {
-    sm: "text-caption2 tabular-nums",
-    md: "text-footnote tabular-nums",
-    lg: "text-subheadline tabular-nums",
-}
+	sm: "text-caption2 tabular-nums",
+	md: "text-footnote tabular-nums",
+	lg: "text-subheadline tabular-nums",
+};
 
 export function sidebarItemClass(
-    active?: boolean,
-    density: SidebarDensity = "regular",
-    size?: SidebarSize
+	active?: boolean,
+	density: SidebarDensity = "regular",
+	size?: SidebarSize,
 ): string {
-    const resolved = size ?? (density === "compact" ? "sm" : "md")
-    return cn(
-        "group flex w-full items-center gap-2.5 text-label no-underline transition-colors duration-fast focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-        sidebarItemSizes[resolved],
-        active
-            ? "bg-fill font-medium"
-            : "font-normal text-label-secondary hover:bg-fill/70 hover:text-label"
-    )
+	const resolved = size ?? (density === "compact" ? "sm" : "md");
+	return cn(
+		"group text-label duration-fast focus-visible:outline-accent-text flex w-full items-center gap-2.5 no-underline transition-colors focus-visible:outline-2 focus-visible:outline-offset-2",
+		sidebarItemSizes[resolved],
+		active
+			? "bg-fill font-medium"
+			: "text-label-secondary hover:bg-fill/70 hover:text-label font-normal",
+	);
 }
 
 export function SidebarItemContent({
-    icon,
-    count,
-    active,
-    size = "md",
-    children,
+	icon,
+	count,
+	active,
+	size = "md",
+	children,
 }: SidebarItemContentProps & { size?: SidebarSize }) {
-    return (
-        <>
-            {icon && (
-                <span
-                    className={cn(
-                        "flex transition-colors",
-                        active ? "text-accent-text" : "text-label-secondary"
-                    )}
-                >
-                    {icon}
-                </span>
-            )}
-            <span className="grow truncate">{children}</span>
-            {count !== undefined && (
-                <span
-                    className={cn(
-                        sidebarCountSizes[size],
-                        active ? "text-accent-text" : "text-label-tertiary"
-                    )}
-                >
-                    {count}
-                </span>
-            )}
-        </>
-    )
+	return (
+		<>
+			{icon && (
+				<span
+					className={cn(
+						"flex transition-colors",
+						active ? "text-accent-text" : "text-label-secondary",
+					)}
+				>
+					{icon}
+				</span>
+			)}
+			<span className="grow truncate">{children}</span>
+			{count !== undefined && (
+				<span
+					className={cn(
+						sidebarCountSizes[size],
+						active ? "text-accent-text" : "text-label-tertiary",
+					)}
+				>
+					{count}
+				</span>
+			)}
+		</>
+	);
 }

package/src/components/skeleton/skeleton.tsx

@@ -1,29 +1,38 @@
-import type { ComponentProps } from "react"
-import { cn } from "../../lib/class-names"
+import type { ComponentProps } from "react";
+import { cn } from "../../lib/class-names";
 
-export type SkeletonSize = "sm" | "md" | "lg"
+export type SkeletonSize = "sm" | "md" | "lg";
 
 const minHeights: Record<SkeletonSize, string> = {
-    sm: "min-h-3 rounded-md",
-    md: "min-h-4 rounded-md",
-    lg: "min-h-6 rounded-lg",
-}
+	sm: "min-h-3 rounded-md",
+	md: "min-h-4 rounded-md",
+	lg: "min-h-6 rounded-lg",
+};
 
 export interface SkeletonProps extends ComponentProps<"div"> {
-    label?: string
-    /** Minimum height and rounding. @default "md" */
-    size?: SkeletonSize
+	label?: string;
+	/** Minimum height and rounding. @default "md" */
+	size?: SkeletonSize;
 }
 /** A loading placeholder that becomes still when Reduce Motion is enabled. */
-export function Skeleton({ label, size = "md", className, ...props }: SkeletonProps) {
-    return (
-        <div
-            {...props}
-            role={label ? "status" : undefined}
-            aria-hidden={label ? undefined : true}
-            className={cn("bg-fill motion-safe:animate-pulse", minHeights[size], className)}
-        >
-            {label && <span className="sr-only">{label}</span>}
-        </div>
-    )
+export function Skeleton({
+	label,
+	size = "md",
+	className,
+	...props
+}: SkeletonProps) {
+	return (
+		<div
+			{...props}
+			role={label ? "status" : undefined}
+			aria-hidden={label ? undefined : true}
+			className={cn(
+				"bg-fill motion-safe:animate-pulse",
+				minHeights[size],
+				className,
+			)}
+		>
+			{label && <span className="sr-only">{label}</span>}
+		</div>
+	);
 }

package/src/components/slider/slider.tsx

@@ -1,125 +1,134 @@
-import { type ComponentProps, useId } from "react"
-import { cn } from "../../lib/class-names"
-import { clampRange } from "../../lib/range-value"
+import { type ComponentProps, useId } from "react";
+import { cn } from "../../lib/class-names";
+import { clampRange } from "../../lib/range-value";
 
-export type SliderSize = "sm" | "md" | "lg"
+export type SliderSize = "sm" | "md" | "lg";
 
 const labelSizes: Record<SliderSize, string> = {
-    sm: "text-footnote font-semibold text-label",
-    md: "text-subheadline font-semibold text-label",
-    lg: "text-body font-semibold text-label",
-}
+	sm: "text-footnote font-semibold text-label",
+	md: "text-subheadline font-semibold text-label",
+	lg: "text-body font-semibold text-label",
+};
 const inputHeights: Record<SliderSize, string> = {
-    sm: "h-9",
-    md: "h-11",
-    lg: "h-13",
-}
+	sm: "h-9",
+	md: "h-11",
+	lg: "h-13",
+};
 const descriptionSizes: Record<SliderSize, string> = {
-    sm: "text-caption2 text-label-secondary",
-    md: "text-footnote text-label-secondary",
-    lg: "text-subheadline text-label-secondary",
-}
+	sm: "text-caption2 text-label-secondary",
+	md: "text-footnote text-label-secondary",
+	lg: "text-subheadline text-label-secondary",
+};
 // Track height, thumb size, and the webkit thumb's -mt offset (derived from
 // (thumb - track) / 2: md (20-6)/2=7, sm (16-4)/2=6, lg (24-8)/2=8).
 const webkitTrack: Record<SliderSize, string> = {
-    sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-    md: "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-    lg: "[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
-}
+	sm: "[&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
+	md: "[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
+	lg: "[&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-separator",
+};
 const webkitThumb: Record<SliderSize, string> = {
-    sm: "[&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-    md: "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-    lg: "[&::-webkit-slider-thumb]:-mt-[8px] [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
-}
+	sm: "[&::-webkit-slider-thumb]:-mt-[6px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
+	md: "[&::-webkit-slider-thumb]:-mt-[7px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
+	lg: "[&::-webkit-slider-thumb]:-mt-[8px] [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-accent [&::-webkit-slider-thumb]:bg-elevated [&::-webkit-slider-thumb]:shadow-sm",
+};
 const mozTrack: Record<SliderSize, string> = {
-    sm: "[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-    md: "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-    lg: "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
-}
+	sm: "[&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
+	md: "[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
+	lg: "[&::-moz-range-track]:h-2 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-separator",
+};
 const mozProgress: Record<SliderSize, string> = {
-    sm: "[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-    md: "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-    lg: "[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
-}
+	sm: "[&::-moz-range-progress]:h-1 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
+	md: "[&::-moz-range-progress]:h-1.5 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
+	lg: "[&::-moz-range-progress]:h-2 [&::-moz-range-progress]:rounded-full [&::-moz-range-progress]:bg-accent",
+};
 const mozThumb: Record<SliderSize, string> = {
-    sm: "[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-    md: "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-    lg: "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
-}
+	sm: "[&::-moz-range-thumb]:size-3 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
+	md: "[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
+	lg: "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-accent [&::-moz-range-thumb]:bg-elevated",
+};
 
 export interface SliderProps
-    extends Omit<
-        ComponentProps<"input">,
-        "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step" | "size"
-    > {
-    value: number
-    onChange: (value: number) => void
-    label: string
-    min?: number
-    max?: number
-    step?: number
-    description?: string
-    /** Provides a localized, spoken description of the current value. */
-    formatValue?: (value: number) => string
-    /** Track height, thumb size and label/description text scale. @default "md" */
-    size?: SliderSize
+	extends Omit<
+		ComponentProps<"input">,
+		| "type"
+		| "value"
+		| "defaultValue"
+		| "onChange"
+		| "min"
+		| "max"
+		| "step"
+		| "size"
+	> {
+	value: number;
+	onChange: (value: number) => void;
+	label: string;
+	min?: number;
+	max?: number;
+	step?: number;
+	description?: string;
+	/** Provides a localized, spoken description of the current value. */
+	formatValue?: (value: number) => string;
+	/** Track height, thumb size and label/description text scale. @default "md" */
+	size?: SliderSize;
 }
 
 /** Native keyboard, touch and pointer behavior with Passui's control treatment. */
 export function Slider({
-    value,
-    onChange,
-    label,
-    min = 0,
-    max = 100,
-    step = 1,
-    description,
-    formatValue,
-    size = "md",
-    id: suppliedId,
-    className,
-    disabled,
-    ...props
+	value,
+	onChange,
+	label,
+	min = 0,
+	max = 100,
+	step = 1,
+	description,
+	formatValue,
+	size = "md",
+	id: suppliedId,
+	className,
+	disabled,
+	...props
 }: SliderProps) {
-    const generatedId = useId()
-    const id = suppliedId ?? generatedId
-    const upper = Math.max(min, max)
-    const current = clampRange(value, min, upper)
+	const generatedId = useId();
+	const id = suppliedId ?? generatedId;
+	const upper = Math.max(min, max);
+	const current = clampRange(value, min, upper);
 
-    return (
-        <div className={cn("flex min-w-0 flex-col gap-2", disabled && "opacity-45")}>
-            <label htmlFor={id} className={labelSizes[size]}>
-                {label}
-            </label>
-            <input
-                {...props}
-                id={id}
-                type="range"
-                min={min}
-                max={upper}
-                step={step > 0 ? step : 1}
-                value={current}
-                disabled={disabled || upper === min}
-                aria-valuetext={formatValue?.(current)}
-                aria-describedby={description ? `${id}-description` : undefined}
-                onChange={(event) => onChange(Number(event.currentTarget.value))}
-                className={cn(
-                    "w-full min-w-0 cursor-pointer appearance-none bg-transparent accent-accent",
-                    inputHeights[size],
-                    "focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-text",
-                    webkitTrack[size],
-                    webkitThumb[size],
-                    mozTrack[size],
-                    mozProgress[size],
-                    mozThumb[size],
-                    className
-                )}
-            />
-            {description && (
-                <p id={`${id}-description`} className={descriptionSizes[size]}>
-                    {description}
-                </p>
-            )}
-        </div>
-    )
+	return (
+		<div
+			className={cn("flex min-w-0 flex-col gap-2", disabled && "opacity-45")}
+		>
+			<label htmlFor={id} className={labelSizes[size]}>
+				{label}
+			</label>
+			<input
+				{...props}
+				id={id}
+				type="range"
+				min={min}
+				max={upper}
+				step={step > 0 ? step : 1}
+				value={current}
+				disabled={disabled || upper === min}
+				aria-valuetext={formatValue?.(current)}
+				aria-describedby={description ? `${id}-description` : undefined}
+				onChange={(event) => onChange(Number(event.currentTarget.value))}
+				className={cn(
+					"accent-accent w-full min-w-0 cursor-pointer appearance-none bg-transparent",
+					inputHeights[size],
+					"focus-visible:outline-accent-text focus-visible:rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2",
+					webkitTrack[size],
+					webkitThumb[size],
+					mozTrack[size],
+					mozProgress[size],
+					mozThumb[size],
+					className,
+				)}
+			/>
+			{description && (
+				<p id={`${id}-description`} className={descriptionSizes[size]}>
+					{description}
+				</p>
+			)}
+		</div>
+	);
 }

package/src/components/slosh-slider/liquid-step.ts

@@ -1,42 +1,43 @@
-import { clampRange } from "../../lib/range-value"
+import { clampRange } from "../../lib/range-value";
 
 export interface LiquidState {
-    fill: number
-    velocity: number
+	fill: number;
+	velocity: number;
 }
 
 /** Bencho's frame-normalized liquid spring. See THIRD_PARTY_NOTICES.md. */
 export function stepLiquid(
-    state: LiquidState,
-    target: number,
-    viscosity: number,
-    dt: number
+	state: LiquidState,
+	target: number,
+	viscosity: number,
+	dt: number,
 ): LiquidState {
-    const soft = clampRange(viscosity, 0, 100) / 100
-    target = clampRange(target, 0, 100)
-    dt = clampRange(dt, 0, 2.5)
-    if (soft === 0) {
-        /* 0 is an ordinary slider and has to be exactly that,
+	const soft = clampRange(viscosity, 0, 100) / 100;
+	target = clampRange(target, 0, 100);
+	dt = clampRange(dt, 0, 2.5);
+	if (soft === 0) {
+		/* 0 is an ordinary slider and has to be exactly that,
            not a very stiff spring that still rings. */
-        return { fill: target, velocity: 0 }
-    }
-    /* Stiffness falls and damping rises together: thin liquid is slow to
+		return { fill: target, velocity: 0 };
+	}
+	/* Stiffness falls and damping rises together: thin liquid is slow to
        answer and slow to forget, which is why these are one knob. */
-    const stiff = 0.34 - soft * 0.29
-    const damp = 0.74 + soft * 0.22
-    let velocity = (state.velocity + (target - state.fill) * stiff * dt) * damp ** dt
-    let fill = state.fill + velocity * dt
-    /* The end stop is a wall, and a wall gives some back. Without this
+	const stiff = 0.34 - soft * 0.29;
+	const damp = 0.74 + soft * 0.22;
+	let velocity =
+		(state.velocity + (target - state.fill) * stiff * dt) * damp ** dt;
+	let fill = state.fill + velocity * dt;
+	/* The end stop is a wall, and a wall gives some back. Without this
        the overshoot is swallowed exactly where you are looking at it. */
-    if (fill > 100) {
-        fill = 100
-        velocity = -velocity * 0.42
-    }
-    if (fill < 0) {
-        fill = 0
-        velocity = -velocity * 0.42
-    }
-    if (Math.abs(target - fill) < 0.02 && Math.abs(velocity) < 0.02)
-        return { fill: target, velocity: 0 }
-    return { fill, velocity }
+	if (fill > 100) {
+		fill = 100;
+		velocity = -velocity * 0.42;
+	}
+	if (fill < 0) {
+		fill = 0;
+		velocity = -velocity * 0.42;
+	}
+	if (Math.abs(target - fill) < 0.02 && Math.abs(velocity) < 0.02)
+		return { fill: target, velocity: 0 };
+	return { fill, velocity };
 }