From cb09712daf12c9a03bbd1a7e23a01b2214c1844f Mon Sep 17 00:00:00 2001
From: Jesse Winton <jesse@appwrite.io>
Date: Mon, 7 Apr 2025 13:01:32 -0400
Subject: [PATCH] add select

---
 src/app.css                         | 52 ++++++++++++++++++++++++-----
 src/lib/components/ui/select.svelte | 15 +++++----
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/app.css b/src/app.css
index 5fbf8ff6f..0b752b7d3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -215,16 +215,50 @@
     max-width: 75rem;
 }
 
-@layer components {
-    .mask {
-        mask-image: linear-gradient(
-            to var(--mask-direction, top),
-            transparent,
-            black var(--mask-height, 32px),
-            black calc(100% - var(--mask-height, 32px)),
-            black
-        );
+@utility border-gradient {
+    --border-gradient-before: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.16) 0%,
+        rgba(255, 255, 255, 0) 100%
+    );
+    --border-gradient-after: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0.12) 0%,
+        rgba(255, 255, 255, 0) 125.11%
+    );
+    --border-radius: 0.5rem;
+
+    &::before,
+    &::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: var(--border-radius);
+        border: 1px solid transparent;
+        mask:
+            linear-gradient(#fff 0 0) padding-box,
+            linear-gradient(#fff 0 0);
+        mask-composite: exclude;
+        pointer-events: none;
     }
+
+    &::before {
+        background: var(--border-gradient-before) border-box;
+    }
+
+    &::after {
+        background: var(--border-gradient-after) border-box;
+    }
+}
+
+@utility mask {
+    mask-image: linear-gradient(
+        to var(--mask-direction, top),
+        transparent,
+        black var(--mask-height, 32px),
+        black calc(100% - var(--mask-height, 32px)),
+        black
+    );
 }
 
 :root,
diff --git a/src/lib/components/ui/select.svelte b/src/lib/components/ui/select.svelte
index 960b04a83..4a4e6101b 100644
--- a/src/lib/components/ui/select.svelte
+++ b/src/lib/components/ui/select.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-    import { classNames } from '$lib/utils/classnames';
     import { Select, type SelectProps } from 'melt/builders';
-    import type { HTMLButtonAttributes, SvelteHTMLElements } from 'svelte/elements';
 
     type Props = {
         options: Array<{
@@ -16,25 +14,30 @@
     const {
         options,
         value = $bindable(),
+        onValueChange,
         defaultValue = 'Select a value',
         ...rest
     }: Props = $props();
-    type Option = (typeof options)[number];
 
-    const select = new Select<Option['value']>({
+    const select = new Select<Props['options'][number]['value']>({
         value,
+        sameWidth: true,
+        forceVisible: false,
         ...rest
     });
 </script>
 
 <button
-    class="web-select is-colored text-primary relative flex h-8 min-w-[145px] cursor-pointer items-center text-sm leading-[1] select-none [all:unset]"
+    class="border-gradient text-primary relative flex h-8 min-w-[145px] cursor-pointer items-center text-sm leading-[1] select-none"
     {...select.trigger}
 >
     {select.value ?? defaultValue}
 </button>
 
-<div {...select.content}>
+<div
+    class="text-primary relative box-border flex max-w-xs flex-col gap-2 overflow-y-auto rounded-xl p-1 text-sm leading-[1.2] select-none"
+    {...select.content}
+>
     {#each options as option}
         <div {...select.getOption(option.value)}>
             {option.label}