[PATCH v1 07/13] feat(ui): add avatar ui

[Muhammad Rizki <kiizuha@gnuweeb.org>]

Signed-off-by: Muhammad Rizki <kiizuha@gnuweeb.org>
---
 package-lock.json                             | 50 ++++++++-----------
 package.json                                  |  2 +-
 .../ui/avatar/avatar-fallback.svelte          | 16 ++++++
 .../components/ui/avatar/avatar-image.svelte  | 21 ++++++++
 src/lib/components/ui/avatar/avatar.svelte    | 18 +++++++
 src/lib/components/ui/avatar/index.ts         | 13 +++++
 6 files changed, 90 insertions(+), 30 deletions(-)
 create mode 100644 src/lib/components/ui/avatar/avatar-fallback.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar-image.svelte
 create mode 100644 src/lib/components/ui/avatar/avatar.svelte
 create mode 100644 src/lib/components/ui/avatar/index.ts

diff --git a/package-lock.json b/package-lock.json
index 313f13f..f0201f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
         "@sveltejs/kit": "^2.0.0",
         "@sveltejs/vite-plugin-svelte": "^4.0.0",
         "autoprefixer": "^10.4.20",
-        "bits-ui": "^1.0.0-next.77",
+        "bits-ui": "^1.1.0",
         "clsx": "^2.1.1",
         "eslint": "^9.7.0",
         "eslint-config-prettier": "^9.1.0",
@@ -1898,9 +1898,9 @@
       }
     },
     "node_modules/bits-ui": {
-      "version": "1.0.0-next.77",
-      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.0.0-next.77.tgz",
-      "integrity": "sha512-IV0AyVEvsRkXv4s/fl4iea5E9W2b9EBf98s9mRMKMc1xHxM9MmtM2r6MZMqftHQ/c+gHTIt3A9EKuTlh7uay8w==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.1.0.tgz",
+      "integrity": "sha512-fnMO3LrNIjWfirm0UJ/kewH5PTi4BobhGpLoZzN2bc/YnsNQ0NcIWkLDJdrrNSTpcfYuwlJpIVGK96tc1FXa5Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1908,8 +1908,9 @@
         "@floating-ui/dom": "^1.6.7",
         "@internationalized/date": "^3.5.6",
         "esm-env": "^1.1.2",
-        "runed": "^0.22.0",
-        "svelte-toolbelt": "^0.7.0"
+        "runed": "^0.23.2",
+        "svelte-toolbelt": "^0.7.1",
+        "tabbable": "^6.2.0"
       },
       "engines": {
         "node": ">=18",
@@ -4245,9 +4246,9 @@
       }
     },
     "node_modules/runed": {
-      "version": "0.22.0",
-      "resolved": "https://registry.npmjs.org/runed/-/runed-0.22.0.tgz",
-      "integrity": "sha512-ZWVXWhOr0P5xdNgtviz6D1ivLUDWKLCbeC5SUEJ3zBkqLReVqWHenFxMNFeFaiC5bfxhFxyxzyzB+98uYFtwdA==",
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/runed/-/runed-0.23.4.tgz",
+      "integrity": "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA==",
       "dev": true,
       "funding": [
         "https://github.com/sponsors/huntabyte",
@@ -4697,16 +4698,16 @@
       }
     },
     "node_modules/svelte-toolbelt": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.7.0.tgz",
-      "integrity": "sha512-i/Tv4NwAWWqJnK5H0F8y/ubDnogDYlwwyzKhrspTUFzrFuGnYshqd2g4/R43ds841wmaFiSW/HsdsdWhPOlrAA==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.7.1.tgz",
+      "integrity": "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ==",
       "dev": true,
       "funding": [
         "https://github.com/sponsors/huntabyte"
       ],
       "dependencies": {
         "clsx": "^2.1.1",
-        "runed": "^0.20.0",
+        "runed": "^0.23.2",
         "style-to-object": "^1.0.8"
       },
       "engines": {
@@ -4717,22 +4718,6 @@
         "svelte": "^5.0.0"
       }
     },
-    "node_modules/svelte-toolbelt/node_modules/runed": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/runed/-/runed-0.20.0.tgz",
-      "integrity": "sha512-YqPxaUdWL5nUXuSF+/v8a+NkVN8TGyEGbQwTA25fLY35MR/2bvZ1c6sCbudoo1kT4CAJPh4kUkcgGVxW127WKw==",
-      "dev": true,
-      "funding": [
-        "https://github.com/sponsors/huntabyte",
-        "https://github.com/sponsors/tglide"
-      ],
-      "dependencies": {
-        "esm-env": "^1.0.0"
-      },
-      "peerDependencies": {
-        "svelte": "^5.7.0"
-      }
-    },
     "node_modules/sveltekit-superforms": {
       "version": "2.22.1",
       "resolved": "https://registry.npmjs.org/sveltekit-superforms/-/sveltekit-superforms-2.22.1.tgz",
@@ -4830,6 +4815,13 @@
         }
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
diff --git a/package.json b/package.json
index 16073a5..623223c 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "autoprefixer": "^10.4.20",
-    "bits-ui": "^1.0.0-next.77",
+    "bits-ui": "^1.1.0",
     "clsx": "^2.1.1",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
diff --git a/src/lib/components/ui/avatar/avatar-fallback.svelte b/src/lib/components/ui/avatar/avatar-fallback.svelte
new file mode 100644
index 0000000..344353c
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-fallback.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "$utils";
+
+  let {
+    class: className,
+    ref = $bindable(null),
+    ...restProps
+  }: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+  bind:ref
+  class={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/avatar/avatar-image.svelte b/src/lib/components/ui/avatar/avatar-image.svelte
new file mode 100644
index 0000000..0878ef3
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar-image.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "$utils";
+
+  let {
+    class: className,
+    src,
+    alt,
+    ref = $bindable(null),
+    ...restProps
+  }: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+  bind:ref
+  {src}
+  {alt}
+  class={cn("aspect-square h-full w-full", className)}
+  draggable={false}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/avatar/avatar.svelte b/src/lib/components/ui/avatar/avatar.svelte
new file mode 100644
index 0000000..019894e
--- /dev/null
+++ b/src/lib/components/ui/avatar/avatar.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { Avatar as AvatarPrimitive } from "bits-ui";
+  import { cn } from "$utils";
+
+  let {
+    class: className,
+    ref = $bindable(null),
+    loadingStatus = $bindable("loading"),
+    ...restProps
+  }: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+  bind:loadingStatus
+  bind:ref
+  class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+  {...restProps}
+/>
diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts
new file mode 100644
index 0000000..1efa894
--- /dev/null
+++ b/src/lib/components/ui/avatar/index.ts
@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+  Root,
+  Image,
+  Fallback,
+  //
+  Root as Avatar,
+  Image as AvatarImage,
+  Fallback as AvatarFallback
+};
-- 
Muhammad Rizki