@passui/react 0.1.44 → 0.1.46

package/src/components/dialog/dialog.tsx

@@ -1,198 +1,211 @@
-import { Sheet } from "../sheet/sheet"
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import { Button } from "../button/button"
-import { cn } from "../../lib/class-names"
-import { contentCrossfade, spring, zoomReveal } from "../../motion/transitions"
-import { createContext, useContext, useId, type FormEvent, type ReactNode } from "react"
+import { Sheet } from "../sheet/sheet";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Button } from "../button/button";
+import { cn } from "../../lib/class-names";
+import { contentCrossfade, spring } from "../../motion/transitions";
+import {
+	createContext,
+	useContext,
+	useId,
+	type FormEvent,
+	type ReactNode,
+} from "react";
 
-const CloseContext = createContext<() => void>(() => {})
-export type DialogPresentation = "drawer" | "center" | "inline"
-export type DialogTone = "default" | "destructive"
-export type DialogSize = "sm" | "md" | "lg"
+const CloseContext = createContext<() => void>(() => {});
+export type DialogPresentation = "drawer" | "center" | "inline";
+export type DialogTone = "default" | "destructive";
+export type DialogSize = "sm" | "md" | "lg";
 
 const titleText: Record<DialogSize, string> = {
-    sm: "text-subheadline",
-    md: "text-title3",
-    lg: "text-title2",
-}
+	sm: "text-subheadline",
+	md: "text-title3",
+	lg: "text-title2",
+};
 const descriptionText: Record<DialogSize, string> = {
-    sm: "text-caption",
-    md: "text-footnote",
-    lg: "text-subheadline",
-}
+	sm: "text-caption",
+	md: "text-footnote",
+	lg: "text-subheadline",
+};
 const bodySpacing: Record<DialogSize, string> = {
-    sm: "gap-3 p-4",
-    md: "gap-4 p-5",
-    lg: "gap-5 p-6",
-}
+	sm: "gap-3 p-4",
+	md: "gap-4 p-5",
+	lg: "gap-5 p-6",
+};
 const footerSpacing: Record<DialogSize, string> = {
-    sm: "pt-2",
-    md: "pt-3",
-    lg: "pt-4",
-}
+	sm: "pt-2",
+	md: "pt-3",
+	lg: "pt-4",
+};
 
 export type DialogProps = {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    title: ReactNode
-    description?: ReactNode
-    children?: ReactNode
-    footer?: ReactNode
-    /** `drawer` (responsive sheet), `center` (floating panel), or `inline`. @default "drawer" */
-    presentation?: DialogPresentation
-    /** Title, description, body and footer density. @default "md" */
-    size?: DialogSize
-    className?: string
-    onSubmit?: (event: FormEvent<HTMLFormElement>) => void
-}
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	title: ReactNode;
+	description?: ReactNode;
+	children?: ReactNode;
+	footer?: ReactNode;
+	/** `drawer` (responsive sheet), `center` (floating panel), or `inline`. @default "drawer" */
+	presentation?: DialogPresentation;
+	/** Title, description, body and footer density. @default "md" */
+	size?: DialogSize;
+	className?: string;
+	onSubmit?: (event: FormEvent<HTMLFormElement>) => void;
+};
 type ActionsProps = {
-    submitLabel: ReactNode
-    cancelLabel: ReactNode
-    pending?: boolean
-    disabled?: boolean
-    tone?: DialogTone
-    onConfirm?: () => void
-}
+	submitLabel: ReactNode;
+	cancelLabel: ReactNode;
+	pending?: boolean;
+	disabled?: boolean;
+	tone?: DialogTone;
+	onConfirm?: () => void;
+};
 
 export function Dialog({
-    open,
-    onOpenChange,
-    title,
-    description,
-    children,
-    footer,
-    presentation = "drawer",
-    size = "md",
-    className,
-    onSubmit,
+	open,
+	onOpenChange,
+	title,
+	description,
+	children,
+	footer,
+	presentation = "drawer",
+	size = "md",
+	className,
+	onSubmit,
 }: DialogProps) {
-    const titleId = useId()
-    const reducedMotion = useReducedMotion()
-    const close = () => onOpenChange(false)
-    const content = (
-        <>
-            {presentation !== "inline" && (
-                <h2 id={titleId} className={cn(titleText[size], "font-semibold")}>
-                    {title}
-                </h2>
-            )}
-            {description && (
-                <div className={cn(descriptionText[size], "text-label-secondary")}>
-                    {description}
-                </div>
-            )}
-            {children && <div className="flex flex-col gap-4">{children}</div>}
-            {footer && (
-                <div className={cn("flex flex-wrap justify-end gap-2", footerSpacing[size])}>
-                    {footer}
-                </div>
-            )}
-        </>
-    )
-    const body = (
-        <CloseContext value={close}>
-            {onSubmit ? (
-                <form
-                    onSubmit={onSubmit}
-                    className={cn(
-                        "flex min-h-0 flex-col overflow-y-auto",
-                        bodySpacing[size],
-                        className
-                    )}
-                >
-                    {content}
-                </form>
-            ) : (
-                <div
-                    className={cn(
-                        "flex min-h-0 flex-col overflow-y-auto",
-                        bodySpacing[size],
-                        className
-                    )}
-                >
-                    {content}
-                </div>
-            )}
-        </CloseContext>
-    )
-    if (presentation === "inline")
-        return (
-            <AnimatePresence initial={false}>
-                {open && (
-                    <motion.div
-                        key={titleId}
-                        initial={{
-                            height: reducedMotion ? "auto" : 0,
-                            opacity: 0,
-                            scale: reducedMotion ? 1 : 0.97,
-                        }}
-                        animate={{
-                            height: "auto",
-                            opacity: 1,
-                            scale: 1,
-                        }}
-                        exit={{
-                            height: reducedMotion ? "auto" : 0,
-                            opacity: 0,
-                            scale: reducedMotion ? 1 : 0.98,
-                        }}
-                        transition={reducedMotion ? { duration: 0 } : spring.bouncy}
-                        className="overflow-hidden"
-                        style={{ transformOrigin: "top center" }}
-                    >
-                        <motion.div
-                            initial={reducedMotion ? false : contentCrossfade.initial}
-                            animate={reducedMotion ? undefined : contentCrossfade.animate}
-                            transition={
-                                reducedMotion ? { duration: 0 } : contentCrossfade.transition
-                            }
-                        >
-                            {body}
-                        </motion.div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        )
-    return (
-        <Sheet
-            open={open}
-            onClose={close}
-            label=""
-            labelledBy={titleId}
-            placement={presentation === "center" ? "center" : "adaptive"}
-        >
-            {body}
-        </Sheet>
-    )
+	const titleId = useId();
+	const reducedMotion = useReducedMotion();
+	const close = () => onOpenChange(false);
+	const content = (
+		<>
+			{presentation !== "inline" && (
+				<h2 id={titleId} className={cn(titleText[size], "font-semibold")}>
+					{title}
+				</h2>
+			)}
+			{description && (
+				<div className={cn(descriptionText[size], "text-label-secondary")}>
+					{description}
+				</div>
+			)}
+			{children && <div className="flex flex-col gap-4">{children}</div>}
+			{footer && (
+				<div
+					className={cn(
+						"flex flex-wrap justify-end gap-2",
+						footerSpacing[size],
+					)}
+				>
+					{footer}
+				</div>
+			)}
+		</>
+	);
+	const body = (
+		<CloseContext value={close}>
+			{onSubmit ? (
+				<form
+					onSubmit={onSubmit}
+					className={cn(
+						"flex min-h-0 flex-col overflow-y-auto",
+						bodySpacing[size],
+						className,
+					)}
+				>
+					{content}
+				</form>
+			) : (
+				<div
+					className={cn(
+						"flex min-h-0 flex-col overflow-y-auto",
+						bodySpacing[size],
+						className,
+					)}
+				>
+					{content}
+				</div>
+			)}
+		</CloseContext>
+	);
+	if (presentation === "inline")
+		return (
+			<AnimatePresence initial={false}>
+				{open && (
+					<motion.div
+						key={titleId}
+						initial={{
+							height: reducedMotion ? "auto" : 0,
+							opacity: 0,
+							scale: reducedMotion ? 1 : 0.97,
+						}}
+						animate={{
+							height: "auto",
+							opacity: 1,
+							scale: 1,
+						}}
+						exit={{
+							height: reducedMotion ? "auto" : 0,
+							opacity: 0,
+							scale: reducedMotion ? 1 : 0.98,
+						}}
+						transition={reducedMotion ? { duration: 0 } : spring.bouncy}
+						className="overflow-hidden"
+						style={{ transformOrigin: "top center" }}
+					>
+						<motion.div
+							initial={reducedMotion ? false : contentCrossfade.initial}
+							animate={reducedMotion ? undefined : contentCrossfade.animate}
+							transition={
+								reducedMotion ? { duration: 0 } : contentCrossfade.transition
+							}
+						>
+							{body}
+						</motion.div>
+					</motion.div>
+				)}
+			</AnimatePresence>
+		);
+	return (
+		<Sheet
+			open={open}
+			onClose={close}
+			label=""
+			labelledBy={titleId}
+			placement={presentation === "center" ? "center" : "adaptive"}
+		>
+			{body}
+		</Sheet>
+	);
 }
 
 /** The standard footer: a primary action and a cancel that closes the dialog. */
 function Actions({
-    submitLabel,
-    cancelLabel,
-    pending = false,
-    disabled = false,
-    tone = "default",
-    onConfirm,
+	submitLabel,
+	cancelLabel,
+	pending = false,
+	disabled = false,
+	tone = "default",
+	onConfirm,
 }: ActionsProps) {
-    const close = useContext(CloseContext)
-    return (
-        <>
-            <Button
-                type={onConfirm ? "button" : "submit"}
-                variant={tone === "destructive" ? "ghost" : "default"}
-                className={tone === "destructive" ? "bg-danger/10 text-danger" : undefined}
-                isPending={pending}
-                disabled={disabled}
-                onClick={onConfirm}
-            >
-                {submitLabel}
-            </Button>
-            <Button type="button" variant="secondary" onClick={close}>
-                {cancelLabel}
-            </Button>
-        </>
-    )
+	const close = useContext(CloseContext);
+	return (
+		<>
+			<Button
+				type={onConfirm ? "button" : "submit"}
+				variant={tone === "destructive" ? "ghost" : "default"}
+				className={
+					tone === "destructive" ? "bg-danger/10 text-danger" : undefined
+				}
+				isPending={pending}
+				disabled={disabled}
+				onClick={onConfirm}
+			>
+				{submitLabel}
+			</Button>
+			<Button type="button" variant="secondary" onClick={close}>
+				{cancelLabel}
+			</Button>
+		</>
+	);
 }
 
-Dialog.Actions = Actions
+Dialog.Actions = Actions;

package/src/components/dialog/index.ts

@@ -1 +1 @@
-export * from "./dialog"
+export * from "./dialog";

package/src/components/disclosure-group/disclosure-group.tsx

@@ -1,101 +1,108 @@
-import { Button } from "../button/button"
-import { type ReactNode, useId } from "react"
-import { ChevronDownIcon } from "../../icons/icons"
-import { cn } from "../../lib/class-names"
-import { InlineDisclosure } from "../inline-disclosure/inline-disclosure"
+import { Button } from "../button/button";
+import { type ReactNode, useId } from "react";
+import { ChevronDownIcon } from "../../icons/icons";
+import { cn } from "../../lib/class-names";
+import { InlineDisclosure } from "../inline-disclosure/inline-disclosure";
 
-export type DisclosureGroupSize = "sm" | "md" | "lg"
+export type DisclosureGroupSize = "sm" | "md" | "lg";
 
 const triggerSizes: Record<DisclosureGroupSize, string> = {
-    sm: "h-auto min-h-9 w-full rounded-lg px-3 py-2 text-start text-footnote active:scale-100",
-    md: "h-auto min-h-11 w-full rounded-xl px-4 py-3 text-start text-subheadline active:scale-100",
-    lg: "h-auto min-h-13 w-full rounded-2xl px-5 py-4 text-start text-body active:scale-100",
-}
+	sm: "h-auto min-h-9 w-full rounded-lg px-3 py-2 text-start text-footnote active:scale-100",
+	md: "h-auto min-h-11 w-full rounded-xl px-4 py-3 text-start text-subheadline active:scale-100",
+	lg: "h-auto min-h-13 w-full rounded-2xl px-5 py-4 text-start text-body active:scale-100",
+};
 const descriptionSizes: Record<DisclosureGroupSize, string> = {
-    sm: "text-caption2 leading-caption2 font-normal break-words whitespace-normal text-label-secondary",
-    md: "text-footnote leading-footnote font-normal break-words whitespace-normal text-label-secondary",
-    lg: "text-subheadline leading-subheadline font-normal break-words whitespace-normal text-label-secondary",
-}
+	sm: "text-caption2 leading-caption2 font-normal break-words whitespace-normal text-label-secondary",
+	md: "text-footnote leading-footnote font-normal break-words whitespace-normal text-label-secondary",
+	lg: "text-subheadline leading-subheadline font-normal break-words whitespace-normal text-label-secondary",
+};
 const contentSizes: Record<DisclosureGroupSize, string> = {
-    sm: "min-w-0 px-3 pb-3 text-footnote leading-footnote text-label-secondary [overflow-wrap:anywhere]",
-    md: "min-w-0 px-4 pb-4 text-subheadline leading-subheadline text-label-secondary [overflow-wrap:anywhere]",
-    lg: "min-w-0 px-5 pb-5 text-body leading-body text-label-secondary [overflow-wrap:anywhere]",
-}
+	sm: "min-w-0 px-3 pb-3 text-footnote leading-footnote text-label-secondary [overflow-wrap:anywhere]",
+	md: "min-w-0 px-4 pb-4 text-subheadline leading-subheadline text-label-secondary [overflow-wrap:anywhere]",
+	lg: "min-w-0 px-5 pb-5 text-body leading-body text-label-secondary [overflow-wrap:anywhere]",
+};
 const chevronSizes: Record<DisclosureGroupSize, number> = {
-    sm: 15,
-    md: 17,
-    lg: 19,
-}
+	sm: 15,
+	md: 17,
+	lg: 19,
+};
 
 export interface DisclosureGroupProps {
-    label: string
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    children: ReactNode
-    disabled?: boolean
-    className?: string
-    /** Trigger layout when composed inside a shared surface such as Accordion. */
-    triggerClassName?: string
-    /** Supporting text beneath the title. */
-    description?: string
-    /** Trigger, description and content density. @default "md" */
-    size?: DisclosureGroupSize
+	label: string;
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	children: ReactNode;
+	disabled?: boolean;
+	className?: string;
+	/** Trigger layout when composed inside a shared surface such as Accordion. */
+	triggerClassName?: string;
+	/** Supporting text beneath the title. */
+	description?: string;
+	/** Trigger, description and content density. @default "md" */
+	size?: DisclosureGroupSize;
 }
 
 /** A controlled, accessible disclosure row with the shared inline reveal. */
 export function DisclosureGroup({
-    label,
-    open,
-    onOpenChange,
-    children,
-    disabled = false,
-    className,
-    triggerClassName,
-    description,
-    size = "md",
+	label,
+	open,
+	onOpenChange,
+	children,
+	disabled = false,
+	className,
+	triggerClassName,
+	description,
+	size = "md",
 }: DisclosureGroupProps) {
-    const id = useId()
+	const id = useId();
 
-    return (
-        <div className={cn("w-full min-w-0", className)}>
-            <h3 className="m-0">
-                <Button
-                    variant="ghost"
-                    contentClassName="w-full min-w-0 justify-between gap-3"
-                    type="button"
-                    id={`${id}-trigger`}
-                    aria-expanded={open}
-                    aria-controls={id}
-                    disabled={disabled}
-                    onClick={() => onOpenChange(!open)}
-                    className={cn(
-                        triggerSizes[size],
-                        "font-normal text-label hover:bg-fill/60 focus-visible:ring-inset focus-visible:ring-offset-0",
-                        "focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-40",
-                        triggerClassName
-                    )}
-                >
-                    <span className="flex min-w-0 flex-col gap-0.5">
-                        <span className="font-medium break-words whitespace-normal">{label}</span>
-                        {description && (
-                            <span className={descriptionSizes[size]}>{description}</span>
-                        )}
-                    </span>
-                    <ChevronDownIcon
-                        size={chevronSizes[size]}
-                        aria-hidden="true"
-                        className={cn(
-                            "shrink-0 text-label-tertiary transition-transform duration-normal motion-reduce:transition-none",
-                            open && "rotate-180"
-                        )}
-                    />
-                </Button>
-            </h3>
-            <section id={id} aria-labelledby={`${id}-trigger`} aria-hidden={!open} inert={!open}>
-                <InlineDisclosure open={open}>
-                    <div className={contentSizes[size]}>{children}</div>
-                </InlineDisclosure>
-            </section>
-        </div>
-    )
+	return (
+		<div className={cn("w-full min-w-0", className)}>
+			<h3 className="m-0">
+				<Button
+					variant="ghost"
+					contentClassName="w-full min-w-0 justify-between gap-3"
+					type="button"
+					id={`${id}-trigger`}
+					aria-expanded={open}
+					aria-controls={id}
+					disabled={disabled}
+					onClick={() => onOpenChange(!open)}
+					className={cn(
+						triggerSizes[size],
+						"text-label hover:bg-fill/60 font-normal focus-visible:ring-offset-0 focus-visible:ring-inset",
+						"focus-visible:outline-accent-text disabled:cursor-not-allowed disabled:opacity-40",
+						triggerClassName,
+					)}
+				>
+					<span className="flex min-w-0 flex-col gap-0.5">
+						<span className="font-medium break-words whitespace-normal">
+							{label}
+						</span>
+						{description && (
+							<span className={descriptionSizes[size]}>{description}</span>
+						)}
+					</span>
+					<ChevronDownIcon
+						size={chevronSizes[size]}
+						aria-hidden="true"
+						className={cn(
+							"text-label-tertiary duration-normal shrink-0 transition-transform motion-reduce:transition-none",
+							open && "rotate-180",
+						)}
+					/>
+				</Button>
+			</h3>
+			<section
+				id={id}
+				aria-labelledby={`${id}-trigger`}
+				aria-hidden={!open}
+				inert={!open}
+			>
+				<InlineDisclosure open={open}>
+					<div className={contentSizes[size]}>{children}</div>
+				</InlineDisclosure>
+			</section>
+		</div>
+	);
 }

package/src/components/divider/divider.tsx

@@ -1,31 +1,33 @@
-import type { HTMLAttributes } from "react"
-import { cn } from "../../lib/class-names"
+import type { HTMLAttributes } from "react";
+import { cn } from "../../lib/class-names";
 
-export type DividerOrientation = "horizontal" | "vertical"
+export type DividerOrientation = "horizontal" | "vertical";
 
 export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
-    orientation?: DividerOrientation
-    /** Decorative separators are omitted from the accessibility tree. @default true */
-    decorative?: boolean
+	orientation?: DividerOrientation;
+	/** Decorative separators are omitted from the accessibility tree. @default true */
+	decorative?: boolean;
 }
 
 /** A semantic separator using the shared surface color. */
 export function Divider({
-    orientation = "horizontal",
-    decorative = true,
-    className,
-    ...props
+	orientation = "horizontal",
+	decorative = true,
+	className,
+	...props
 }: DividerProps) {
-    return (
-        <hr
-            {...props}
-            role={decorative ? "none" : "separator"}
-            aria-orientation={decorative ? undefined : orientation}
-            className={cn(
-                "shrink-0 border-0 bg-separator",
-                orientation === "horizontal" ? "h-px w-full" : "h-full w-px self-stretch",
-                className
-            )}
-        />
-    )
+	return (
+		<hr
+			{...props}
+			role={decorative ? "none" : "separator"}
+			aria-orientation={decorative ? undefined : orientation}
+			className={cn(
+				"bg-separator shrink-0 border-0",
+				orientation === "horizontal"
+					? "h-px w-full"
+					: "h-full w-px self-stretch",
+				className,
+			)}
+		/>
+	);
 }