From 433fd2f7e6a5a8c68a73b900897a7a523e15fbd2 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 30 Jan 2026 00:52:17 +0300
Subject: [PATCH] feat(IconButton): create IconButton component to reuse styles
 for small buttons

---
 src/shared/ui/IconButton/IconButton.svelte | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/shared/ui/IconButton/IconButton.svelte

diff --git a/src/shared/ui/IconButton/IconButton.svelte b/src/shared/ui/IconButton/IconButton.svelte
new file mode 100644
index 0000000..e289c8e
--- /dev/null
+++ b/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>