@passui/react 0.1.45 → 0.1.46

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

@@ -1,13 +1,13 @@
-import { AnimatePresence, motion, useReducedMotion } from "motion/react"
-import type { ReactNode } from "react"
-import { cn } from "../../lib/class-names"
-import { spring } from "../../motion/transitions"
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import type { ReactNode } from "react";
+import { cn } from "../../lib/class-names";
+import { spring } from "../../motion/transitions";
 
 export interface InlineDisclosureProps {
-    /** Whether the content is expanded. */
-    open: boolean
-    children: ReactNode
-    className?: string
+	/** Whether the content is expanded. */
+	open: boolean;
+	children: ReactNode;
+	className?: string;
 }
 
 /**
@@ -17,33 +17,37 @@ export interface InlineDisclosureProps {
  * instead of jumping. Motion is disabled when the user requests less motion.
  * The content unmounts after its exit animation completes.
  */
-export function InlineDisclosure({ open, children, className }: InlineDisclosureProps) {
-    const reduceMotion = useReducedMotion()
+export function InlineDisclosure({
+	open,
+	children,
+	className,
+}: InlineDisclosureProps) {
+	const reduceMotion = useReducedMotion();
 
-    return (
-        <AnimatePresence initial={false}>
-            {open && (
-                <motion.div
-                    key="inline-disclosure"
-                    initial={reduceMotion ? false : { height: 0, opacity: 0 }}
-                    animate={{ height: "auto", opacity: 1 }}
-                    exit={reduceMotion ? { opacity: 0 } : { height: 0, opacity: 0 }}
-                    transition={
-                        reduceMotion
-                            ? { duration: 0 }
-                            : {
-                                  height: spring.smooth,
-                                  opacity: {
-                                      duration: 0.18,
-                                      ease: "easeOut",
-                                  },
-                              }
-                    }
-                    className={cn("overflow-hidden", className)}
-                >
-                    {children}
-                </motion.div>
-            )}
-        </AnimatePresence>
-    )
+	return (
+		<AnimatePresence initial={false}>
+			{open && (
+				<motion.div
+					key="inline-disclosure"
+					initial={reduceMotion ? false : { height: 0, opacity: 0 }}
+					animate={{ height: "auto", opacity: 1 }}
+					exit={reduceMotion ? { opacity: 0 } : { height: 0, opacity: 0 }}
+					transition={
+						reduceMotion
+							? { duration: 0 }
+							: {
+									height: spring.smooth,
+									opacity: {
+										duration: 0.18,
+										ease: "easeOut",
+									},
+								}
+					}
+					className={cn("overflow-hidden", className)}
+				>
+					{children}
+				</motion.div>
+			)}
+		</AnimatePresence>
+	);
 }

package/src/components/keyboard-shortcut/keyboard-shortcut.tsx

@@ -1,28 +1,32 @@
-import type { ComponentProps } from "react"
-import { cn } from "../../lib/class-names"
+import type { ComponentProps } from "react";
+import { cn } from "../../lib/class-names";
 
-export type KeyboardShortcutSize = "sm" | "md"
+export type KeyboardShortcutSize = "sm" | "md";
 
 const sizes: Record<KeyboardShortcutSize, string> = {
-    sm: "px-1 py-0 text-caption2",
-    md: "px-1.5 py-0.5 text-caption2",
-}
+	sm: "px-1 py-0 text-caption2",
+	md: "px-1.5 py-0.5 text-caption2",
+};
 
 export interface KeyboardShortcutProps extends ComponentProps<"kbd"> {
-    /** Keycap padding density. Text stays at caption2 in both sizes. @default "md" */
-    size?: KeyboardShortcutSize
+	/** Keycap padding density. Text stays at caption2 in both sizes. @default "md" */
+	size?: KeyboardShortcutSize;
 }
 
 /** A quiet keycap for a shortcut supplied and localized by the application. */
-export function KeyboardShortcut({ size = "md", className, ...props }: KeyboardShortcutProps) {
-    return (
-        <kbd
-            {...props}
-            className={cn(
-                "inline-flex shrink-0 items-center rounded-md border border-separator/70 bg-fill/50 font-mono leading-none text-label-secondary",
-                sizes[size],
-                className
-            )}
-        />
-    )
+export function KeyboardShortcut({
+	size = "md",
+	className,
+	...props
+}: KeyboardShortcutProps) {
+	return (
+		<kbd
+			{...props}
+			className={cn(
+				"border-separator/70 bg-fill/50 text-label-secondary inline-flex shrink-0 items-center rounded-md border font-mono leading-none",
+				sizes[size],
+				className,
+			)}
+		/>
+	);
 }

package/src/components/labeled-content/labeled-content.tsx

@@ -1,27 +1,27 @@
-import type { HTMLAttributes, ReactNode } from "react"
-import { cn } from "../../lib/class-names"
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "../../lib/class-names";
 
-export type LabeledContentSize = "sm" | "md" | "lg"
+export type LabeledContentSize = "sm" | "md" | "lg";
 
 const padding: Record<LabeledContentSize, string> = {
-    sm: "px-3 py-2",
-    md: "px-4 py-3",
-    lg: "px-5 py-4",
-}
+	sm: "px-3 py-2",
+	md: "px-4 py-3",
+	lg: "px-5 py-4",
+};
 
 export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
-    /** The visible name of the row. */
-    label: string
-    /** Supporting text below the label. */
-    description?: string
-    /** The row's control or value. */
-    children: ReactNode
-    /** Places the control below the label at every width. @default false */
-    stacked?: boolean
-    /** Places a wide control below its label on phones. @default false */
-    wide?: boolean
-    /** Row padding density. @default "md" */
-    size?: LabeledContentSize
+	/** The visible name of the row. */
+	label: string;
+	/** Supporting text below the label. */
+	description?: string;
+	/** The row's control or value. */
+	children: ReactNode;
+	/** Places the control below the label at every width. @default false */
+	stacked?: boolean;
+	/** Places a wide control below its label on phones. @default false */
+	wide?: boolean;
+	/** Row padding density. @default "md" */
+	size?: LabeledContentSize;
 }
 
 /**
@@ -30,55 +30,55 @@ export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
  * when there is no room beside it, rather than squeezing.
  */
 export function LabeledContent({
-    label,
-    description,
-    children,
-    stacked,
-    wide,
-    size = "md",
-    className,
-    ...props
+	label,
+	description,
+	children,
+	stacked,
+	wide,
+	size = "md",
+	className,
+	...props
 }: LabeledContentProps) {
-    return (
-        <div
-            className={cn(
-                "flex flex-wrap gap-x-4 gap-y-2",
-                padding[size],
-                stacked
-                    ? "flex-col items-stretch"
-                    : cn(
-                          "items-center justify-between",
-                          wide && "max-sm:flex-col max-sm:items-stretch max-sm:gap-2"
-                      ),
-                className
-            )}
-            {...props}
-        >
-            <div
-                className={cn(
-                    "flex min-w-0 flex-1 flex-col gap-2 break-normal",
-                    !stacked && "basis-36",
-                    wide && "max-sm:basis-auto"
-                )}
-            >
-                <span className="text-subheadline text-label">{label}</span>
-                {description && (
-                    <span className="text-footnote leading-snug text-label-secondary">
-                        {description}
-                    </span>
-                )}
-            </div>
-            {/* Controls give way before the label does; a segmented control that
+	return (
+		<div
+			className={cn(
+				"flex flex-wrap gap-x-4 gap-y-2",
+				padding[size],
+				stacked
+					? "flex-col items-stretch"
+					: cn(
+							"items-center justify-between",
+							wide && "max-sm:flex-col max-sm:items-stretch max-sm:gap-2",
+						),
+				className,
+			)}
+			{...props}
+		>
+			<div
+				className={cn(
+					"flex min-w-0 flex-1 flex-col gap-2 break-normal",
+					!stacked && "basis-36",
+					wide && "max-sm:basis-auto",
+				)}
+			>
+				<span className="text-subheadline text-label">{label}</span>
+				{description && (
+					<span className="text-footnote text-label-secondary leading-snug">
+						{description}
+					</span>
+				)}
+			</div>
+			{/* Controls give way before the label does; a segmented control that
           no longer fits turns into a pop-up button by itself. */}
-            <div
-                className={cn(
-                    "ms-auto flex max-w-full min-w-0 shrink-0 justify-end [&>*]:max-w-full",
-                    stacked && "w-full",
-                    wide && "max-sm:w-full"
-                )}
-            >
-                {children}
-            </div>
-        </div>
-    )
+			<div
+				className={cn(
+					"ms-auto flex max-w-full min-w-0 shrink-0 justify-end [&>*]:max-w-full",
+					stacked && "w-full",
+					wide && "max-sm:w-full",
+				)}
+			>
+				{children}
+			</div>
+		</div>
+	);
 }

package/src/components/locale-switcher/index.ts

@@ -1 +1 @@
-export * from "./locale-switcher"
+export * from "./locale-switcher";