@passui/react 0.1.41 → 0.1.43

package/dist/types/src/components/locale-switcher/locale-switcher.d.ts

@@ -1,3 +1,4 @@
+export type LocaleSwitcherSize = "sm" | "md" | "lg";
 export type LocaleSwitcherProps<L extends string> = {
     locales: readonly L[];
     locale: L;
@@ -5,6 +6,8 @@ export type LocaleSwitcherProps<L extends string> = {
     /** localStorage key for where the person dragged it. */
     storageKey: string;
     label: string;
+    /** Trigger, header, list item and icon scale. @default "md" */
+    size?: LocaleSwitcherSize;
 };
 /** A draggable floating language picker that snaps to the nearest corner. */
-export declare function LocaleSwitcher<L extends string>({ locales, locale, onSelect, storageKey, label, }: LocaleSwitcherProps<L>): import("react").JSX.Element;
+export declare function LocaleSwitcher<L extends string>({ locales, locale, onSelect, storageKey, label, size, }: LocaleSwitcherProps<L>): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { type HTMLMotionProps } from "motion/react";
 import { type ReactNode, type RefObject } from "react";
+export type MorphSize = "sm" | "md" | "lg";
 export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
     /** Controls whether the overlay is presented. */
     open: boolean;
@@ -13,6 +14,8 @@ export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
     labelledBy?: string;
     /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
     dismissOnOutsidePress?: boolean;
+    /** Outer padding and panel max-width. @default "md" */
+    size?: MorphSize;
     className?: string;
     children?: ReactNode;
 }

package/dist/types/src/components/wake-slider/wake-slider.d.ts

@@ -1,3 +1,4 @@
+export type WakeSliderSize = "sm" | "md" | "lg";
 export interface WakeSliderProps {
     label: string;
     value?: number;
@@ -8,5 +9,7 @@ export interface WakeSliderProps {
     disabled?: boolean;
     className?: string;
     formatValue?: (value: number) => string;
+    /** Bar height at rest and value text scale. @default "md" */
+    size?: WakeSliderSize;
 }
-export declare function WakeSlider({ label, value: controlledValue, defaultValue, onChange, disabled, className, formatValue, bars, wake, }: WakeSliderProps): import("react").JSX.Element;
+export declare function WakeSlider({ label, value: controlledValue, defaultValue, onChange, disabled, className, formatValue, size, bars, wake, }: WakeSliderProps): import("react").JSX.Element;

package/dist/types/src/index.d.ts

@@ -46,6 +46,7 @@ export * from "./lib/haptics";
 export * from "./lib/clipboard";
 export * from "./lib/screen-edges";
 export * from "./motion/transitions";
+export { AnimatePresence, motion } from "motion/react";
 export * from "./appearance";
 export * from "./components/date-picker/date-picker";
 export * from "./components/compact-date-picker/compact-date-picker";

package/package.json

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

package/src/components/locale-switcher/locale-switcher.tsx

@@ -6,6 +6,39 @@ import { useDismiss } from "../../hooks/use-dismiss"
 import { CheckIcon, GlobeIcon } from "../../icons/icons"
 import { Popover } from "../popover/popover"
 
+export type LocaleSwitcherSize = "sm" | "md" | "lg"
+
+const triggerSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "glass-menu flex h-9 min-w-16 touch-none cursor-grab items-center justify-center gap-1.5 rounded-full px-3 text-caption2 font-semibold text-label active:cursor-grabbing",
+    md: "glass-menu flex h-12 min-w-20 touch-none cursor-grab items-center justify-center gap-2 rounded-full px-4 text-caption font-semibold text-label active:cursor-grabbing",
+    lg: "glass-menu flex h-14 min-w-24 touch-none cursor-grab items-center justify-center gap-2.5 rounded-full px-5 text-subheadline font-semibold text-label active:cursor-grabbing",
+}
+const iconSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "size-4",
+    md: "size-5",
+    lg: "size-6",
+}
+const popoverWidths: Record<LocaleSwitcherSize, string> = {
+    sm: "w-44",
+    md: "w-52",
+    lg: "w-60",
+}
+const headerSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "flex min-h-9 w-full items-center justify-center gap-1.5 rounded-4xl bg-fill/50 text-caption2 font-semibold text-label",
+    md: "flex min-h-12 w-full items-center justify-center gap-2 rounded-4xl bg-fill/50 text-caption font-semibold text-label",
+    lg: "flex min-h-14 w-full items-center justify-center gap-2.5 rounded-4xl bg-fill/50 text-subheadline font-semibold text-label",
+}
+const itemSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "flex min-h-9 items-center justify-between gap-2 rounded-4xl px-3 py-2 text-left text-caption text-label outline-none",
+    md: "flex min-h-11 items-center justify-between gap-3 rounded-4xl px-3.5 py-2.5 text-left text-footnote text-label outline-none",
+    lg: "flex min-h-13 items-center justify-between gap-3 rounded-4xl px-4 py-3 text-left text-subheadline text-label outline-none",
+}
+const checkIconSizes: Record<LocaleSwitcherSize, string> = {
+    sm: "size-3.5 shrink-0",
+    md: "size-4 shrink-0",
+    lg: "size-5 shrink-0",
+}
+
 type Side = "left" | "right"
 type Edge = "top" | "bottom"
 
@@ -58,6 +91,8 @@ export type LocaleSwitcherProps<L extends string> = {
     /** localStorage key for where the person dragged it. */
     storageKey: string
     label: string
+    /** Trigger, header, list item and icon scale. @default "md" */
+    size?: LocaleSwitcherSize
 }
 
 /** A draggable floating language picker that snaps to the nearest corner. */
@@ -67,6 +102,7 @@ export function LocaleSwitcher<L extends string>({
     onSelect,
     storageKey,
     label,
+    size = "md",
 }: LocaleSwitcherProps<L>) {
     const containerRef = useRef<HTMLDivElement>(null)
     const triggerRef = useRef<HTMLButtonElement>(null)
@@ -177,9 +213,9 @@ export function LocaleSwitcher<L extends string>({
                         setOpen(true)
                     }
                 }}
-                className="glass-menu flex h-12 min-w-20 touch-none cursor-grab items-center justify-center gap-2 rounded-full px-4 text-caption font-semibold text-label active:cursor-grabbing"
+                className={triggerSizes[size]}
             >
-                <GlobeIcon aria-hidden="true" className="size-5" />
+                <GlobeIcon aria-hidden="true" className={iconSizes[size]} />
                 {locale.toUpperCase()}
             </button>
             <Popover
@@ -189,7 +225,8 @@ export function LocaleSwitcher<L extends string>({
                 role="menu"
                 aria-label={label}
                 className={cn(
-                    "top-0 flex w-52 max-w-[calc(100vw-2.5rem)] gap-2 p-2",
+                    "top-0 flex max-w-[calc(100vw-2.5rem)] gap-2 p-2",
+                    popoverWidths[size],
                     anchor.side === "right" ? "right-0" : "left-0",
                     growsUp ? "flex-col-reverse" : "flex-col"
                 )}
@@ -201,9 +238,9 @@ export function LocaleSwitcher<L extends string>({
                         setOpen(false)
                         triggerRef.current?.focus()
                     }}
-                    className="flex min-h-12 w-full items-center justify-center gap-2 rounded-4xl bg-fill/50 text-caption font-semibold text-label"
+                    className={headerSizes[size]}
                 >
-                    <GlobeIcon aria-hidden="true" className="size-5" />
+                    <GlobeIcon aria-hidden="true" className={iconSizes[size]} />
                     {locale.toUpperCase()}
                 </button>
                 <div className="flex flex-col gap-1">
@@ -224,14 +261,17 @@ export function LocaleSwitcher<L extends string>({
                                     }
                                 }}
                                 className={cn(
-                                    "flex min-h-11 items-center justify-between gap-3 rounded-4xl px-3.5 py-2.5 text-left text-footnote text-label outline-none",
+                                    itemSizes[size],
                                     "hover:bg-fill/65 focus-visible:bg-fill/65 transition-colors",
                                     active && "bg-accent/12 font-medium"
                                 )}
                             >
                                 {item.label}
                                 {active && (
-                                    <CheckIcon aria-hidden="true" className="size-4 shrink-0" />
+                                    <CheckIcon
+                                        aria-hidden="true"
+                                        className={checkIconSizes[size]}
+                                    />
                                 )}
                             </button>
                         )

package/src/components/morph/morph.tsx

@@ -7,6 +7,19 @@ import { SheetPortal } from "../sheet/sheet-portal"
 import { cn } from "../../lib/class-names"
 import { contentCrossfade, fluidCollapse, fluidOvershoot } from "../../motion/transitions"
 
+export type MorphSize = "sm" | "md" | "lg"
+
+const outerPaddings: Record<MorphSize, string> = {
+    sm: "p-4",
+    md: "p-6",
+    lg: "p-8",
+}
+const panelMaxWidths: Record<MorphSize, string> = {
+    sm: "max-w-sm",
+    md: "max-w-[720px]",
+    lg: "max-w-3xl",
+}
+
 export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
     /** Controls whether the overlay is presented. */
     open: boolean
@@ -20,6 +33,8 @@ export interface MorphProps extends Omit<HTMLMotionProps<"div">, "children"> {
     labelledBy?: string
     /** Allow tapping the backdrop to close. Escape still calls onClose. @default true */
     dismissOnOutsidePress?: boolean
+    /** Outer padding and panel max-width. @default "md" */
+    size?: MorphSize
     className?: string
     children?: ReactNode
 }
@@ -44,6 +59,7 @@ function OpenMorph({
     label,
     labelledBy,
     dismissOnOutsidePress = true,
+    size = "md",
     className,
     children,
     ...props
@@ -131,7 +147,12 @@ function OpenMorph({
 
     return (
         <SheetPortal>
-            <div className="fixed inset-0 z-[75] flex items-center justify-center p-6">
+            <div
+                className={cn(
+                    "fixed inset-0 z-[75] flex items-center justify-center",
+                    outerPaddings[size]
+                )}
+            >
                 <motion.div
                     aria-hidden="true"
                     className="absolute inset-0 bg-black/30 backdrop-blur-md"
@@ -150,7 +171,8 @@ function OpenMorph({
                     tabIndex={-1}
                     className={cn(
                         "relative isolate flex w-full flex-col rounded-5xl outline-none",
-                        "max-h-[92%] max-w-[720px]",
+                        "max-h-[92%]",
+                        panelMaxWidths[size],
                         settled && "overflow-hidden",
                         className
                     )}

package/src/components/wake-slider/wake-slider.tsx

@@ -24,7 +24,9 @@ import { cn } from "../../lib/class-names"
    changes, which is what the reading and the colours need, and
    the loop runs only while some bar still has energy. */
 
-const H = 20 // a bar at rest, px
+const H: Record<WakeSliderSize, number> = { sm: 16, md: 20, lg: 26 } // a bar at rest, px
+
+export type WakeSliderSize = "sm" | "md" | "lg"
 
 export interface WakeSliderProps {
     label: string
@@ -36,6 +38,8 @@ export interface WakeSliderProps {
     disabled?: boolean
     className?: string
     formatValue?: (value: number) => string
+    /** Bar height at rest and value text scale. @default "md" */
+    size?: WakeSliderSize
 }
 
 export function WakeSlider({
@@ -46,6 +50,7 @@ export function WakeSlider({
     disabled = false,
     className,
     formatValue,
+    size = "md",
     /* how many bars make the track */
     bars = 36,
     /* how high the wake rises, 0..100 */
@@ -144,7 +149,10 @@ export function WakeSlider({
     const lit = Math.round((value / 100) * (n - 1))
 
     return (
-        <div className={cn("passui-wake-slider not-typeset", disabled && "opacity-40", className)}>
+        <div
+            className={cn("passui-wake-slider not-typeset", disabled && "opacity-40", className)}
+            data-size={size}
+        >
             <div
                 ref={track}
                 className="passui-wake-track"
@@ -156,7 +164,7 @@ export function WakeSlider({
                 aria-valuemin={0}
                 aria-valuemax={100}
                 aria-valuenow={value}
-                style={{ height: H * 2.6, "--wake-bars": n } as CSSProperties}
+                style={{ height: H[size] * 2.6, "--wake-bars": n } as CSSProperties}
                 onPointerDown={(e) => {
                     if (disabled || e.button !== 0) return
                     e.currentTarget.focus()
@@ -225,7 +233,7 @@ export function WakeSlider({
                         aria-hidden="true"
                         className="passui-wake-bar"
                         data-on={(value > 0 && i <= lit) || undefined}
-                        style={{ height: H }}
+                        style={{ height: H[size] }}
                     />
                 ))}
             </div>

package/src/index.ts

@@ -62,6 +62,7 @@ export * from "./lib/haptics"
 export * from "./lib/clipboard"
 export * from "./lib/screen-edges"
 export * from "./motion/transitions"
+export { AnimatePresence, motion } from "motion/react"
 export * from "./appearance"
 
 export * from "./components/date-picker/date-picker"

package/src/styles/motion-controls.css

@@ -189,6 +189,10 @@
         font-variant-numeric: tabular-nums;
         color: var(--color-label-secondary);
     }
+    .passui-wake-slider[data-size="sm"] { gap: 0.75rem; }
+    .passui-wake-slider[data-size="sm"] .passui-wake-value { font-size: var(--text-caption); }
+    .passui-wake-slider[data-size="lg"] { gap: 1.25rem; }
+    .passui-wake-slider[data-size="lg"] .passui-wake-value { font-size: var(--text-subheadline); }
     @media (prefers-reduced-motion: reduce) {
         .passui-wake-bar, .passui-search-pill { transition: none; }
         .passui-search-pill:active { scale: 1; }