@passui/react 0.1.17 → 0.1.19

package/src/lib/screen-edges.ts

@@ -14,10 +14,7 @@ let probe: HTMLDivElement | undefined
  */
 export function screenEdges(): ScreenEdges {
     const margin =
-        typeof window !== "undefined" &&
-        window.matchMedia("(pointer: coarse)").matches
-            ? 12
-            : 8
+        typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches ? 12 : 8
     if (typeof document === "undefined") {
         return {
             top: margin,
@@ -38,8 +35,7 @@ export function screenEdges(): ScreenEdges {
     return {
         top: Number.parseFloat(style.paddingTop) + margin,
         right: Number.parseFloat(style.paddingRight) + margin,
-        bottom:
-            Number.parseFloat(style.paddingBottom) + margin,
+        bottom: Number.parseFloat(style.paddingBottom) + margin,
         left: Number.parseFloat(style.paddingLeft) + margin,
     }
 }

package/src/lib/shapes.ts

@@ -13,10 +13,7 @@ export const shapes = [
 export type Shape = (typeof shapes)[number]
 
 /** Lobe count and wave depth (as a fraction of the radius) for each wavy shape. */
-const waves: Record<
-    Exclude<Shape, "circle">,
-    { lobes: number; depth: number }
-> = {
+const waves: Record<Exclude<Shape, "circle">, { lobes: number; depth: number }> = {
     cookie4: { lobes: 4, depth: 0.08 },
     cookie6: { lobes: 6, depth: 0.07 },
     cookie9: { lobes: 9, depth: 0.055 },
@@ -33,12 +30,7 @@ const STEPS = 144
  * "clover", and "sunny" outlines. The wave is normalised so every shape fills
  * the same `r`, keeping icons optically the same size.
  */
-export function shapePath(
-    shape: Shape,
-    cx: number,
-    cy: number,
-    r: number
-) {
+export function shapePath(shape: Shape, cx: number, cy: number, r: number) {
     if (shape === "circle") {
         return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0 Z`
     }
@@ -48,16 +40,10 @@ export function shapePath(
     const points: string[] = []
     for (let i = 0; i < STEPS; i++) {
         const theta = (i / STEPS) * Math.PI * 2 - Math.PI / 2
-        const radius =
-            base *
-            (1 +
-                depth *
-                    Math.cos(lobes * (theta + Math.PI / 2)))
+        const radius = base * (1 + depth * Math.cos(lobes * (theta + Math.PI / 2)))
         const x = cx + radius * Math.cos(theta)
         const y = cy + radius * Math.sin(theta)
-        points.push(
-            `${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`
-        )
+        points.push(`${i === 0 ? "M" : "L"} ${x.toFixed(2)} ${y.toFixed(2)}`)
     }
     return `${points.join(" ")} Z`
 }
@@ -66,5 +52,4 @@ export function shapePath(
  * The app wide `dualTone` rule dims every svg path for two tone icons; a
  * drawn shape or illustration opts out with this so its colors stay true.
  */
-export const plainSvg =
-    "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none"
+export const plainSvg = "cursor-[inherit] [&_path]:opacity-100 [&_path]:transform-none"

package/src/motion/transitions.ts

@@ -8,18 +8,24 @@ export const spring = {
     bouncy: { type: "spring", ...springs.bouncy },
 } as const satisfies Record<keyof typeof springs, Transition>
 
-/** Menus, popovers and floating toolbars: grow from their anchor. */
-export const popoverMotion = {
-    initial: { opacity: 0, scale: 0.94, y: -6 },
-    animate: { opacity: 1, scale: 1, y: 0 },
-    exit: {
-        opacity: 0,
-        scale: 0.97,
-        y: -4,
-        transition: spring.snappy,
-    },
-    transition: spring.snappy,
-} as const
+export type FloatingPanelSide = "above" | "below"
+
+/** Anchored panels settle toward their source without shrinking their text. */
+export function floatingPanelMotion(side: FloatingPanelSide = "below") {
+    const direction = side === "above" ? 1 : -1
+    return {
+        initial: { opacity: 0, scale: 1, y: direction * 6 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 1, y: direction * 4 },
+        transition: {
+            ...spring.smooth,
+            opacity: { duration: 0.16 },
+        },
+    } as const
+}
+
+/** Default below-anchor presentation, retained for existing consumers. */
+export const popoverMotion = floatingPanelMotion()
 
 /** Floating bars that rise from the bottom edge. */
 export const riseMotion = {

package/src/components/ambient/ambient.docs.tsx

@@ -1,68 +0,0 @@
-import { AmbientNowPlaying } from "./examples/ambient-now-playing"
-import { Ambient } from "./ambient"
-import { defineDocs } from "../../docs/types"
-import { AmbientImages } from "./examples/ambient-images"
-import { AmbientShowcase } from "./examples/ambient-showcase"
-import { AmbientUsage } from "./examples/ambient-usage"
-
-// src is any image URL; the playground offers the three sample images.
-type DemoProps = {
-    image: "aiko" | "kenji" | "mira" | "none"
-}
-
-export const ambientDocs = defineDocs<DemoProps>()({
-    slug: "ambient",
-    name: "Ambient",
-    importPath: "@passui/react/ambient",
-    controls: {
-        image: {
-            kind: "select",
-            options: {
-                aiko: true,
-                kenji: true,
-                mira: true,
-                none: true,
-            },
-            default: "aiko",
-        },
-    },
-    render: ({ image }) => (
-        <Ambient
-            key={image}
-            src={
-                image === "none"
-                    ? undefined
-                    : `/avatars/${image}.svg`
-            }
-            className="flex w-72 flex-col items-center gap-3 py-12 text-center"
-        >
-            <img
-                src={
-                    image === "none"
-                        ? "/avatars/aiko.svg"
-                        : `/avatars/${image}.svg`
-                }
-                alt=""
-                className="size-24 rounded-3xl shadow-sm"
-            />
-            <p className="text-headline font-semibold text-label">
-                Now playing
-            </p>
-        </Ambient>
-    ),
-    childrenSnippet: ({ image }) => ({
-        imports: [],
-        omit: ["image"],
-        extraProps:
-            image === "none"
-                ? undefined
-                : { src: `/avatars/${image}.svg` },
-        children: `\n    <img src="/avatars/${image === "none" ? "aiko" : image}.svg" alt="" />\n`,
-    }),
-    usage: AmbientUsage,
-    showcase: AmbientShowcase,
-    examples: [
-        { id: "images", component: AmbientImages },
-        { id: "now-playing", component: AmbientNowPlaying },
-    ],
-})

package/src/components/ambient/examples/ambient-images.tsx

@@ -1,30 +0,0 @@
-import { Ambient } from "@passui/react/ambient"
-
-const people = [
-    { name: "Aiko", src: "/avatars/aiko.svg" },
-    { name: "Kenji", src: "/avatars/kenji.svg" },
-    { name: "Mira", src: "/avatars/mira.svg" },
-]
-
-export function AmbientImages() {
-    return (
-        <div className="grid w-full max-w-xl grid-cols-3 gap-2">
-            {people.map((person) => (
-                <Ambient
-                    key={person.name}
-                    src={person.src}
-                    className="flex flex-col items-center gap-2 py-8"
-                >
-                    <img
-                        src={person.src}
-                        alt=""
-                        className="size-14 rounded-full"
-                    />
-                    <span className="text-subheadline font-medium text-label">
-                        {person.name}
-                    </span>
-                </Ambient>
-            ))}
-        </div>
-    )
-}

package/src/components/ambient/examples/ambient-now-playing.tsx

@@ -1,55 +0,0 @@
-import {
-    PauseIcon,
-    NextIcon,
-    PreviousIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Ambient } from "@passui/react/ambient"
-import { IconButton } from "@passui/react/icon-button"
-
-export function AmbientNowPlaying() {
-    return (
-        <Ambient
-            src="/avatars/kenji.svg"
-            className="flex w-full max-w-xs flex-col items-center gap-4 py-10 text-center"
-        >
-            <img
-                src="/avatars/kenji.svg"
-                alt=""
-                className="size-40 rounded-4xl shadow-sm"
-            />
-            <div className="flex flex-col">
-                <span className="text-headline font-semibold text-label">
-                    Morning Light
-                </span>
-                <span className="text-footnote text-label-secondary">
-                    Kenji Mori
-                </span>
-            </div>
-            <div className="flex items-center gap-2">
-                <IconButton label="Previous" variant="ghost">
-                    <HugeiconsIcon
-                        icon={PreviousIcon}
-                        size={22}
-                    />
-                </IconButton>
-                <IconButton
-                    label="Pause"
-                    variant="secondary"
-                    size="icon-lg"
-                >
-                    <HugeiconsIcon
-                        icon={PauseIcon}
-                        size={24}
-                    />
-                </IconButton>
-                <IconButton label="Next" variant="ghost">
-                    <HugeiconsIcon
-                        icon={NextIcon}
-                        size={22}
-                    />
-                </IconButton>
-            </div>
-        </Ambient>
-    )
-}

package/src/components/ambient/examples/ambient-showcase.tsx

@@ -1,33 +0,0 @@
-import { Ambient } from "@passui/react/ambient"
-import { Button } from "@passui/react/button"
-
-export function AmbientShowcase() {
-    return (
-        <Ambient
-            src="/avatars/mira.svg"
-            className="flex w-full max-w-sm flex-col items-center gap-4 py-12 text-center"
-        >
-            <img
-                src="/avatars/mira.svg"
-                alt=""
-                className="size-28 rounded-full shadow-sm"
-            />
-            <div className="flex flex-col gap-1">
-                <h2 className="text-title2 font-bold text-label">
-                    Mira Patel
-                </h2>
-                <p className="text-callout text-label-secondary">
-                    Support lead, Lisbon
-                </p>
-            </div>
-            <div className="flex gap-2">
-                <Button variant="accent" size="sm">
-                    Message
-                </Button>
-                <Button variant="secondary" size="sm">
-                    View profile
-                </Button>
-            </div>
-        </Ambient>
-    )
-}

package/src/components/ambient/examples/ambient-usage.tsx

@@ -1,19 +0,0 @@
-import { Ambient } from "@passui/react/ambient"
-
-export function AmbientUsage() {
-    return (
-        <Ambient
-            src="/avatars/aiko.svg"
-            className="flex flex-col items-center gap-3 py-10"
-        >
-            <img
-                src="/avatars/aiko.svg"
-                alt=""
-                className="size-20 rounded-full"
-            />
-            <p className="text-headline font-semibold text-label">
-                Aiko Kamado
-            </p>
-        </Ambient>
-    )
-}

package/src/components/button/button.docs.tsx

@@ -1,116 +0,0 @@
-import { ArrowRight01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { jsxText } from "../../docs/snippet"
-import { defineDocs } from "../../docs/types"
-import { Button, type ButtonProps } from "./button"
-import type { ButtonSize } from "./button-styles"
-import { ButtonDisabled } from "./examples/button-disabled"
-import { ButtonIcon } from "./examples/button-icon"
-import { ButtonLink } from "./examples/button-link"
-import { ButtonPending } from "./examples/button-pending"
-import { ButtonShowcase } from "./examples/button-showcase"
-import { ButtonSizes } from "./examples/button-sizes"
-import { ButtonUsage } from "./examples/button-usage"
-import { ButtonVariants } from "./examples/button-variants"
-import { ButtonWithIcon } from "./examples/button-with-icon"
-
-// Sample values only: the site writes all of the docs' prose.
-const sampleLabel = "Continue"
-
-const iconSizes = new Set<ButtonSize>([
-    "icon",
-    "icon-xs",
-    "icon-sm",
-    "icon-lg",
-    "icon-full",
-])
-
-export const buttonDocs = defineDocs<ButtonProps>()({
-    slug: "button",
-    name: "Button",
-    importPath: "@passui/react/button",
-    controls: {
-        variant: {
-            kind: "select",
-            options: {
-                default: true,
-                secondary: true,
-                outline: true,
-                ghost: true,
-                link: true,
-                accent: true,
-                destructive: true,
-            },
-            default: "default",
-        },
-        size: {
-            kind: "select",
-            options: {
-                default: true,
-                xs: true,
-                sm: true,
-                lg: true,
-                icon: true,
-                "icon-xs": true,
-                "icon-sm": true,
-                "icon-lg": true,
-                "icon-full": true,
-            },
-            default: "default",
-        },
-        isPending: { kind: "boolean", default: false },
-        disabled: { kind: "boolean", default: false },
-        children: { kind: "text", default: sampleLabel },
-    },
-    render: ({ children, size, ...props }) =>
-        iconSizes.has(size) ? (
-            <Button
-                {...props}
-                size={size}
-                aria-label={children}
-            >
-                <HugeiconsIcon
-                    icon={ArrowRight01Icon}
-                    size={20}
-                />
-            </Button>
-        ) : (
-            <Button {...props} size={size}>
-                {children}
-            </Button>
-        ),
-    childrenSnippet: ({ children, size }) =>
-        iconSizes.has(size)
-            ? {
-                  imports: [
-                      'import { ArrowRight01Icon } from "@hugeicons/core-free-icons"',
-                      'import { HugeiconsIcon } from "@hugeicons/react"',
-                  ],
-                  children:
-                      "<HugeiconsIcon icon={ArrowRight01Icon} size={20} />",
-                  extraProps: { "aria-label": children },
-              }
-            : { imports: [], children: jsxText(children) },
-    usage: ButtonUsage,
-    showcase: ButtonShowcase,
-    examples: [
-        { id: "variants", component: ButtonVariants },
-        { id: "sizes", component: ButtonSizes },
-        { id: "with-icon", component: ButtonWithIcon },
-        { id: "icon", component: ButtonIcon },
-        {
-            id: "pending",
-            component: ButtonPending,
-            playground: {
-                variant: "accent",
-                isPending: true,
-            },
-        },
-        {
-            id: "disabled",
-            component: ButtonDisabled,
-            playground: { disabled: true },
-        },
-        { id: "link", component: ButtonLink },
-    ],
-})

package/src/components/button/examples/button-disabled.tsx

@@ -1,19 +0,0 @@
-import { Toggle } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { useState } from "react"
-
-export function ButtonDisabled() {
-    const [agreed, setAgreed] = useState(false)
-
-    return (
-        <div className="flex w-full max-w-xs flex-col gap-4">
-            <Toggle
-                style="checkbox"
-                label="I agree to the terms"
-                checked={agreed}
-                onChange={setAgreed}
-            />
-            <Button disabled={!agreed}>Create account</Button>
-        </div>
-    )
-}

package/src/components/button/examples/button-icon.tsx

@@ -1,39 +0,0 @@
-import {
-    TextAlignCenterIcon,
-    TextAlignLeftIcon,
-    TextBoldIcon,
-    TextItalicIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { Button } from "@passui/react/button"
-
-const tools = [
-    { label: "Bold", icon: TextBoldIcon },
-    { label: "Italic", icon: TextItalicIcon },
-    { label: "Align left", icon: TextAlignLeftIcon },
-    { label: "Align centre", icon: TextAlignCenterIcon },
-]
-
-export function ButtonIcon() {
-    return (
-        <div
-            role="toolbar"
-            aria-label="Formatting"
-            className="flex items-center gap-1 rounded-full bg-fill/60 p-1"
-        >
-            {tools.map((tool) => (
-                <Button
-                    key={tool.label}
-                    size="icon-sm"
-                    variant="ghost"
-                    aria-label={tool.label}
-                >
-                    <HugeiconsIcon
-                        icon={tool.icon}
-                        size={18}
-                    />
-                </Button>
-            ))}
-        </div>
-    )
-}

package/src/components/button/examples/button-link.tsx

@@ -1,12 +0,0 @@
-import { buttonStyle } from "@passui/react/button"
-
-export function ButtonLink() {
-    return (
-        <a
-            href="#guide"
-            className={buttonStyle({ variant: "secondary" })}
-        >
-            Read the guide
-        </a>
-    )
-}

package/src/components/button/examples/button-pending.tsx

@@ -1,27 +0,0 @@
-import { toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { useState } from "react"
-
-export function ButtonPending() {
-    const [saving, setSaving] = useState(false)
-
-    async function save() {
-        setSaving(true)
-        // stands in for a real request
-        await new Promise((resolve) =>
-            setTimeout(resolve, 1600)
-        )
-        setSaving(false)
-        toast.success("Profile saved")
-    }
-
-    return (
-        <Button
-            variant="accent"
-            isPending={saving}
-            onClick={save}
-        >
-            Save profile
-        </Button>
-    )
-}

package/src/components/button/examples/button-showcase.tsx

@@ -1,115 +0,0 @@
-import {
-    Delete02Icon,
-    Link01Icon,
-    Share08Icon,
-    StarIcon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { TextField, toast } from "@passui/react"
-import { Button } from "@passui/react/button"
-import { useState } from "react"
-
-export function ButtonShowcase() {
-    const [name, setName] = useState("Passui launch")
-    const [saving, setSaving] = useState(false)
-
-    async function save() {
-        setSaving(true)
-        await new Promise((resolve) =>
-            setTimeout(resolve, 1400)
-        )
-        setSaving(false)
-        toast.success("Project saved")
-    }
-
-    return (
-        <div className="flex w-full max-w-md flex-col gap-4">
-            <section className="flex flex-col gap-5 rounded-4xl bg-elevated p-6 shadow-sm ring-1 ring-separator/60">
-                <header className="flex items-start justify-between gap-4">
-                    <div className="flex flex-col gap-1">
-                        <h2 className="text-headline font-semibold text-label">
-                            Project settings
-                        </h2>
-                        <p className="text-footnote text-label-secondary">
-                            Changes apply to everyone on the
-                            team.
-                        </p>
-                    </div>
-                    <div className="flex gap-1">
-                        <Button
-                            size="icon-sm"
-                            variant="ghost"
-                            aria-label="Star"
-                        >
-                            <HugeiconsIcon
-                                icon={StarIcon}
-                                size={18}
-                            />
-                        </Button>
-                        <Button
-                            size="icon-sm"
-                            variant="ghost"
-                            aria-label="Copy link"
-                        >
-                            <HugeiconsIcon
-                                icon={Link01Icon}
-                                size={18}
-                            />
-                        </Button>
-                        <Button
-                            size="icon-sm"
-                            variant="ghost"
-                            aria-label="Share"
-                        >
-                            <HugeiconsIcon
-                                icon={Share08Icon}
-                                size={18}
-                            />
-                        </Button>
-                    </div>
-                </header>
-                <TextField
-                    label="Project name"
-                    value={name}
-                    onChange={(event) =>
-                        setName(event.target.value)
-                    }
-                />
-                <footer className="flex justify-end gap-2">
-                    <Button
-                        variant="ghost"
-                        onClick={() =>
-                            setName("Passui launch")
-                        }
-                    >
-                        Cancel
-                    </Button>
-                    <Button
-                        variant="accent"
-                        isPending={saving}
-                        onClick={save}
-                    >
-                        Save changes
-                    </Button>
-                </footer>
-            </section>
-            <section className="flex items-center justify-between gap-4 rounded-4xl bg-elevated p-5 ring-1 ring-danger/25">
-                <div className="flex flex-col gap-1">
-                    <span className="text-subheadline font-semibold text-label">
-                        Delete project
-                    </span>
-                    <span className="text-footnote text-label-secondary">
-                        This removes every file for good.
-                    </span>
-                </div>
-                <Button variant="destructive" size="sm">
-                    <HugeiconsIcon
-                        icon={Delete02Icon}
-                        size={16}
-                    />
-                    Delete
-                </Button>
-            </section>
-        </div>
-    )
-}

package/src/components/button/examples/button-sizes.tsx

@@ -1,12 +0,0 @@
-import { Button } from "@passui/react/button"
-
-export function ButtonSizes() {
-    return (
-        <div className="flex flex-wrap items-center justify-center gap-3">
-            <Button size="xs">Extra small</Button>
-            <Button size="sm">Small</Button>
-            <Button>Default</Button>
-            <Button size="lg">Large</Button>
-        </div>
-    )
-}