@passui/react 0.1.27 → 0.1.29

package/dist/types/src/components/chip/chip.d.ts

@@ -1,7 +1,10 @@
 import type { HTMLAttributes } from "react";
 export type ChipTone = "neutral" | "accent" | "public" | "family" | "friends";
+export type ChipSize = "xs" | "sm" | "md";
 export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
     /** `neutral`, `accent`, `public`, `family`, or `friends`. @default "neutral" */
     tone?: ChipTone;
+    /** `xs`, `sm`, or `md`. @default "sm" */
+    size?: ChipSize;
 }
-export declare function Chip({ tone, className, ...props }: ChipProps): import("react").JSX.Element;
+export declare function Chip({ tone, size, className, ...props }: ChipProps): import("react").JSX.Element;

package/dist/types/src/components/labeled-content/labeled-content.d.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactNode } from "react";
+export type LabeledContentSize = "sm" | "md" | "lg";
 export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
     /** The visible name of the row. */
     label: string;
@@ -10,10 +11,12 @@ export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
     stacked?: boolean;
     /** Places a wide control below its label on phones. @default false */
     wide?: boolean;
+    /** Row padding density. @default "md" */
+    size?: LabeledContentSize;
 }
 /**
  * A row: a label, an optional description, and its control at the trailing
  * end, as SwiftUI's `LabeledContent`. Wide controls move under the label
  * when there is no room beside it, rather than squeezing.
  */
-export declare function LabeledContent({ label, description, children, stacked, wide, className, ...props }: LabeledContentProps): import("react").JSX.Element;
+export declare function LabeledContent({ label, description, children, stacked, wide, size, className, ...props }: LabeledContentProps): import("react").JSX.Element;

package/dist/types/src/motion/transitions.d.ts

@@ -19,12 +19,37 @@ export declare const spring: {
         readonly type: "spring";
     };
 };
+/**
+ * Apple's fluid overshoot: cubic-bezier(0.34, 1.56, 0.1, 1).
+ * Replaces traditional ease profiles with an authentic fluid bounce
+ * that overshoots and settles, matching Apple's custom interface physics.
+ * Used for zoom/matched-geometry transitions where the surface emerges
+ * from the trigger and snaps into place with a physical bounce.
+ */
+export declare const fluidOvershoot: {
+    readonly duration: 0.4;
+    readonly ease: [number, number, number, number];
+};
+/**
+ * Exit motion: content collapses back toward its source.
+ * The surface shrinks toward the trigger's position while fading,
+ * like a water drop absorbing back into its origin.
+ */
+export declare const fluidCollapse: {
+    readonly duration: 0.28;
+    readonly ease: [number, number, number, number];
+};
 export type FloatingPanelSide = "above" | "below";
-/** Anchored panels settle toward their source without shrinking their text. */
+/**
+ * Anchored panels settle toward their source without shrinking their text.
+ * Now uses origin-based scaling: the panel grows from the trigger's
+ * position (transform-origin set by the caller) with a scale + opacity
+ * crossfade, rather than a plain slide.
+ */
 export declare function floatingPanelMotion(side?: FloatingPanelSide): {
     readonly initial: {
         readonly opacity: 0;
-        readonly scale: 1;
+        readonly scale: 0.92;
         readonly y: number;
     };
     readonly animate: {
@@ -34,16 +59,15 @@ export declare function floatingPanelMotion(side?: FloatingPanelSide): {
     };
     readonly exit: {
         readonly opacity: 0;
-        readonly scale: 1;
+        readonly scale: 0.95;
         readonly y: number;
     };
     readonly transition: {
-        readonly damping: 26;
-        readonly stiffness: 240;
-        readonly mass: 1;
-        readonly type: "spring";
+        readonly duration: 0.4;
+        readonly ease: [number, number, number, number];
         readonly opacity: {
             readonly duration: 0.16;
+            readonly ease: [number, number, number, number];
         };
     };
 };
@@ -51,7 +75,7 @@ export declare function floatingPanelMotion(side?: FloatingPanelSide): {
 export declare const popoverMotion: {
     readonly initial: {
         readonly opacity: 0;
-        readonly scale: 1;
+        readonly scale: 0.92;
         readonly y: number;
     };
     readonly animate: {
@@ -61,19 +85,68 @@ export declare const popoverMotion: {
     };
     readonly exit: {
         readonly opacity: 0;
-        readonly scale: 1;
+        readonly scale: 0.95;
         readonly y: number;
     };
     readonly transition: {
-        readonly damping: 26;
-        readonly stiffness: 240;
-        readonly mass: 1;
-        readonly type: "spring";
+        readonly duration: 0.4;
+        readonly ease: [number, number, number, number];
         readonly opacity: {
             readonly duration: 0.16;
+            readonly ease: [number, number, number, number];
         };
     };
 };
+/**
+ * Zoom/matched-geometry transition for dialogs and center-placed sheets.
+ * The surface starts small (scale 0.88) and invisible, then grows to
+ * full size with the fluid overshoot bounce. Content elements inside
+ * crossfade in slightly delayed so they phase into visibility
+ * asynchronously — not a harsh switch.
+ */
+export declare const zoomReveal: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.88;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 0.92;
+    };
+    readonly transition: {
+        readonly duration: 0.4;
+        readonly ease: [number, number, number, number];
+    };
+};
+/**
+ * Content crossfade for elements inside an overlay.
+ * Rather than a harsh switch, sub-elements scale and phase into
+ * visibility asynchronously. Use for children of dialogs, sheets,
+ * and popovers — the container arrives first, then content fades in.
+ */
+export declare const contentCrossfade: {
+    readonly initial: {
+        readonly opacity: 0;
+        readonly scale: 0.96;
+    };
+    readonly animate: {
+        readonly opacity: 1;
+        readonly scale: 1;
+    };
+    readonly exit: {
+        readonly opacity: 0;
+        readonly scale: 0.98;
+    };
+    readonly transition: {
+        readonly duration: 0.24;
+        readonly ease: [number, number, number, number];
+        readonly delay: 0.04;
+    };
+};
 /** Floating bars that rise from the bottom edge. */
 export declare const riseMotion: {
     readonly initial: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.27",
+    "version": "0.1.29",
     "description": "Passui: native React controls, design tokens, presentation and appearance.",
     "license": "MIT",
     "repository": {

package/src/components/chip/chip.tsx

@@ -2,6 +2,7 @@ import type { HTMLAttributes } from "react"
 import { cn } from "../../lib/class-names"
 
 export type ChipTone = "neutral" | "accent" | "public" | "family" | "friends"
+export type ChipSize = "xs" | "sm" | "md"
 
 const tones: Record<ChipTone, string> = {
     neutral: "bg-fill text-label-secondary",
@@ -11,17 +12,26 @@ const tones: Record<ChipTone, string> = {
     friends: "bg-[#ede8ff] text-[#5a3fc0] dark:bg-[#26203f] dark:text-[#c3b5ff]",
 }
 
+const sizes: Record<ChipSize, string> = {
+    xs: "px-1 py-0 text-caption2",
+    sm: "px-1.5 py-0.5 text-caption2",
+    md: "px-2 py-0.5 text-caption",
+}
+
 export interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
     /** `neutral`, `accent`, `public`, `family`, or `friends`. @default "neutral" */
     tone?: ChipTone
+    /** `xs`, `sm`, or `md`. @default "sm" */
+    size?: ChipSize
 }
 
-export function Chip({ tone = "neutral", className, ...props }: ChipProps) {
+export function Chip({ tone = "neutral", size = "sm", className, ...props }: ChipProps) {
     return (
         <span
             className={cn(
-                "inline-flex items-center gap-1 rounded-full px-1.75 py-0.5 text-caption2 font-semibold",
+                "inline-flex items-center gap-1 rounded-full font-semibold",
                 tones[tone],
+                sizes[size],
                 className
             )}
             {...props}

package/src/components/dialog/dialog.tsx

@@ -2,7 +2,7 @@ import { Sheet } from "../sheet/sheet"
 import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import { Button } from "../button/button"
 import { cn } from "../../lib/class-names"
-import { spring } from "../../motion/transitions"
+import { contentCrossfade, spring, zoomReveal } from "../../motion/transitions"
 import { createContext, useContext, useId, type FormEvent, type ReactNode } from "react"
 
 const CloseContext = createContext<() => void>(() => {})
@@ -81,19 +81,31 @@ export function Dialog({
                         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.smooth}
+                        transition={reducedMotion ? { duration: 0 } : spring.bouncy}
                         className="overflow-hidden"
+                        style={{ transformOrigin: "top center" }}
                     >
-                        {body}
+                        <motion.div
+                            initial={reducedMotion ? false : contentCrossfade.initial}
+                            animate={reducedMotion ? undefined : contentCrossfade.animate}
+                            transition={
+                                reducedMotion ? { duration: 0 } : contentCrossfade.transition
+                            }
+                        >
+                            {body}
+                        </motion.div>
                     </motion.div>
                 )}
             </AnimatePresence>

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

@@ -1,6 +1,14 @@
 import type { HTMLAttributes, ReactNode } from "react"
 import { cn } from "../../lib/class-names"
 
+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",
+}
+
 export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
     /** The visible name of the row. */
     label: string
@@ -12,6 +20,8 @@ export interface LabeledContentProps extends HTMLAttributes<HTMLDivElement> {
     stacked?: boolean
     /** Places a wide control below its label on phones. @default false */
     wide?: boolean
+    /** Row padding density. @default "md" */
+    size?: LabeledContentSize
 }
 
 /**
@@ -25,13 +35,15 @@ export function LabeledContent({
     children,
     stacked,
     wide,
+    size = "md",
     className,
     ...props
 }: LabeledContentProps) {
     return (
         <div
             className={cn(
-                "flex flex-wrap gap-x-4 gap-y-2 px-4 py-3",
+                "flex flex-wrap gap-x-4 gap-y-2",
+                padding[size],
                 stacked
                     ? "flex-col items-stretch"
                     : cn(

package/src/components/popover/popover.tsx

@@ -10,7 +10,12 @@ import { concealMenuSource } from "../context-menu/conceal-menu-source"
 import { menuSurfaceExit, menuSurfaceReveal } from "../context-menu/menu-reveal"
 import { cn } from "../../lib/class-names"
 import { screenEdges } from "../../lib/screen-edges"
-import { floatingPanelMotion, spring } from "../../motion/transitions"
+import {
+    contentCrossfade,
+    floatingPanelMotion,
+    fluidOvershoot,
+    spring,
+} from "../../motion/transitions"
 import { fitPopover, type PopoverFit } from "./popover-fit"
 
 export type PopoverOrigin = "top-left" | "top-right"
@@ -56,6 +61,11 @@ function OpenPopover({
     const [reveal, setReveal] = useState<ReturnType<typeof menuSurfaceReveal> | null>(null)
     const popoverMotion = floatingPanelMotion(fit.above ? "above" : "below")
 
+    // For anchored popovers, the surface morphs from the trigger via
+    // menuSurfaceReveal. For non-anchored popovers, we use scale + the
+    // fluid overshoot spring so the panel grows from the origin corner
+    // with a physical bounce — Apple's matched-geometry feel.
+
     useLayoutEffect(() => {
         const refit = () => {
             const element = ref.current
@@ -283,11 +293,17 @@ function OpenPopover({
                     transition={
                         reducedMotion
                             ? { duration: 0 }
-                            : { ...spring.smooth, opacity: { duration: 0.16 } }
+                            : { ...fluidOvershoot, opacity: { duration: 0.16 } }
                     }
                 />
             )}
-            {children}
+            <motion.div
+                initial={reducedMotion ? false : anchorRef ? { opacity: 0 } : undefined}
+                animate={reducedMotion ? undefined : anchorRef ? { opacity: 1 } : undefined}
+                transition={reducedMotion ? { duration: 0 } : { duration: 0.16, delay: 0.06 }}
+            >
+                {children}
+            </motion.div>
         </motion.div>
     )
 }

package/src/components/sheet/sheet.tsx

@@ -2,7 +2,7 @@ import { AnimatePresence, motion, useReducedMotion } from "motion/react"
 import { type ReactNode, useRef } from "react"
 import { useVisualViewport } from "../../hooks/use-visual-viewport"
 import { cn } from "../../lib/class-names"
-import { spring } from "../../motion/transitions"
+import { contentCrossfade, spring, zoomReveal } from "../../motion/transitions"
 import { SheetPortal } from "./sheet-portal"
 import { useSheetFocus } from "./use-sheet-focus"
 
@@ -95,12 +95,47 @@ function OpenSheet({
                     placement === "center" ? "rounded-sheet" : "rounded-t-sheet sm:rounded-sheet",
                     className
                 )}
-                initial={reducedMotion ? { opacity: 0 } : { y: 40, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                exit={reducedMotion ? { opacity: 0 } : { y: 30, opacity: 0 }}
-                transition={reducedMotion ? { duration: 0 } : spring.smooth}
+                style={{
+                    transformOrigin: placement === "center" ? "center center" : "bottom center",
+                }}
+                initial={
+                    reducedMotion
+                        ? { opacity: 0 }
+                        : placement === "center"
+                          ? zoomReveal.initial
+                          : { y: 40, opacity: 0, scale: 0.96 }
+                }
+                animate={
+                    reducedMotion
+                        ? { opacity: 1 }
+                        : placement === "center"
+                          ? zoomReveal.animate
+                          : { y: 0, opacity: 1, scale: 1 }
+                }
+                exit={
+                    reducedMotion
+                        ? { opacity: 0 }
+                        : placement === "center"
+                          ? zoomReveal.exit
+                          : { y: 30, opacity: 0, scale: 0.98 }
+                }
+                transition={
+                    reducedMotion
+                        ? { duration: 0 }
+                        : placement === "center"
+                          ? zoomReveal.transition
+                          : { ...spring.bouncy, opacity: { duration: 0.18 } }
+                }
             >
-                {children}
+                <motion.div
+                    className="flex min-h-0 flex-1 flex-col overflow-y-auto"
+                    initial={reducedMotion ? false : contentCrossfade.initial}
+                    animate={reducedMotion ? undefined : contentCrossfade.animate}
+                    exit={reducedMotion ? undefined : contentCrossfade.exit}
+                    transition={reducedMotion ? { duration: 0 } : contentCrossfade.transition}
+                >
+                    {children}
+                </motion.div>
             </motion.div>
         </div>
     )

package/src/motion/transitions.ts

@@ -8,18 +8,45 @@ export const spring = {
     bouncy: { type: "spring", ...springs.bouncy },
 } as const satisfies Record<keyof typeof springs, Transition>
 
+/**
+ * Apple's fluid overshoot: cubic-bezier(0.34, 1.56, 0.1, 1).
+ * Replaces traditional ease profiles with an authentic fluid bounce
+ * that overshoots and settles, matching Apple's custom interface physics.
+ * Used for zoom/matched-geometry transitions where the surface emerges
+ * from the trigger and snaps into place with a physical bounce.
+ */
+export const fluidOvershoot = {
+    duration: 0.4,
+    ease: [0.34, 1.56, 0.1, 1] as [number, number, number, number],
+} as const
+
+/**
+ * Exit motion: content collapses back toward its source.
+ * The surface shrinks toward the trigger's position while fading,
+ * like a water drop absorbing back into its origin.
+ */
+export const fluidCollapse = {
+    duration: 0.28,
+    ease: [0.4, 0, 0.6, 1] as [number, number, number, number],
+} as const
+
 export type FloatingPanelSide = "above" | "below"
 
-/** Anchored panels settle toward their source without shrinking their text. */
+/**
+ * Anchored panels settle toward their source without shrinking their text.
+ * Now uses origin-based scaling: the panel grows from the trigger's
+ * position (transform-origin set by the caller) with a scale + opacity
+ * crossfade, rather than a plain slide.
+ */
 export function floatingPanelMotion(side: FloatingPanelSide = "below") {
     const direction = side === "above" ? 1 : -1
     return {
-        initial: { opacity: 0, scale: 1, y: direction * 6 },
+        initial: { opacity: 0, scale: 0.92, y: direction * 6 },
         animate: { opacity: 1, scale: 1, y: 0 },
-        exit: { opacity: 0, scale: 1, y: direction * 4 },
+        exit: { opacity: 0, scale: 0.95, y: direction * 4 },
         transition: {
-            ...spring.smooth,
-            opacity: { duration: 0.16 },
+            ...fluidOvershoot,
+            opacity: { duration: 0.16, ease: [0.4, 0, 0.2, 1] as [number, number, number, number] },
         },
     } as const
 }
@@ -27,6 +54,37 @@ export function floatingPanelMotion(side: FloatingPanelSide = "below") {
 /** Default below-anchor presentation, retained for existing consumers. */
 export const popoverMotion = floatingPanelMotion()
 
+/**
+ * Zoom/matched-geometry transition for dialogs and center-placed sheets.
+ * The surface starts small (scale 0.88) and invisible, then grows to
+ * full size with the fluid overshoot bounce. Content elements inside
+ * crossfade in slightly delayed so they phase into visibility
+ * asynchronously — not a harsh switch.
+ */
+export const zoomReveal = {
+    initial: { opacity: 0, scale: 0.88 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.92 },
+    transition: fluidOvershoot,
+} as const
+
+/**
+ * Content crossfade for elements inside an overlay.
+ * Rather than a harsh switch, sub-elements scale and phase into
+ * visibility asynchronously. Use for children of dialogs, sheets,
+ * and popovers — the container arrives first, then content fades in.
+ */
+export const contentCrossfade = {
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.98 },
+    transition: {
+        duration: 0.24,
+        ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
+        delay: 0.04,
+    },
+} as const
+
 /** Floating bars that rise from the bottom edge. */
 export const riseMotion = {
     initial: { opacity: 0, y: 32 },