@passui/react 0.1.45 → 0.1.46

package/src/components/stepper/stepper.tsx

@@ -1,127 +1,136 @@
-import { useId } from "react"
-import { Button, type ButtonSize } from "../button/button"
-import { cn } from "../../lib/class-names"
-import { clampRange, stepRange } from "../../lib/range-value"
-import { RollingDigit } from "./rolling-digit"
+import { useId } from "react";
+import { Button, type ButtonSize } from "../button/button";
+import { cn } from "../../lib/class-names";
+import { clampRange, stepRange } from "../../lib/range-value";
+import { RollingDigit } from "./rolling-digit";
 
-export type StepperSize = "sm" | "md" | "lg"
+export type StepperSize = "sm" | "md" | "lg";
 
 const labelText: Record<StepperSize, string> = {
-    sm: "min-w-0 text-footnote text-label",
-    md: "min-w-0 text-subheadline text-label",
-    lg: "min-w-0 text-body text-label",
-}
+	sm: "min-w-0 text-footnote text-label",
+	md: "min-w-0 text-subheadline text-label",
+	lg: "min-w-0 text-body text-label",
+};
 const outputText: Record<StepperSize, string> = {
-    sm: "text-footnote tabular-nums text-label",
-    md: "text-subheadline tabular-nums text-label",
-    lg: "text-body tabular-nums text-label",
-}
+	sm: "text-footnote tabular-nums text-label",
+	md: "text-subheadline tabular-nums text-label",
+	lg: "text-body tabular-nums text-label",
+};
 const buttonSizes: Record<StepperSize, { size: ButtonSize; cls: string }> = {
-    sm: {
-        size: "icon-sm",
-        cls: "size-7 rounded-none text-subheadline text-accent-text [@media(pointer:coarse)]:size-10",
-    },
-    md: {
-        size: "icon",
-        cls: "size-8 rounded-none text-title3 text-accent-text [@media(pointer:coarse)]:size-11",
-    },
-    lg: {
-        size: "icon-lg",
-        cls: "size-9 rounded-none text-title2 text-accent-text [@media(pointer:coarse)]:size-12",
-    },
-}
+	sm: {
+		size: "icon-sm",
+		cls: "size-7 rounded-none text-subheadline text-accent-text [@media(pointer:coarse)]:size-10",
+	},
+	md: {
+		size: "icon",
+		cls: "size-8 rounded-none text-title3 text-accent-text [@media(pointer:coarse)]:size-11",
+	},
+	lg: {
+		size: "icon-lg",
+		cls: "size-9 rounded-none text-title2 text-accent-text [@media(pointer:coarse)]:size-12",
+	},
+};
 
 export interface StepperProps {
-    value: number
-    onChange: (value: number) => void
-    label: string
-    /** Localized accessible names for each action. */
-    labels: { decrement: string; increment: string }
-    min?: number
-    max?: number
-    step?: number
-    disabled?: boolean
-    className?: string
-    /** Formats the displayed value. */
-    formatValue?: (value: number) => string
-    /** Label, output and +/- button scale. @default "md" */
-    size?: StepperSize
+	value: number;
+	onChange: (value: number) => void;
+	label: string;
+	/** Localized accessible names for each action. */
+	labels: { decrement: string; increment: string };
+	min?: number;
+	max?: number;
+	step?: number;
+	disabled?: boolean;
+	className?: string;
+	/** Formats the displayed value. */
+	formatValue?: (value: number) => string;
+	/** Label, output and +/- button scale. @default "md" */
+	size?: StepperSize;
 }
 
 /** Discrete increments with disabled boundary actions and a spoken value. */
 export function Stepper({
-    value,
-    onChange,
-    label,
-    labels,
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled = false,
-    className,
-    formatValue,
-    size = "md",
+	value,
+	onChange,
+	label,
+	labels,
+	min = 0,
+	max = 100,
+	step = 1,
+	disabled = false,
+	className,
+	formatValue,
+	size = "md",
 }: StepperProps) {
-    const id = useId()
-    const upper = Math.max(min, max)
-    const current = clampRange(value, min, upper)
-    const decrement = stepRange(current, -1, min, upper, step > 0 ? step : 1)
-    const increment = stepRange(current, 1, min, upper, step > 0 ? step : 1)
-    const displayed = formatValue?.(current) ?? String(current)
-    const digits = displayed.replace(/[^0-9]/g, "")
-    let digitIndex = 0
+	const id = useId();
+	const upper = Math.max(min, max);
+	const current = clampRange(value, min, upper);
+	const decrement = stepRange(current, -1, min, upper, step > 0 ? step : 1);
+	const increment = stepRange(current, 1, min, upper, step > 0 ? step : 1);
+	const displayed = formatValue?.(current) ?? String(current);
+	const digits = displayed.replace(/[^0-9]/g, "");
+	let digitIndex = 0;
 
-    return (
-        <div className={cn("flex min-w-0 items-center justify-between gap-3", className)}>
-            <span id={id} className={labelText[size]}>
-                {label}
-            </span>
-            <div className="flex shrink-0 items-center gap-3">
-                <output aria-live="polite" aria-labelledby={id} className={outputText[size]}>
-                    <span aria-hidden="true" className="inline-flex items-center">
-                        {Array.from(displayed).map((character, index) => {
-                            if (!/[0-9]/.test(character))
-                                return <span key={`separator-${index}`}>{character}</span>
-                            const prefix = digits.slice(0, ++digitIndex)
-                            const place = digits.length - digitIndex
-                            return (
-                                <RollingDigit
-                                    key={`place-${place}`}
-                                    count={Number(prefix)}
-                                    place={place}
-                                />
-                            )
-                        })}
-                    </span>
-                    <span className="sr-only">{displayed}</span>
-                </output>
-                <div className="flex items-center divide-x divide-separator overflow-hidden rounded-lg bg-fill">
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size={buttonSizes[size].size}
-                        aria-label={labels.decrement}
-                        aria-describedby={id}
-                        disabled={disabled || decrement === current}
-                        onClick={() => onChange(decrement)}
-                        className={buttonSizes[size].cls}
-                    >
-                        −
-                    </Button>
-                    <Button
-                        type="button"
-                        variant="ghost"
-                        size={buttonSizes[size].size}
-                        aria-label={labels.increment}
-                        aria-describedby={id}
-                        disabled={disabled || increment === current}
-                        onClick={() => onChange(increment)}
-                        className={buttonSizes[size].cls}
-                    >
-                        +
-                    </Button>
-                </div>
-            </div>
-        </div>
-    )
+	return (
+		<div
+			className={cn(
+				"flex min-w-0 items-center justify-between gap-3",
+				className,
+			)}
+		>
+			<span id={id} className={labelText[size]}>
+				{label}
+			</span>
+			<div className="flex shrink-0 items-center gap-3">
+				<output
+					aria-live="polite"
+					aria-labelledby={id}
+					className={outputText[size]}
+				>
+					<span aria-hidden="true" className="inline-flex items-center">
+						{Array.from(displayed).map((character) => {
+							if (!/[0-9]/.test(character))
+								return <span key={`sep-${character}`}>{character}</span>;
+							const prefix = digits.slice(0, ++digitIndex);
+							const place = digits.length - digitIndex;
+							return (
+								<RollingDigit
+									key={`place-${place}`}
+									count={Number(prefix)}
+									place={place}
+								/>
+							);
+						})}
+					</span>
+					<span className="sr-only">{displayed}</span>
+				</output>
+				<div className="divide-separator bg-fill flex items-center divide-x overflow-hidden rounded-lg">
+					<Button
+						type="button"
+						variant="ghost"
+						size={buttonSizes[size].size}
+						aria-label={labels.decrement}
+						aria-describedby={id}
+						disabled={disabled || decrement === current}
+						onClick={() => onChange(decrement)}
+						className={buttonSizes[size].cls}
+					>
+						−
+					</Button>
+					<Button
+						type="button"
+						variant="ghost"
+						size={buttonSizes[size].size}
+						aria-label={labels.increment}
+						aria-describedby={id}
+						disabled={disabled || increment === current}
+						onClick={() => onChange(increment)}
+						className={buttonSizes[size].cls}
+					>
+						+
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
 }

package/src/components/swatch-picker/swatch-picker.tsx

@@ -1,138 +1,138 @@
-import { motion } from "motion/react"
-import { useId } from "react"
-import { CheckIcon } from "../../icons/icons"
-import { cn } from "../../lib/class-names"
-import { haptic } from "../../lib/haptics"
-import { spring } from "../../motion/transitions"
+import { motion } from "motion/react";
+import { useId } from "react";
+import { CheckIcon } from "../../icons/icons";
+import { cn } from "../../lib/class-names";
+import { haptic } from "../../lib/haptics";
+import { spring } from "../../motion/transitions";
 
 export interface SwatchPickerOption<T extends string> {
-    value: T
-    label: string
-    /** Swatch background color. */
-    color: string
-    /** Color of the selected checkmark. */
-    ink: string
+	value: T;
+	label: string;
+	/** Swatch background color. */
+	color: string;
+	/** Color of the selected checkmark. */
+	ink: string;
 }
 
-export type SwatchPickerSize = "sm" | "md" | "lg"
+export type SwatchPickerSize = "sm" | "md" | "lg";
 
 const swatchSizes: Record<SwatchPickerSize, string> = {
-    sm: "size-6",
-    md: "size-8",
-    lg: "size-10",
-}
+	sm: "size-6",
+	md: "size-8",
+	lg: "size-10",
+};
 const checkSizes: Record<SwatchPickerSize, number> = {
-    sm: 13,
-    md: 16,
-    lg: 19,
-}
+	sm: 13,
+	md: 16,
+	lg: 19,
+};
 const captionText: Record<SwatchPickerSize, string> = {
-    sm: "text-caption2",
-    md: "text-caption2",
-    lg: "text-caption",
-}
+	sm: "text-caption2",
+	md: "text-caption2",
+	lg: "text-caption",
+};
 const fieldsetGaps: Record<SwatchPickerSize, string> = {
-    sm: "gap-2",
-    md: "gap-3",
-    lg: "gap-4",
-}
+	sm: "gap-2",
+	md: "gap-3",
+	lg: "gap-4",
+};
 const labelGaps: Record<SwatchPickerSize, string> = {
-    sm: "gap-1",
-    md: "gap-1.5",
-    lg: "gap-2",
-}
+	sm: "gap-1",
+	md: "gap-1.5",
+	lg: "gap-2",
+};
 
 export interface SwatchPickerProps<T extends string> {
-    value: T
-    options: ReadonlyArray<SwatchPickerOption<T>>
-    onChange: (value: T) => void
-    /** Accessible name for the group. */
-    label: string
-    /** Custom classes for the swatch container. */
-    className?: string
-    /** Swatch diameter, check icon and caption scale. @default "md" */
-    size?: SwatchPickerSize
+	value: T;
+	options: ReadonlyArray<SwatchPickerOption<T>>;
+	onChange: (value: T) => void;
+	/** Accessible name for the group. */
+	label: string;
+	/** Custom classes for the swatch container. */
+	className?: string;
+	/** Swatch diameter, check icon and caption scale. @default "md" */
+	size?: SwatchPickerSize;
 }
 
 /** Colour swatches with a check on the chosen one. */
 export function SwatchPicker<T extends string>({
-    value,
-    options,
-    onChange,
-    label,
-    className,
-    size = "md",
+	value,
+	options,
+	onChange,
+	label,
+	className,
+	size = "md",
 }: SwatchPickerProps<T>) {
-    const name = useId()
-    return (
-        <fieldset className={cn("flex flex-wrap", fieldsetGaps[size], className)}>
-            <legend className="sr-only">{label}</legend>
-            {options.map((option) => {
-                const selected = option.value === value
-                return (
-                    <label
-                        key={option.value}
-                        className={cn(
-                            "group flex cursor-pointer flex-col items-center",
-                            labelGaps[size]
-                        )}
-                    >
-                        <input
-                            type="radio"
-                            name={name}
-                            value={option.value}
-                            checked={selected}
-                            onChange={() => {
-                                haptic("selection")
-                                onChange(option.value)
-                            }}
-                            className="peer sr-only"
-                        />
-                        <span
-                            className={cn(
-                                "flex items-center justify-center rounded-full ring-offset-1 ring-offset-elevated transition-[box-shadow,transform] duration-fast group-active:scale-95 peer-focus-visible:ring-2 peer-focus-visible:ring-accent",
-                                swatchSizes[size],
-                                selected
-                                    ? "ring-[1.5px] ring-label/70"
-                                    : "ring-0 group-hover:ring-[1.5px] group-hover:ring-separator"
-                            )}
-                            style={{
-                                background: option.color,
-                            }}
-                        >
-                            {selected && (
-                                <motion.span
-                                    initial={{
-                                        scale: 0.4,
-                                        opacity: 0,
-                                    }}
-                                    animate={{
-                                        scale: 1,
-                                        opacity: 1,
-                                    }}
-                                    transition={spring.bouncy}
-                                >
-                                    <CheckIcon
-                                        size={checkSizes[size]}
-                                        strokeWidth={2.6}
-                                        style={{
-                                            color: option.ink,
-                                        }}
-                                    />
-                                </motion.span>
-                            )}
-                        </span>
-                        <span
-                            className={cn(
-                                captionText[size],
-                                selected ? "font-semibold text-label" : "text-label-tertiary"
-                            )}
-                        >
-                            {option.label}
-                        </span>
-                    </label>
-                )
-            })}
-        </fieldset>
-    )
+	const name = useId();
+	return (
+		<fieldset className={cn("flex flex-wrap", fieldsetGaps[size], className)}>
+			<legend className="sr-only">{label}</legend>
+			{options.map((option) => {
+				const selected = option.value === value;
+				return (
+					<label
+						key={option.value}
+						className={cn(
+							"group flex cursor-pointer flex-col items-center",
+							labelGaps[size],
+						)}
+					>
+						<input
+							type="radio"
+							name={name}
+							value={option.value}
+							checked={selected}
+							onChange={() => {
+								haptic("selection");
+								onChange(option.value);
+							}}
+							className="peer sr-only"
+						/>
+						<span
+							className={cn(
+								"ring-offset-elevated duration-fast peer-focus-visible:ring-accent flex items-center justify-center rounded-full ring-offset-1 transition-[box-shadow,transform] group-active:scale-95 peer-focus-visible:ring-2",
+								swatchSizes[size],
+								selected
+									? "ring-label/70 ring-[1.5px]"
+									: "group-hover:ring-separator ring-0 group-hover:ring-[1.5px]",
+							)}
+							style={{
+								background: option.color,
+							}}
+						>
+							{selected && (
+								<motion.span
+									initial={{
+										scale: 0.4,
+										opacity: 0,
+									}}
+									animate={{
+										scale: 1,
+										opacity: 1,
+									}}
+									transition={spring.bouncy}
+								>
+									<CheckIcon
+										size={checkSizes[size]}
+										strokeWidth={2.6}
+										style={{
+											color: option.ink,
+										}}
+									/>
+								</motion.span>
+							)}
+						</span>
+						<span
+							className={cn(
+								captionText[size],
+								selected ? "text-label font-semibold" : "text-label-tertiary",
+							)}
+						>
+							{option.label}
+						</span>
+					</label>
+				);
+			})}
+		</fieldset>
+	);
 }