{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"contact-form","type":"registry:block","title":"Contact Form","description":"Contact section with name, email, a topic select and an auto-growing message textarea with a live character counter, validation that only flags fields after blur, an async submit that shakes on error and morphs the card into a drawn-check thank-you panel, plus a side panel of contact methods.","author":"kara ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/contact-form.tsx","type":"registry:component","target":"@components/motion/contact-form.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/blocks/contact-form\n\nimport {\n Clock,\n type LucideIcon,\n Mail,\n MapPin,\n MessagesSquare,\n User,\n} from \"lucide-react\";\nimport {\n AnimatePresence,\n animate,\n motion,\n useReducedMotion,\n} from \"motion/react\";\nimport { type FormEvent, type ReactNode, useId, useMemo, useRef, useState } from \"react\";\nimport { Button, StatefulButton } from \"@/components/motion/button\";\nimport { Input } from \"@/components/motion/input\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/motion/select\";\nimport { Textarea } from \"@/components/motion/textarea\";\nimport { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ContactValues = {\n name: string;\n email: string;\n topic: string;\n message: string;\n};\n\nexport type ContactErrors = Partial>;\n\nexport type ContactTopic = { value: string; label: string };\n\nexport type ContactMethod = {\n id: string;\n icon: LucideIcon;\n label: string;\n value: ReactNode;\n /** Makes the row a link (mailto:, tel:, https:). */\n href?: string;\n};\n\nexport interface ContactFormProps {\n defaultValues?: Partial;\n /** Called with valid values. Reject with a message to show it and shake the form. */\n onSubmit?: (values: ContactValues) => void | Promise;\n validate?: (values: ContactValues) => ContactErrors;\n topics?: ContactTopic[];\n /** Side panel rows. Pass `[]` to hide the panel. */\n methods?: ContactMethod[];\n /** Character limit for the message (counter shows). Default 500. */\n maxLength?: number;\n /** Minimum message length. Default 10. */\n minLength?: number;\n title?: ReactNode;\n description?: ReactNode;\n className?: string;\n}\n\nconst DEFAULT_TOPICS: ContactTopic[] = [\n { value: \"sales\", label: \"Sales\" },\n { value: \"support\", label: \"Support\" },\n { value: \"partnership\", label: \"Partnership\" },\n { value: \"other\", label: \"Something else\" },\n];\n\nconst DEFAULT_METHODS: ContactMethod[] = [\n {\n id: \"email\",\n icon: Mail,\n label: \"Email\",\n value: \"hello@example.com\",\n href: \"mailto:hello@example.com\",\n },\n { id: \"chat\", icon: MessagesSquare, label: \"Live chat\", value: \"Mon–Fri, 9am–6pm\" },\n { id: \"office\", icon: MapPin, label: \"Office\", value: \"100 Example St, Springfield\" },\n { id: \"reply\", icon: Clock, label: \"Response time\", value: \"Within one business day\" },\n];\n\nconst EMPTY: ContactValues = { name: \"\", email: \"\", topic: \"\", message: \"\" };\nconst EMAIL_PATTERN = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\nconst SHAKE = { x: [0, -8, 8, -5, 5, -2, 0] };\n\nfunction messageOf(reason: unknown) {\n if (reason instanceof Error && reason.message) return reason.message;\n if (typeof reason === \"string\" && reason) return reason;\n return \"Something went wrong. Try again.\";\n}\n\n/**\n * Contact section: name / email / topic `Select` / message `Textarea` with a\n * live counter, \"reward early, punish late\" validation (as in `SignUpForm`),\n * an async submit through `StatefulButton` that shakes on failure, and a\n * success panel the card morphs into. A side panel lists contact methods.\n */\nexport function ContactForm({\n defaultValues,\n onSubmit,\n validate,\n topics = DEFAULT_TOPICS,\n methods = DEFAULT_METHODS,\n maxLength = 500,\n minLength = 10,\n title = \"Get in touch\",\n description = \"Tell us what you need and the right person will reply.\",\n className,\n}: ContactFormProps) {\n const reduce = useReducedMotion();\n const baseId = useId();\n const [values, setValues] = useState({ ...EMPTY, ...defaultValues });\n const [touched, setTouched] = useState>>({});\n const [status, setStatus] = useState<\"idle\" | \"loading\" | \"success\" | \"error\">(\"idle\");\n const [formError, setFormError] = useState();\n const [sent, setSent] = useState(null);\n const shakeRef = useRef(null);\n\n const errors = useMemo(() => {\n if (validate) return validate(values);\n const next: ContactErrors = {};\n if (!values.name.trim()) next.name = \"Enter your name.\";\n if (!values.email.trim()) next.email = \"Enter your email.\";\n else if (!EMAIL_PATTERN.test(values.email))\n next.email = \"That doesn't look like an email address.\";\n if (!values.topic) next.topic = \"Pick a topic.\";\n if (values.message.trim().length < minLength)\n next.message = `Write at least ${minLength} characters.`;\n return next;\n }, [values, validate, minLength]);\n\n const shown = (key: keyof ContactValues) => (touched[key] ? errors[key] : undefined);\n const ok = (key: keyof ContactValues) =>\n Boolean(touched[key]) && !errors[key] && Boolean(values[key]);\n\n const set = (key: keyof ContactValues, next: string) => {\n setValues((prev) => ({ ...prev, [key]: next }));\n if (status === \"error\") setStatus(\"idle\");\n };\n const touch = (key: keyof ContactValues) =>\n setTouched((prev) => (prev[key] ? prev : { ...prev, [key]: true }));\n\n const shake = () => {\n if (!reduce && shakeRef.current) {\n animate(shakeRef.current, SHAKE, { duration: 0.42, ease: EASE_OUT });\n }\n };\n\n const handleSubmit = async (event: FormEvent) => {\n event.preventDefault();\n setTouched({ name: true, email: true, topic: true, message: true });\n if (Object.keys(errors).length > 0) {\n shake();\n return;\n }\n setFormError(undefined);\n setStatus(\"loading\");\n try {\n await onSubmit?.(values);\n setStatus(\"success\");\n setSent(values);\n } catch (reason) {\n setStatus(\"error\");\n setFormError(messageOf(reason));\n shake();\n }\n };\n\n const restart = () => {\n setValues({ ...EMPTY, name: values.name, email: values.email });\n setTouched({});\n setStatus(\"idle\");\n setSent(null);\n };\n\n const busy = status === \"loading\";\n const topicErrorId = `${baseId}-topic-error`;\n const topicLabelId = `${baseId}-topic-label`;\n const offset = reduce ? 0 : 16;\n\n return (\n
\n 0 && \"@3xl:grid-cols-[minmax(0,1fr)_14rem]\",\n )}\n >\n {/* The card resizes between the form and the thank-you panel; `layout`\n is a layout job here by design, with content counter-corrected. */}\n \n \n {sent ? (\n \n \n \n \n \n \n
\n

\n Message sent\n

\n

\n Thanks, {sent.name.split(\" \")[0]}. We'll reply to{\" \"}\n {sent.email} soon.\n

\n
\n \n \n ) : (\n \n
\n {title || description ? (\n
\n {title ? (\n

\n {title}\n

\n ) : null}\n {description ? (\n

{description}

\n ) : null}\n
\n ) : null}\n
\n }\n disabled={busy}\n value={values.name}\n onChange={(next) => set(\"name\", next)}\n onBlur={() => touch(\"name\")}\n error={shown(\"name\")}\n success={ok(\"name\")}\n />\n }\n disabled={busy}\n value={values.email}\n onChange={(next) => set(\"email\", next)}\n onBlur={() => touch(\"email\")}\n error={shown(\"email\")}\n success={ok(\"email\")}\n />\n
\n
\n \n Topic\n \n \n {\n set(\"topic\", next);\n touch(\"topic\");\n }}\n onOpenChange={(open) => {\n if (!open) touch(\"topic\");\n }}\n >\n \n \n \n \n {topics.map((topic) => (\n \n {topic.label}\n \n ))}\n \n \n \n \n {shown(\"topic\") ? (\n \n {shown(\"topic\")}\n \n ) : null}\n \n
\n set(\"message\", next)}\n onBlur={() => touch(\"message\")}\n error={shown(\"message\")}\n />\n \n {formError && status === \"error\" ? (\n \n {formError}\n \n ) : null}\n \n \n Send message\n \n
\n \n )}\n \n \n\n {methods.length > 0 ? (\n \n

\n Other ways to reach us\n

\n {methods.map((method) => {\n const Icon = method.icon;\n const body = (\n <>\n \n \n \n \n {method.label}\n \n {method.value}\n \n \n \n );\n const rowClass =\n \"flex items-center gap-2.5 rounded-xl px-2 py-1.5 outline-none transition-colors\";\n return method.href ? (\n \n {body}\n \n ) : (\n
\n {body}\n
\n );\n })}\n \n ) : null}\n
\n \n );\n}\n"},{"path":"components/motion/button/index.tsx","type":"registry:component","target":"@components/motion/button/index.tsx","content":"export type {\n ButtonLinkProps,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from \"./base\";\nexport { Button, ButtonLink } from \"./base\";\nexport type { MagneticButtonProps } from \"./magnetic\";\nexport { MagneticButton } from \"./magnetic\";\nexport type { ButtonState, StatefulButtonProps } from \"./stateful\";\nexport { StatefulButton } from \"./stateful\";\n"},{"path":"components/motion/input.tsx","type":"registry:component","target":"@components/motion/input.tsx","content":"\"use client\";\n\nimport {\n AnimatePresence,\n animate,\n motion,\n useReducedMotion,\n} from \"motion/react\";\nimport {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type InputHTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type InputClassNames = {\n root?: string;\n label?: string;\n field?: string;\n input?: string;\n leftIcon?: string;\n rightIcon?: string;\n successIcon?: string;\n errorMessage?: string;\n};\n\nexport interface InputProps extends Omit<\n InputHTMLAttributes,\n \"value\" | \"defaultValue\" | \"onChange\"\n> {\n label?: string;\n value?: string;\n defaultValue?: string;\n onChange?: (value: string) => void;\n /** Truthy error triggers a shake, red border and (if a string) a message. */\n error?: string | boolean;\n success?: boolean;\n leftIcon?: ReactNode;\n rightIcon?: ReactNode;\n className?: string;\n classNames?: InputClassNames;\n}\n\nexport const Input = forwardRef(function Input(\n {\n label,\n value: valueProp,\n defaultValue,\n onChange,\n onFocus,\n onBlur,\n error,\n success,\n leftIcon,\n rightIcon,\n className,\n classNames,\n disabled,\n id: idProp,\n type,\n ...rest\n },\n ref,\n) {\n const reactId = useId();\n const id = idProp ?? reactId;\n const reduce = useReducedMotion();\n\n const controlled = valueProp !== undefined;\n const [internal, setInternal] = useState(defaultValue ?? \"\");\n const value = controlled ? (valueProp ?? \"\") : internal;\n\n const [focused, setFocused] = useState(false);\n\n const fieldRef = useRef(null);\n\n const hasError = Boolean(error);\n const errorMessage = typeof error === \"string\" ? error : null;\n\n // Right edge shows the success check, otherwise the caller's right icon.\n const rightSlot = success ? null : rightIcon;\n\n // Shake the field when an error appears.\n useEffect(() => {\n if (!fieldRef.current || reduce || !hasError) return;\n animate(\n fieldRef.current,\n { x: [0, -6, 6, -4, 4, -2, 0] },\n { duration: 0.45 },\n );\n }, [hasError, reduce]);\n\n const handleChange = (next: string) => {\n if (!controlled) setInternal(next);\n onChange?.(next);\n };\n\n return (\n \n {label ? (\n \n {label}\n \n ) : null}\n\n \n {leftIcon ? (\n \n {leftIcon}\n \n ) : null}\n\n handleChange(e.target.value)}\n onFocus={(event) => {\n setFocused(true);\n onFocus?.(event);\n }}\n onBlur={(event) => {\n setFocused(false);\n onBlur?.(event);\n }}\n className={cn(\n \"peer h-full w-full bg-transparent text-base leading-6 text-foreground caret-foreground outline-none\",\n \"placeholder:text-muted-foreground/60\",\n leftIcon ? \"pl-10\" : \"pl-3.5\",\n rightSlot || success ? \"pr-10\" : \"pr-3.5\",\n disabled && \"cursor-not-allowed\",\n classNames?.input,\n )}\n />\n\n {success ? (\n \n \n \n ) : rightSlot ? (\n \n {rightSlot}\n \n ) : null}\n \n\n \n {errorMessage ? (\n \n {errorMessage}\n \n ) : null}\n \n \n );\n});\n"},{"path":"components/motion/select.tsx","type":"registry:component","target":"@components/motion/select.tsx","content":"\"use client\";\n\nimport { Check, ChevronDown } from \"lucide-react\";\nimport {\n motion,\n type Transition,\n useReducedMotion,\n type Variants,\n} from \"motion/react\";\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { TOUCH_TARGET_CLASS } from \"@/lib/touch\";\nimport { cn } from \"@/lib/utils\";\n\nconst INSTANT_TRANSITION: Transition = { duration: 0 };\n\n// Spring with bounce powers the unfold/separation; per-property timings in the\n// content choreograph it (see SelectContent). Mirrors bouncy-accordion's feel.\nconst CHEVRON_TRANSITION: Transition = { type: \"spring\", duration: 0.4, bounce: 0.3 };\n\nconst LIST_VARIANTS: Variants = {\n hidden: {},\n show: { transition: { staggerChildren: 0.035, delayChildren: 0.05 } },\n};\nconst ITEM_VARIANTS: Variants = {\n hidden: { opacity: 0, y: -6, filter: \"blur(3px)\" },\n show: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n};\n\ntype Placement = \"bottom\" | \"top\";\n\ninterface SelectContextValue {\n value: string | undefined;\n open: boolean;\n setOpen: (open: boolean) => void;\n select: (value: string) => void;\n register: (value: string, label: string) => void;\n unregister: (value: string) => void;\n labelFor: (value: string | undefined) => string | undefined;\n reduce: boolean;\n triggerId: string;\n listId: string;\n disabled: boolean;\n placement: Placement;\n setPlacement: (p: Placement) => void;\n}\n\nconst SelectContext = createContext(null);\n\nfunction useSelectContext(component: string) {\n const ctx = useContext(SelectContext);\n if (!ctx) throw new Error(`${component} must be used within ` and other void elements have no\n * `::after`. Put it on the wrapper or label instead.\n * - It must not already use `::after` for something visible.\n *\n * Centered 44px means two 32px buttons with a 4px gap overlap by 8px; the\n * later one wins that strip, which still ends well short of the earlier\n * button's visual center. Below a ~32px pitch the later neighbour starts\n * eating into that center — use `TOUCH_TARGET_Y_CLASS` for such dense rows.\n *\n * The overhang is real geometry: inside a scroll container it counts as\n * scrollable overflow, so a control flush against a scroller's edge can add a\n * few pixels of scroll on touch screens. Give such a scroller a little padding\n * on that side.\n */\nexport const TOUCH_TARGET_CLASS =\n \"pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-[max(100%,2.75rem)] pointer-coarse:after:-translate-x-1/2 pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']\";\n\n/**\n * `TOUCH_TARGET_CLASS` on the vertical axis only, for controls packed tighter\n * than ~32px apart in a row (pagination dots, dense swatches), where growing\n * sideways would hand most of each control to its neighbour. Same rules.\n */\nexport const TOUCH_TARGET_Y_CLASS =\n \"pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:top-1/2 pointer-coarse:after:h-[max(100%,2.75rem)] pointer-coarse:after:-translate-y-1/2 pointer-coarse:after:content-['']\";\n\n/**\n * Suppress selection on `element` for as long as a gesture is running on it,\n * whatever the primary pointer of the machine happens to be. Returns the\n * release. Inline, so it wins over the class above and is gone again the\n * moment the gesture ends.\n *\n * For the press gestures a native selection would otherwise steal — a\n * long-press that opens a menu. Elsewhere prefer the classes: a surface that\n * takes selection away for the whole session is a surface whose text nobody\n * can copy.\n */\nexport function holdSelection(element: HTMLElement) {\n element.style.setProperty(\"user-select\", \"none\");\n element.style.setProperty(\"-webkit-user-select\", \"none\");\n return () => {\n element.style.removeProperty(\"user-select\");\n element.style.removeProperty(\"-webkit-user-select\");\n };\n}\n\n/**\n * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer\n * is already gone by the time the handler runs — routine on iOS, where the\n * system can claim the touch first — and an uncaught throw takes the rest of\n * the handler, the gesture included, down with it. Touch pointers carry\n * implicit capture anyway, so losing it is never fatal.\n */\nexport function capturePointer(element: Element, pointerId: number) {\n try {\n element.setPointerCapture(pointerId);\n } catch {\n // Pointer is no longer active — implicit capture still applies on touch.\n }\n}\n\n/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */\nexport function releasePointer(element: Element, pointerId: number) {\n try {\n if (element.hasPointerCapture(pointerId)) {\n element.releasePointerCapture(pointerId);\n }\n } catch {\n // Capture was already dropped by the browser.\n }\n}\n\n/**\n * Whether this event came from a pointer that is *hovering*: not a touch, and\n * not currently pressed. Which input the user is holding right now is not\n * something a device capability can answer — a touchscreen laptop hovers and\n * taps, and iPadOS reports a fine hovering pointer for a finger — so both\n * paths stay live and each handler branches on the event it was given.\n *\n * A pen resting on the glass is making contact, not hovering: `buttons` is the\n * tell, and it sends a pen tap down the same route a finger takes.\n *\n * This answers what an *enter* asks. A leave is the other half of a pair and\n * has to be read against the enter that started it — `useHoverGesture` in\n * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it\n * rather than asking this question twice.\n */\nexport const isHoveringPointer = (event: {\n pointerType: string;\n buttons: number;\n}) => event.pointerType !== \"touch\" && event.buttons === 0;\n"},{"path":"lib/hooks/use-hover-capable.ts","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n"},{"path":"components/motion/magnetic.tsx","type":"registry:component","target":"@components/motion/magnetic.tsx","content":"\"use client\";\n\nimport { motion, useMotionValue, useReducedMotion, useSpring } from \"motion/react\";\nimport { useRef, type ReactNode } from \"react\";\nimport { SPRING_MOUSE } from \"@/lib/ease\";\nimport { useHoverCapable } from \"@/lib/hooks/use-hover-capable\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MagneticProps {\n children: ReactNode;\n strength?: number;\n className?: string;\n}\n\nexport function Magnetic({ children, strength = 0.35, className }: MagneticProps) {\n const ref = useRef(null);\n const reduce = useReducedMotion();\n const canHover = useHoverCapable();\n // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion.\n const enabled = !reduce && canHover;\n const x = useMotionValue(0);\n const y = useMotionValue(0);\n const sx = useSpring(x, SPRING_MOUSE);\n const sy = useSpring(y, SPRING_MOUSE);\n\n const onMove = (e: React.MouseEvent) => {\n const el = ref.current;\n if (!el || !enabled) return;\n const rect = el.getBoundingClientRect();\n x.set((e.clientX - rect.left - rect.width / 2) * strength);\n y.set((e.clientY - rect.top - rect.height / 2) * strength);\n };\n\n const onLeave = () => {\n x.set(0);\n y.set(0);\n };\n\n return (\n \n {children}\n \n );\n}\n"}]}