add ui sounds to button

This commit is contained in:
2026-05-01 00:30:50 +02:00
parent 33d1a4caa2
commit 2a6c10b662
2 changed files with 15 additions and 1 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
{ {
"name": "@avocadi/ui", "name": "@avocadi/ui",
"type": "module", "type": "module",
"version": "0.2.6", "version": "0.2.7",
"private": false, "private": false,
"files": [ "files": [
"dist" "dist"
+14
View File
@@ -4,6 +4,7 @@ import { type MotionProps, motion } from "motion/react";
import type * as React from "react"; import type * as React from "react";
import type { ComponentProps, FC } from "react"; import type { ComponentProps, FC } from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import useInterfaceSound from "./hooks/useInterfaceSound";
const buttonVariants = cva( const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-color \ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-color \
@@ -44,6 +45,9 @@ function Button({
variant, variant,
size, size,
asChild = false, asChild = false,
onClick,
onMouseEnter,
onMouseLeave,
...props ...props
}: React.ComponentProps<"button"> & }: React.ComponentProps<"button"> &
VariantProps<typeof buttonVariants> & { VariantProps<typeof buttonVariants> & {
@@ -51,10 +55,20 @@ function Button({
}) { }) {
const Comp = asChild ? Slot : "button"; const Comp = asChild ? Slot : "button";
const { play } = useInterfaceSound();
return ( return (
<Comp <Comp
data-slot="button" data-slot="button"
className={cn(buttonVariants({ variant, size, className }))} className={cn(buttonVariants({ variant, size, className }))}
onClick={(e) => {
onClick?.(e);
play({ id: "click1" });
}}
onMouseEnter={(e) => {
play({ id: "click2" });
onMouseEnter?.(e);
}}
{...props} {...props}
/> />
); );