update sound design

update form design

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@avocadi/ui",
 	"type": "module",
-	"version": "0.2.18",
+	"version": "0.3.0",
 	"description": "ui elements for avocadi",
 	"private": false,
 	"files": [

src/button.tsx

@@ -64,10 +64,15 @@ function Button({
 			className={cn(buttonVariants({ variant, size, className }))}
 			onClick={(e) => {
 				onClick?.(e);
-				play({ id: "click1" });
+			}}
+			onMouseUp={() => {
+				play({ id: "clickSmall" });
+			}}
+			onMouseDown={() => {
+				play({ id: "clickSmall" });
 			}}
 			onMouseEnter={(e) => {
-				play({ id: "click2" });
+				play({ id: "hover" });
 				onMouseEnter?.(e);
 			}}
 			{...props}

src/card.tsx

@@ -5,6 +5,7 @@ import { type HTMLMotionProps, motion } from "motion/react";
 import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import { CardDepthProvider, useCardDepth } from "./card-context";
+import useInterfaceSound from "./hooks/useInterfaceSound";
 import {
 	defaultTransitionCard,
 	defaultVariantsCard,
@@ -51,9 +52,26 @@ const Card = forwardRef<HTMLDivElement, CommonCardProps>(
 
 		const Comp = asChild ? Slot : "div";
 
+		const { play } = useInterfaceSound();
+
 		return (
 			<CardDepthProvider>
 				<Comp
+					onMouseEnter={() => {
+						if (interactive) {
+							play({ id: "hover" });
+						}
+					}}
+					onMouseDown={() => {
+						if (interactive) {
+							play({ id: "clickSmall" });
+						}
+					}}
+					onMouseUp={() => {
+						if (interactive) {
+							play({ id: "clickSmall" });
+						}
+					}}
 					ref={ref}
 					style={{ borderRadius: `${radius}rem`, ...style }}
 					className={cn(cardVariants({ interactive, className, padding }))}
@@ -70,11 +88,20 @@ const MCard = motion.create(Card);
 
 export const AnimatedCard: React.FC<
 	CommonCardProps & HTMLMotionProps<"div">
-> = (props) => {
+> = ({ interactive, ...props }) => {
 	return (
 		<MCard
 			variants={defaultVariantsCard}
 			transition={defaultTransitionCard}
+			{...(interactive && {
+				whileHover: {
+					scale: 1.05,
+				},
+				whileTap: {
+					scale: 0.95,
+				},
+			})}
+			interactive={interactive}
 			{...props}
 		/>
 	);

src/form/checkbox.tsx

@@ -16,7 +16,7 @@ function Checkbox({
 		<CheckboxPrimitive.Root
 			onCheckedChange={(checked) => {
 				if (onCheckedChange) onCheckedChange(checked);
-				play({ id: "click2" });
+				play({ id: "clickSmall" });
 			}}
 			data-slot="checkbox"
 			className={cn(

src/form/input-number.tsx

@@ -45,7 +45,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, Props>(
 				value={draft}
 				onFocus={(e) => {
 					setFocused(true);
-					play({ id: "click2" });
+					play({ id: "clickSmall" });
 					onFocus?.(e);
 				}}
 				onChange={(e) => {

src/form/input-text.tsx

@@ -11,11 +11,11 @@ const InputText = React.forwardRef<
 	return (
 		<input
 			onFocus={() => {
-				play({ id: "click2" });
+				play({ id: "clickSmall" });
 			}}
 			type={type}
 			className={cn(
-				"flex h-input-height w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"flex h-input-height w-full rounded-input border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 				className,
 			)}
 			ref={ref}

src/form/select.tsx

@@ -15,9 +15,9 @@ function Select({
 		<SelectPrimitive.Root
 			onOpenChange={(open) => {
 				if (open) {
-					play({ id: "click3" });
+					play({ id: "clickSmall" });
 				} else {
-					play({ id: "click4" });
+					play({ id: "clickSmall" });
 				}
 			}}
 			data-slot="select"
@@ -53,7 +53,7 @@ function SelectTrigger({
 			className={cn(
 				"border-main data-placeholder:text-secondary [&_svg:not([class*='text-'])]:text-secondary focus-visible:border-ring",
 				"focus-visible:ring-main/50 aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error",
-				"dark:bg-neutral-accent/30 dark:hover:bg-neutral-accent/50 flex w-fit items-center justify-between gap-2 rounded-full",
+				"dark:bg-neutral-accent/30 dark:hover:bg-neutral-accent/50 flex w-fit items-center justify-between gap-2 rounded-input",
 				"border bg-transparent px-4 py-2 text-sm text-main whitespace-nowrap shadow-xs transition-[color,box-shadow,background-color] outline-none",
 				"focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-input-height data-[size=sm]:h-8",
 				"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center",
@@ -133,7 +133,7 @@ function SelectItem({
 
 	return (
 		<SelectPrimitive.Item
-			onMouseEnter={() => play({ id: "click2" })}
+			onMouseEnter={() => play({ id: "hover" })}
 			data-slot="select-item"
 			className={cn(
 				"focus:bg-main/25 text-main/75 focus:text-main [&_svg:not([class*='text-'])]:text-main transition-colors",

src/hooks/useInterfaceSound.ts

@@ -1,41 +1,32 @@
 import { useSound } from "use-sound";
 import z from "zod";
-import soundSpriteButtons from "../assets/sounds/762132__ienba__ui-buttons.wav";
-import soundSprite from "../assets/sounds/842498__newlocknew__uimvmt_game-user-interface-sound-set.mp3";
 
-const UiSoundSetSprites = z.enum([
+import clickSmallSound from "../assets/sounds/clickSmall.wav";
-	"smooth1",
+import hoverSound from "../assets/sounds/hover.wav";
-	"smooth2",
+import uploadSuccessSound from "../assets/sounds/uploadSuccess.wav";
-	"lobbyCreated",
-	"gameStart",
-]);
 
-const UiButtonSprites = z.enum(["click1", "click2", "click3", "click4"]);
+export const InterfaceSounds = z.enum(["clickSmall", "hover", "uploadSuccess"]);
 
 export default function useInterfaceSound() {
-	const [playSprite1] = useSound(soundSprite, {
+	const [playHover] = useSound(hoverSound);
-		sprite: {
-			smooth1: [0, 1200],
-			smooth2: [7800, 1400],
-			lobbyCreated: [53800, 3500],
-			gameStart: [62000, 4000],
-		},
-	});
 
-	const [playSprite2] = useSound(soundSpriteButtons, {
+	const [playClickSmall] = useSound(clickSmallSound);
-		sprite: {
-			click1: [0, 1000],
-			click2: [2750, 1000],
-			click3: [5200, 1000],
-			click4: [7700, 1000],
-		},
-	});
 
-	const play = ({ id }: { id: string }) => {
+	const [playUploadSuccess] = useSound(uploadSuccessSound);
-		if (UiSoundSetSprites.safeParse(id).success) {
+
-			playSprite1({ id });
+	const play = ({ id }: { id: z.output<typeof InterfaceSounds> }) => {
-		} else if (UiButtonSprites.safeParse(id).success) {
+		switch (id) {
-			playSprite2({ id });
+			case "clickSmall":
+				playClickSmall();
+				break;
+			case "hover":
+				playHover();
+				break;
+			case "uploadSuccess":
+				playUploadSuccess();
+				break;
+			default:
+				break;
 		}
 	};
 

src/logo/text.tsx

@@ -3,6 +3,7 @@
 import { stagger, type Transition } from "motion";
 import { motion, type Variants } from "motion/react";
 import type { FC } from "react";
+import useInterfaceSound from "@/hooks/useInterfaceSound";
 import { cn, getRandomInt } from "@/lib/utils";
 
 const variants: {
@@ -46,6 +47,8 @@ export const LogoText: FC<{
 		"transition-colors",
 	);
 
+	const { play } = useInterfaceSound();
+
 	return (
 		<motion.svg
 			variants={variants.container}
@@ -53,6 +56,9 @@ export const LogoText: FC<{
 			transition={{
 				delayChildren: stagger(0.1, { from: "center" }),
 			}}
+			onClick={() => {
+				play({ id: "clickSmall" });
+			}}
 			{...(animateOnGestures && { whileHover: "hover", whileTap: "active" })}
 			className="overflow-visible"
 			width="100%"

src/styles/globals.css

@@ -49,6 +49,8 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --radius-2xl: calc(var(--radius) + 12px);
+
+  --radius-input: calc(var(--radius) + 4px);
 }
 
 @theme {