src/shared/ui/IconButton/IconButton.svelte

@@ -0,0 +1,50 @@
+<!--
+    Component: IconButton
+    Shadcn button size="icon" variant="ghost" with custom styling and icon snippet
+-->
+<script lang="ts">
+import { Button } from '$shared/shadcn/ui/button';
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import type {
+    ComponentProps,
+    Snippet,
+} from 'svelte';
+
+interface Props extends ComponentProps<typeof Button> {
+    /**
+     * Direction of the rotation effect on click
+     * @default clockwise
+     */
+    rotation?: 'clockwise' | 'counterclockwise';
+    /**
+     * Icon
+     */
+    icon: Snippet<[{ className: string }]>;
+}
+
+let { rotation = 'clockwise', icon, ...rest }: Props = $props();
+</script>
+
+<Button
+    variant="ghost"
+    class="
+        group relative border-none size-9
+        bg-white/20 hover:bg-white/60
+        backdrop-blur-3xl
+        transition-all duration-200 ease-out
+        will-change-transform
+        hover:-translate-y-0.5
+        active:translate-y-0 active:scale-95 active:shadow-none
+        cursor-pointer
+        disabled:opacity-50 disabled:pointer-events-none
+    "
+    size="icon"
+    {...rest}
+>
+    {@render icon({
+    className: cn(
+        'size-4 transition-all duration-200 stroke-slate-600/50 group-hover:stroke-indigo-500 group-hover:scale-110 group-hover:stroke-3 group-active:scale-90 group-disabled:stroke-transparent',
+        rotation === 'clockwise' ? 'group-active:rotate-6' : 'group-active:-rotate-6',
+    ),
+})}
+</Button>