@passui/react 0.1.28 → 0.1.30

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@passui/react",
-    "version": "0.1.28",
+    "version": "0.1.30",
     "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/context-menu/context-menu-host.tsx

@@ -5,7 +5,7 @@ import { CheckIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 import { belongsToFloatingSurface, registerFloatingLayer } from "../../lib/floating-layers"
 import { screenEdges } from "../../lib/screen-edges"
-import { spring } from "../../motion/transitions"
+import { spring, fluidOvershoot } from "../../motion/transitions"
 import { concealMenuSource } from "./conceal-menu-source"
 import { findMenuTypeaheadIndex, isMenuNavigationKey, nextMenuIndex } from "./menu-navigation"
 import { menuPosition } from "./menu-position"
@@ -288,7 +288,7 @@ function Menu({ menu }: { menu: OpenMenu }) {
                     transition={
                         reducedMotion
                             ? { duration: 0 }
-                            : { ...spring.smooth, opacity: { duration: 0.16 } }
+                            : { ...fluidOvershoot, opacity: { duration: 0.16 } }
                     }
                 />
             )}
@@ -305,18 +305,23 @@ function Menu({ menu }: { menu: OpenMenu }) {
                         ? false
                         : {
                               opacity: 0,
+                              scale: 0.96,
                               y: menu.source && menu.source.top > position.top ? 4 : -4,
                           }
                 }
-                animate={{ opacity: 1, y: 0 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
                 exit={{
                     opacity: 0,
+                    scale: 0.98,
                     transition: {
                         duration: reducedMotion ? 0 : 0.06,
                     },
                 }}
                 transition={{
-                    duration: reducedMotion ? 0 : 0.16,
+                    duration: reducedMotion ? 0 : 0.2,
+                    ease: reducedMotion
+                        ? undefined
+                        : ([0.4, 0, 0.2, 1] as [number, number, number, number]),
                     delay: reducedMotion || !menu.source ? 0 : 0.06,
                 }}
             >

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(