@passui/react 0.1.17 → 0.1.19

package/src/components/table/table.tsx

@@ -2,63 +2,39 @@ import type * as React from "react"
 
 import { cn } from "../../lib/class-names"
 
-function Table({
-    className,
-    ...props
-}: React.ComponentProps<"table">) {
+function Table({ className, ...props }: React.ComponentProps<"table">) {
     return (
-        <div
-            data-slot="table-container"
-            className="relative w-full overflow-x-auto"
-        >
+        <div data-slot="table-container" className="relative w-full overflow-x-auto">
             <table
                 data-slot="table"
-                className={cn(
-                    "w-full caption-bottom text-subheadline text-label",
-                    className
-                )}
+                className={cn("w-full caption-bottom text-subheadline text-label", className)}
                 {...props}
             />
         </div>
     )
 }
 
-function TableHeader({
-    className,
-    ...props
-}: React.ComponentProps<"thead">) {
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
     return (
         <thead
             data-slot="table-header"
-            className={cn(
-                "[&_tr]:border-separator [&_tr]:border-b",
-                className
-            )}
+            className={cn("[&_tr]:border-separator [&_tr]:border-b", className)}
             {...props}
         />
     )
 }
 
-function TableBody({
-    className,
-    ...props
-}: React.ComponentProps<"tbody">) {
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
     return (
         <tbody
             data-slot="table-body"
-            className={cn(
-                "[&_tr:last-child]:border-0",
-                className
-            )}
+            className={cn("[&_tr:last-child]:border-0", className)}
             {...props}
         />
     )
 }
 
-function TableFooter({
-    className,
-    ...props
-}: React.ComponentProps<"tfoot">) {
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     return (
         <tfoot
             data-slot="table-footer"
@@ -71,10 +47,7 @@ function TableFooter({
     )
 }
 
-function TableRow({
-    className,
-    ...props
-}: React.ComponentProps<"tr">) {
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     return (
         <tr
             data-slot="table-row"
@@ -88,10 +61,7 @@ function TableRow({
     )
 }
 
-function TableHead({
-    className,
-    ...props
-}: React.ComponentProps<"th">) {
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     return (
         <th
             data-slot="table-head"
@@ -105,10 +75,7 @@ function TableHead({
     )
 }
 
-function TableCell({
-    className,
-    ...props
-}: React.ComponentProps<"td">) {
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
     return (
         <td
             data-slot="table-cell"
@@ -121,29 +88,14 @@ function TableCell({
     )
 }
 
-function TableCaption({
-    className,
-    ...props
-}: React.ComponentProps<"caption">) {
+function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {
     return (
         <caption
             data-slot="table-caption"
-            className={cn(
-                "mt-4 text-footnote text-label-secondary",
-                className
-            )}
+            className={cn("mt-4 text-footnote text-label-secondary", className)}
             {...props}
         />
     )
 }
 
-export {
-    Table,
-    TableBody,
-    TableCaption,
-    TableCell,
-    TableFooter,
-    TableHead,
-    TableHeader,
-    TableRow,
-}
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }

package/src/components/text-editor/text-editor.tsx

@@ -2,18 +2,8 @@ import type { ComponentProps } from "react"
 import { cn } from "../../lib/class-names"
 import { textControlClasses } from "../text-field/text-field"
 
-export function TextEditor({
-    className,
-    ...props
-}: ComponentProps<"textarea">) {
+export function TextEditor({ className, ...props }: ComponentProps<"textarea">) {
     return (
-        <textarea
-            {...props}
-            className={cn(
-                textControlClasses,
-                "min-h-28 resize-y",
-                className
-            )}
-        />
+        <textarea {...props} className={cn(textControlClasses, "min-h-28 resize-y", className)} />
     )
 }

package/src/components/text-field/text-field.tsx

@@ -1,9 +1,4 @@
-import {
-    type ComponentProps,
-    type ReactNode,
-    useId,
-    useState,
-} from "react"
+import { type ComponentProps, type ReactNode, useId, useState } from "react"
 import { Button } from "../button/button"
 import { cn } from "../../lib/class-names"
 
@@ -14,8 +9,7 @@ export const textControlClasses = cn(
     "disabled:cursor-not-allowed disabled:opacity-40 aria-invalid:border-danger"
 )
 
-const fieldIconClasses =
-    "flex shrink-0 items-center text-label-secondary"
+const fieldIconClasses = "flex shrink-0 items-center text-label-secondary"
 
 export type TextFieldProps = ComponentProps<"input"> & {
     label: string
@@ -50,18 +44,12 @@ export function TextField({
     const reveal = type === "password" && revealLabels
     return (
         <div className="flex flex-col gap-2">
-            <label
-                htmlFor={id}
-                className="text-subheadline font-semibold"
-            >
+            <label htmlFor={id} className="text-subheadline font-semibold">
                 {label}
             </label>
             <div className="flex items-center gap-2 rounded-xl border border-separator bg-elevated px-3 focus-within:ring-1 focus-within:ring-accent/40 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-accent-text/70">
                 {icon && (
-                    <span
-                        aria-hidden
-                        className={fieldIconClasses}
-                    >
+                    <span aria-hidden className={fieldIconClasses}>
                         {icon}
                     </span>
                 )}
@@ -71,9 +59,7 @@ export function TextField({
                     type={reveal && revealed ? "text" : type}
                     aria-invalid={messages.length > 0}
                     aria-describedby={
-                        messages.length || description
-                            ? `${id}-description`
-                            : undefined
+                        messages.length || description ? `${id}-description` : undefined
                     }
                     className={cn(
                         "h-11 w-full min-w-0 bg-transparent text-body text-label outline-none",
@@ -82,10 +68,7 @@ export function TextField({
                     )}
                 />
                 {trailingIcon && (
-                    <span
-                        aria-hidden
-                        className={fieldIconClasses}
-                    >
+                    <span aria-hidden className={fieldIconClasses}>
                         {trailingIcon}
                     </span>
                 )}
@@ -97,17 +80,11 @@ export function TextField({
                         // wider invisible area keeps a 44px target
                         className="-mr-1.5 shrink-0 whitespace-nowrap [@media(pointer:coarse)]:before:absolute [@media(pointer:coarse)]:before:-inset-1.5 [@media(pointer:coarse)]:before:content-['']"
                         aria-controls={id}
-                        aria-label={
-                            revealed
-                                ? revealLabels.hide
-                                : revealLabels.show
-                        }
+                        aria-label={revealed ? revealLabels.hide : revealLabels.show}
                         aria-pressed={revealed}
                         onClick={() => setRevealed(!revealed)}
                     >
-                        {revealed
-                            ? revealLabels.hide
-                            : revealLabels.show}
+                        {revealed ? revealLabels.hide : revealLabels.show}
                     </Button>
                 )}
                 {action}
@@ -115,19 +92,13 @@ export function TextField({
             {(messages.length > 0 || description) && (
                 <div
                     id={`${id}-description`}
-                    role={
-                        messages.length ? "alert" : undefined
-                    }
+                    role={messages.length ? "alert" : undefined}
                     className={cn(
                         "text-footnote",
-                        messages.length
-                            ? "text-danger"
-                            : "text-label-secondary"
+                        messages.length ? "text-danger" : "text-label-secondary"
                     )}
                 >
-                    {messages.length
-                        ? messages.join(". ")
-                        : description}
+                    {messages.length ? messages.join(". ") : description}
                 </div>
             )}
         </div>

package/src/components/toast/toast-store.ts

@@ -2,11 +2,7 @@
  * App-wide toasts: short messages that confirm, report progress or explain
  * a failure. Call `toast` from anywhere; render one `<Toaster />`.
  */
-export type ToastTone =
-    | "neutral"
-    | "success"
-    | "error"
-    | "loading"
+export type ToastTone = "neutral" | "success" | "error" | "loading"
 
 export interface ToastAction {
     label: string
@@ -41,11 +37,7 @@ const emit = () => {
     for (const listener of listeners) listener()
 }
 
-function show(
-    tone: ToastTone,
-    title: string,
-    options: ToastOptions = {}
-): number {
+function show(tone: ToastTone, title: string, options: ToastOptions = {}): number {
     const id = nextId++
     const duration =
         options.duration !== undefined
@@ -70,14 +62,8 @@ function show(
 }
 
 /** Changes a toast in place; it morphs to its new state. */
-function update(
-    id: number,
-    tone: ToastTone,
-    title: string,
-    options: ToastOptions = {}
-) {
-    if (!toasts.some((t) => t.id === id))
-        return show(tone, title, options)
+function update(id: number, tone: ToastTone, title: string, options: ToastOptions = {}) {
+    if (!toasts.some((t) => t.id === id)) return show(tone, title, options)
     toasts = toasts.map((t) =>
         t.id === id
             ? {
@@ -112,22 +98,15 @@ interface PromiseMessages<T> {
 }
 
 export const toast = Object.assign(
-    (title: string, options?: ToastOptions) =>
-        show("neutral", title, options),
+    (title: string, options?: ToastOptions) => show("neutral", title, options),
     {
-        success: (title: string, options?: ToastOptions) =>
-            show("success", title, options),
-        error: (title: string, options?: ToastOptions) =>
-            show("error", title, options),
-        loading: (title: string, options?: ToastOptions) =>
-            show("loading", title, options),
+        success: (title: string, options?: ToastOptions) => show("success", title, options),
+        error: (title: string, options?: ToastOptions) => show("error", title, options),
+        loading: (title: string, options?: ToastOptions) => show("loading", title, options),
         update,
         dismiss,
         /** Shows progress, then morphs into the outcome. Returns the promise. */
-        promise<T>(
-            promise: Promise<T>,
-            messages: PromiseMessages<T>
-        ): Promise<T> {
+        promise<T>(promise: Promise<T>, messages: PromiseMessages<T>): Promise<T> {
             const id = show("loading", messages.loading)
             promise.then(
                 (value) =>