@passui/react 0.1.29 → 0.1.31

package/dist/types/src/components/picker/picker-trigger.d.ts

@@ -1,2 +1,3 @@
+export type PickerSize = "sm" | "md" | "lg";
 /** Shared field treatment for the popup-based Picker, date and time controls. */
-export declare function pickerTriggerStyle(className?: string): string;
+export declare function pickerTriggerStyle(className?: string, size?: PickerSize): string;

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

@@ -1,3 +1,4 @@
+import { type PickerSize } from "./picker-trigger";
 export interface PickerOption<T extends string> {
     value: T;
     label: string;
@@ -33,6 +34,8 @@ export interface PickerProps<T extends string> {
     className?: string;
     /** Prevents opening or choosing an option. @default false */
     disabled?: boolean;
+    /** Trigger height and text scale. @default "md" */
+    size?: PickerSize;
 }
 /**
  * A pop-up button: shows the chosen value and opens a list that floats
@@ -40,4 +43,4 @@ export interface PickerProps<T extends string> {
  * lists. Replaces the browser's own select, which looks foreign on every
  * platform.
  */
-export declare function Picker<T extends string>({ value, options, onChange, label, placeholder, searchable, searchPlaceholder, emptyLabel, className, onCreate, createLabel, disabled, }: PickerProps<T>): import("react").JSX.Element;
+export declare function Picker<T extends string>({ value, options, onChange, label, placeholder, searchable, searchPlaceholder, emptyLabel, className, onCreate, createLabel, disabled, size, }: PickerProps<T>): import("react").JSX.Element;

package/package.json

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

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/picker/picker-trigger.ts

@@ -1,10 +1,19 @@
 import { cn } from "../../lib/class-names"
 
+export type PickerSize = "sm" | "md" | "lg"
+
+const triggerSizes: Record<PickerSize, string> = {
+    sm: "px-2.5 py-1.5 text-caption rounded-lg",
+    md: "px-3 py-2 text-subheadline rounded-lg",
+    lg: "px-4 py-3 text-body rounded-xl",
+}
+
 /** Shared field treatment for the popup-based Picker, date and time controls. */
-export function pickerTriggerStyle(className?: string) {
+export function pickerTriggerStyle(className?: string, size: PickerSize = "md") {
     return cn(
-        "flex w-full min-w-0 items-center gap-2 rounded-lg control-field px-3 py-2 text-start text-subheadline text-label",
+        "flex w-full min-w-0 items-center gap-2 control-field text-start text-label",
         "disabled:cursor-not-allowed disabled:opacity-40",
+        triggerSizes[size],
         className
     )
 }

package/src/components/picker/picker.tsx

@@ -5,7 +5,7 @@ import { CheckIcon, SearchIcon, SelectorIcon } from "../../icons/icons"
 import { cn } from "../../lib/class-names"
 import { haptic } from "../../lib/haptics"
 import { AnchoredSurface } from "../popover/anchored-surface"
-import { pickerTriggerStyle } from "./picker-trigger"
+import { pickerTriggerStyle, type PickerSize } from "./picker-trigger"
 
 export interface PickerOption<T extends string> {
     value: T
@@ -43,6 +43,8 @@ export interface PickerProps<T extends string> {
     className?: string
     /** Prevents opening or choosing an option. @default false */
     disabled?: boolean
+    /** Trigger height and text scale. @default "md" */
+    size?: PickerSize
 }
 
 /** Long lists get a filter field, as in the system pickers. */
@@ -67,6 +69,7 @@ export function Picker<T extends string>({
     onCreate,
     createLabel,
     disabled = false,
+    size = "md",
 }: PickerProps<T>) {
     const panel = useAnchoredDisclosure(disabled)
     const { open } = panel
@@ -102,7 +105,7 @@ export function Picker<T extends string>({
                 disabled={disabled}
                 onClick={() => panel.toggle()}
                 onKeyDown={onTriggerKey}
-                className={pickerTriggerStyle(className)}
+                className={pickerTriggerStyle(className, size)}
             >
                 <span
                     lang={selected?.lang}