@passui/react 0.1.14 → 0.1.16

package/package.json

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

package/src/components/dialog/dialog-host.tsx

@@ -90,7 +90,7 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
                 exit={{ opacity: 0 }}
-                transition={{ duration: 0.2 }}
+                transition={spring.smooth}
                 onClick={() => settleDialog(false)}
             />
             <motion.div
@@ -107,7 +107,7 @@ function ConfirmCard({ dialog }: { dialog: PendingDialog }) {
                     opacity: 0,
                     scale: 0.94,
                     y: 6,
-                    transition: { duration: 0.15 },
+                    transition: spring.snappy,
                 }}
                 transition={spring.bouncy}
             >

package/src/components/dialog/dialog.tsx

@@ -7,6 +7,7 @@ import {
 import { createPortal } from "react-dom"
 import { Button } from "@passui/react/button"
 import { cn } from "@passui/react/cn"
+import { spring } from "../../motion/transitions"
 import {
     createContext,
     useContext,
@@ -129,12 +130,11 @@ export function Dialog({
                                 : 0,
                             opacity: 0,
                         }}
-                        transition={{
-                            duration: reducedMotion
-                                ? 0
-                                : 0.28,
-                            ease: [0.22, 1, 0.36, 1],
-                        }}
+                        transition={
+                            reducedMotion
+                                ? { duration: 0 }
+                                : spring.smooth
+                        }
                         className="overflow-hidden"
                     >
                         {body}

package/src/components/tab-view/tab-view.tsx

@@ -10,12 +10,18 @@ import { cn } from "../../lib/class-names"
 export function TabView<Value extends string>({
     options,
     defaultValue,
+    value: controlledValue,
+    onValueChange,
+    align = "center",
     label,
     children,
     className,
 }: {
     options: readonly { value: Value; label: string }[]
     defaultValue: Value
+    value?: Value
+    onValueChange?: (value: Value) => void
+    align?: "start" | "center"
     label: string
     children: (value: Value) => ReactNode
     className?: string
@@ -23,10 +29,15 @@ export function TabView<Value extends string>({
     const id = useId()
     const buttons = useRef<(HTMLButtonElement | null)[]>([])
     const [selected, setSelected] = useState(defaultValue)
+    const current = controlledValue ?? selected
+    function select(next: Value) {
+        if (controlledValue === undefined) setSelected(next)
+        onValueChange?.(next)
+    }
     const value = options.some(
-        (option) => option.value === selected
+        (option) => option.value === current
     )
-        ? selected
+        ? current
         : options[0]?.value
     if (value === undefined) return null
 
@@ -40,7 +51,12 @@ export function TabView<Value extends string>({
             <div
                 role="tablist"
                 aria-label={label}
-                className="mx-auto inline-flex h-8 max-w-full items-center justify-center gap-5 p-[3px]"
+                className={cn(
+                    "inline-flex h-8 w-fit max-w-full items-center gap-5 p-[3px]",
+                    align === "start"
+                        ? "self-start"
+                        : "mx-auto justify-center"
+                )}
             >
                 {options.map((option, index) => (
                     <button
@@ -56,9 +72,7 @@ export function TabView<Value extends string>({
                         ref={(element) => {
                             buttons.current[index] = element
                         }}
-                        onClick={() =>
-                            setSelected(option.value)
-                        }
+                        onClick={() => select(option.value)}
                         onKeyDown={(event) => {
                             const rtl =
                                 getComputedStyle(
@@ -82,8 +96,7 @@ export function TabView<Value extends string>({
                                 (next + options.length) %
                                 options.length
                             const option = options[next]
-                            if (option)
-                                setSelected(option.value)
+                            if (option) select(option.value)
                             buttons.current[next]?.focus()
                         }}
                         className={cn(

package/src/components/toast/toaster.tsx

@@ -180,7 +180,7 @@ function ToastItem({
                 opacity: 0,
                 y: -18,
                 scale: 0.6,
-                transition: { duration: 0.22 },
+                transition: spring.snappy,
             }}
             transition={spring.bouncy}
             drag="y"

package/src/motion/transitions.ts

@@ -16,7 +16,7 @@ export const popoverMotion = {
         opacity: 0,
         scale: 0.97,
         y: -4,
-        transition: { duration: 0.12 },
+        transition: spring.snappy,
     },
     transition: spring.snappy,
 } as const