From 0f2847a51a89af6358fc93c858d70ebd533a0481 Mon Sep 17 00:00:00 2001
From: Aaron Geiger <aaron@geigr.dev>
Date: Thu, 20 Jun 2024 23:33:30 +0200
Subject: [PATCH] Setup select element

---
 liberica/bun.lockb                      | Bin 200184 -> 200184 bytes
 liberica/src/components/lila/select.tsx |  21 +++++++++++++++++++--
 liberica/src/page/Debug.tsx             |   8 +++++---
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/liberica/bun.lockb b/liberica/bun.lockb
index 052e87610d14ea3f107bf1da69741907c0359c00..c840905d247507e3b6fe536d6372e9716ae28c00 100755
GIT binary patch
delta 418
zcmXw#ODIHP7>2*|&zUpSEN0S}8>LVZfAgQqoHHdhBxRx8a!E-vXL9YF7}?B}A}iVa
ziDV@^l0wRYg$RX(EM}ud7P3;NDVI;Ne%|MOzrNg>JGbUe%?tbFS`;*XBa*PrWC#F&
z8z2?(ReICq?N<fD05hmU6{tYsL9%$fbr+bqt@$Sr;AKwY3(Jf~paVle42?WC>~+=}
zSqw#~%-ftKDCj)lB&Gh?ur+Fq+W<!$skt4`b`CQ!s__jcNvH~B{~EgNx7nU=-x*Ss
zVh6w%k}!7XSKinAJkL!?B2=Y1uaiiiG>Yq!6P7(>S<pXtbNSj@kj8|83B}-35-D~l
zc*&APm_wy1Kaq&v)KG#J0l<sBr`G1-LqqF5S~_J4WiV~p!#E06qUmWa%qNj(_zMQm
zi%t<bVx}=Jo_k-A;Lh)rgGqD3LdV$sTt2^8{UG>2ys_RzLM4n*Z4AvaH0z$~yLt7Z
Xf?TIEW!!d=xF9cNT;w3*a)hNHwWMv%

delta 418
zcmXw#O(+Cm7{{M^cXpQA!){u;tgS7S#M`_xvpb{2g{1bNEb@_($ZS}e$ww}$6gkP|
zO)ELcjiiur;II)22RZCTtsLZ}Y|6)@IRAdX|5Hys?ars&sRd!5T#16huSF8n4S)au
zxB*h7zDn<WdHZF7(9aC2P*tx$;z6=>ymcFxzNz^qEW*Q1;tMiHWr(9xg3|Cq<6cLt
zkwYm;8E<ov5+TA9P7?A*hpbU^+y*#`r{;D%+j(^AsKPg#B%v|L{VjCbue06XzB8m6
zjp8(XAqnF4$Lia9uji>5iA*)B@p_2_LJBGqNy{FzEa)4!zIcfh%%fqTp)x)xkz$8J
zBYasR%%M`1pGd@SDpUbz6#%@rdunYS-Z#eXu+nMW@5L$89>SwgC7Pa=!jBmw5h_zA
zLk~7Z*ofJt5i#R^Mxx=D7{I`cnY6Gmc0X4#=WFi-A4sFT!9_~TbjsKmmSHUG9~-)O
Z^^%HQ$5Q6Di;M_tG3z1+S(hUy{Q%?6ZR`L5

diff --git a/liberica/src/components/lila/select.tsx b/liberica/src/components/lila/select.tsx
index 0a7c01a..e9d3e26 100644
--- a/liberica/src/components/lila/select.tsx
+++ b/liberica/src/components/lila/select.tsx
@@ -1,8 +1,25 @@
-export type SelectProps = Omit<React.ComponentProps<"select">, "className">;
+import { classes } from "components/lila";
+
+export type SelectProps = Omit<
+    React.ComponentProps<"select">,
+    "className" | "size"
+> &
+    SelectPropsExt;
+export interface SelectPropsExt {
+    size?: keyof typeof INPUT_SIZES;
+    noLogo?: boolean;
+}
+
+export const BASE =
+    "text-on-muted rounded-xl bg-muted/20 outline-none ring-muted focus:ring-2";
+
+export const INPUT_SIZES = {
+    lg: "px-6 py-3 text-md",
+};
 
 export function Select(props: SelectProps) {
     return (
-        <select className="text-text rounded-xl bg-muted/20 px-6 py-3">
+        <select className={classes(BASE, INPUT_SIZES[props.size ?? "lg"])}>
             {props.children}
         </select>
     );
diff --git a/liberica/src/page/Debug.tsx b/liberica/src/page/Debug.tsx
index 28fb73c..dbd634c 100644
--- a/liberica/src/page/Debug.tsx
+++ b/liberica/src/page/Debug.tsx
@@ -6,6 +6,7 @@ import {
     ButtonVariant,
 } from "components/lila/button";
 import { TextInput } from "components/lila/input";
+import { Select } from "components/lila/select";
 import { THEMES, ThemeName, applyTheme } from "lib/theme";
 import { useState } from "react";
 
@@ -19,9 +20,10 @@ export function Debug() {
             <TextInput
                 placeholder="Enter example text"
                 onChange={(e) => setText(e.target.value || "Test")}
-            ></TextInput>
+            />
 
-            <select
+            <Select
+                size="lg"
                 onChange={(e) =>
                     applyTheme(e.target.value as ThemeName, {
                         broadcast: true,
@@ -32,7 +34,7 @@ export function Debug() {
                 {Object.keys(THEMES).map((theme) => (
                     <option key={theme}>{theme}</option>
                 ))}
-            </select>
+            </Select>
 
             <table className="table-auto border-spacing-2">
                 <thead>