52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T147a,"use client" import { CheckIcon } from "lucide-react" import { AnimatePresence, motion, useReducedMotion, type Transition, type Variants, } from "motion/react" import { useEffect } from "react" import type * as React from "react" import { Button } from "@/components/ui/button" import { Spinner } from "@/components/ui/spinner" import { useControllableState } from "@/hooks/use-controllable-state" import { cn } from "@/lib/utils" export type ButtonStatus = "idle" | "loading" | "success" const DEFAULT_SUCCESS_DURATION = 1500 const swapVariants: Variants = { initial: { opacity: 0, y: 8, filter: "blur(4px)" }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, y: -8, filter: "blur(4px)" }, } const reducedMotionVariants: Variants = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, } // A spring keeps its velocity when the status changes mid-swap; a cubic-bezier // would restart from zero. const swapTransition: Transition = { type: "spring", duration: 0.3, bounce: 0, } // Bounce only on the entrance, and only on movement: opacity and blur would // overshoot. const successVariants: Variants = { ...swapVariants, animate: { ...swapVariants.animate, transition: { type: "spring", duration: 0.45, bounce: 0.35, opacity: swapTransition, filter: swapTransition, }, }, } export type StatusButtonProps = Omit< React.ComponentProps, "onClick" | "children" | "loading" > & { children: React.ReactNode /** * Uncontrolled mode: loading while the returned promise is pending, then * success. Omit it when the form owns the submission. */ onClick?: (event: React.MouseEvent) => void | Promise /** Controlled mode, e.g. derived from `useActionState`. */ status?: ButtonStatus /** Also called for the automatic return to idle after `successDuration`. */ onStatusChange?: (status: ButtonStatus) => void /** Shown next to the check icon, e.g. "Submitted" for a "Submit" button. */ successLabel?: React.ReactNode successDuration?: number } export function StatusButton({ children, className, onClick, status: statusProp, onStatusChange, successLabel, successDuration = DEFAULT_SUCCESS_DURATION, ...props }: StatusButtonProps) { const [status, setStatus] = useControllableState({ prop: statusProp, defaultProp: "idle", onChange: onStatusChange, caller: "StatusButton", }) const shouldReduceMotion = useReducedMotion() useEffect(() => { if (status !== "success") return const timeoutId = window.setTimeout( () => setStatus("idle"), successDuration ) return () => window.clearTimeout(timeoutId) }, [status, successDuration, setStatus]) const isBusy = status !== "idle" const handleClick = async (event: React.MouseEvent) => { if (isBusy) { event.preventDefault() return } if (!onClick) return setStatus("loading") try { await onClick(event) setStatus("success") } catch (error) { setStatus("idle") throw error } } const variants = shouldReduceMotion ? reducedMotionVariants : swapVariants const transition = shouldReduceMotion ? { duration: 0 } : swapTransition const successContent = ( <> {successLabel ?? Success} ) return ( ) } 55:Ted4,// Thanks @radix-ui import * as React from "react" // use-layout-effect.tsx // https://github.com/radix-ui/primitives/blob/main/packages/react/use-layout-effect/src/use-layout-effect.tsx /** * On the server, React emits a warning when calling `useLayoutEffect`. * This is because neither `useLayoutEffect` nor `useEffect` run on the server. * We use this safe version which suppresses the warning by replacing it with a noop on the server. * * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect */ const useLayoutEffect = globalThis?.document ? React.useLayoutEffect : () => {} // use-controllable-state.tsx // https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/use-controllable-state.tsx // Prevent bundlers from trying to optimize the import const useInsertionEffect: typeof useLayoutEffect = (React as never)[" useInsertionEffect ".trim().toString()] || useLayoutEffect type ChangeHandler = (state: T) => void type SetStateFn = React.Dispatch> interface UseControllableStateParams { prop?: T | undefined defaultProp: T onChange?: ChangeHandler caller?: string } export function useControllableState({ prop, defaultProp, onChange = () => {}, caller, }: UseControllableStateParams): [T, SetStateFn] { const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({ defaultProp, onChange, }) const isControlled = prop !== undefined const value = isControlled ? prop : uncontrolledProp // OK to disable conditionally calling hooks here because they will always run // consistently in the same environment. Bundlers should be able to remove the // code block entirely in production. /* eslint-disable react-hooks/rules-of-hooks */ if (process.env.NODE_ENV !== "production") { const isControlledRef = React.useRef(prop !== undefined) React.useEffect(() => { const wasControlled = isControlledRef.current if (wasControlled !== isControlled) { const from = wasControlled ? "controlled" : "uncontrolled" const to = isControlled ? "controlled" : "uncontrolled" console.warn( `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.` ) } isControlledRef.current = isControlled }, [isControlled, caller]) } /* eslint-enable react-hooks/rules-of-hooks */ const setValue = React.useCallback>( (nextValue) => { if (isControlled) { const value = isFunction(nextValue) ? nextValue(prop) : nextValue if (value !== prop) { onChangeRef.current?.(value) } } else { setUncontrolledProp(nextValue) } }, [isControlled, prop, setUncontrolledProp, onChangeRef] ) return [value, setValue] } function useUncontrolledState({ defaultProp, onChange, }: Omit, "prop">): [ Value: T, setValue: React.Dispatch>, OnChangeRef: React.RefObject | undefined>, ] { const [value, setValue] = React.useState(defaultProp) const prevValueRef = React.useRef(value) const onChangeRef = React.useRef(onChange) useInsertionEffect(() => { onChangeRef.current = onChange }, [onChange]) React.useEffect(() => { if (prevValueRef.current !== value) { onChangeRef.current?.(value) prevValueRef.current = value } }, [value, prevValueRef]) return [value, setValue, onChangeRef] } function isFunction(value: unknown): value is (...args: never[]) => unknown { return typeof value === "function" } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@persianlabsui","registryDependencies":["utils","@persianlabsui/button","@persianlabsui/spinner"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/status-button.tsx","content":"$54","type":"registry:ui"},{"path":"registry/base/hooks/use-controllable-state.ts","content":"$55","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]