@rimelight/ui 0.0.42 → 0.0.44

package/src/components/select/RLASelect.astro

@@ -1,150 +1,119 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { SelectProps } from "./select"
-import selectTheme from "./select.theme"
+import type { SelectProps, SelectItem } from "./select"
+import { selectTheme } from "./select.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
-
-const select = scv(selectTheme)
-
 const {
   items = [],
-  value = "",
-  placeholder = "Select item...",
+  value,
+  defaultValue,
+  placeholder,
   disabled = false,
+  required = false,
   name,
-  label,
   size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
+  multiple,
+  ui: _ui,
+  class: classAttr,
+  theme,
   ...rest
 } = Astro.props as SelectProps
 
-const classes = resolveClasses(select, {
-  size
-}, useUi("select", uiProp), className);
+const classes = selectTheme({ size, class: classAttr })
+
+const currentValue = value !== undefined ? value : defaultValue !== undefined ? defaultValue : undefined
+const currentValues = Array.isArray(currentValue) ? currentValue.map(String) : undefined
 
-const normalizedItems = items.map(item => {
-  if (typeof item === "string") {
-    return { label: item, value: item }
+const normalizedItems = (items || []).map((item: SelectItem) => {
+  if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
+    return { label: String(item), value: String(item), disabled: false }
+  }
+  const i = item as {
+    label?: string
+    value?: any
+    disabled?: boolean
+    icon?: string
+    avatar?: { src?: string; alt?: string; loading?: "lazy" | "eager" }
+  }
+  return {
+    label: String(i.label ?? i.value ?? ""),
+    value: String(i.value ?? ""),
+    disabled: !!i.disabled,
+    icon: i.icon,
+    avatar: i.avatar
   }
-  return item
 })
-
-const selectedItem = normalizedItems.find(item => item.value === value)
-const initialLabel = selectedItem ? selectedItem.label : ""
 ---
-<rla-select {...rest}>
-  <div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
-    {label && <label class={classes.label} data-slot="label">{label}</label>}
-    
-    <div class="relative w-full" data-select-wrapper>
-      <button
-        type="button"
-        class={classes.trigger}
-        data-slot="trigger"
-        disabled={disabled}
-        data-select-trigger
-      >
-        <span data-select-value>{initialLabel || placeholder}</span>
-        <RLAIcon name="chevronDown" class="ml-2 size-4 opacity-50" />
-      </button>
-
-      <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
-        <div class="py-1" data-select-items>
-          {normalizedItems.map(item => (
-            <div
-              class={classes.item}
-              data-slot="item"
-              data-value={item.value}
-              data-label={item.label}
-              data-select-item
-            >
-              <span class={classes.itemText}>{item.label}</span>
-              <RLAIcon name="check" class={classes.itemIcon + " hidden"} data-check-icon />
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-    <input type="hidden" name={name} value={value} data-select-hidden-input />
-  </div>
-</rla-select>
-
-<script>
-  class RLASelect extends HTMLElement {
-    private selectCleanup: (() => void) | null = null;
-    private initTimeout: any = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      this.initTimeout = setTimeout(() => {
-        const wrapper = this.querySelector("[data-select-wrapper]") as HTMLElement | null;
-        if (!wrapper) return;
-
-        const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
-        const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
-        const items = wrapper.querySelectorAll<HTMLElement>("[data-select-item]");
-        const valueSpan = wrapper.querySelector("[data-select-value]");
-        const hiddenInput = this.querySelector("[data-select-hidden-input]") as HTMLInputElement | null;
 
-        if (!trigger || !dropdown) return;
-
-        const onTriggerClick = (e: MouseEvent) => {
-          e.stopPropagation();
-          dropdown.classList.toggle("hidden");
-        };
-        trigger.addEventListener("click", onTriggerClick);
-
-        const itemCleanups: (() => void)[] = [];
-        items.forEach(item => {
-          const onItemClick = (e: MouseEvent) => {
-            e.stopPropagation();
-            const val = (item as HTMLElement).dataset.value || "";
-            const label = (item as HTMLElement).dataset.label || "";
-            if (hiddenInput) {
-              hiddenInput.value = val;
-              hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
-            }
-            if (valueSpan) valueSpan.textContent = label;
-            
-            items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
-            item.querySelector("[data-check-icon]")?.classList.remove("hidden");
-            
-            dropdown.classList.add("hidden");
-          };
-          item.addEventListener("click", onItemClick);
-          itemCleanups.push(() => item.removeEventListener("click", onItemClick));
-        });
-
-        const onDocumentClick = () => {
-          dropdown.classList.add("hidden");
-        };
-        document.addEventListener("click", onDocumentClick);
-
-        this.selectCleanup = () => {
-          trigger.removeEventListener("click", onTriggerClick);
-          itemCleanups.forEach(fn => fn());
-          document.removeEventListener("click", onDocumentClick);
-        };
-      }, 0);
-    }
-
-    disconnectedCallback() {
-      if (this.initTimeout) {
-        clearTimeout(this.initTimeout);
-      }
-      if (this.selectCleanup) {
-        this.selectCleanup();
-        this.selectCleanup = null;
-      }
-    }
+<div class={classes.root} data-slot="root" data-theme={theme}>
+  <select
+    class={classes.select}
+    name={name}
+    disabled={disabled}
+    required={required}
+    multiple={multiple}
+    data-slot="select"
+    {...rest}
+  >
+    {placeholder && !multiple && (
+      <option value="" disabled selected={currentValue === undefined}>{placeholder}</option>
+    )}
+    {normalizedItems.map((item) => (
+      <option
+        value={item.value}
+        disabled={item.disabled}
+        selected={currentValues ? currentValues.includes(item.value) : (currentValue !== undefined ? currentValue === item.value : undefined)}
+      >
+        {item.icon && <RLAIcon name={item.icon} class="rl-select-item-icon" />}
+        {item.avatar && <img src={item.avatar.src} alt={item.avatar.alt} class="rl-select-item-icon" />}
+        {item.label}
+      </option>
+    ))}
+  </select>
+
+  <span class={classes.icon} data-slot="icon">
+    <RLAIcon name="i-lucide-chevron-down" class="size-4" />
+  </span>
+</div>
+
+<style is:global>
+  select.rl-select,
+  select.rl-select::picker(select) { appearance: base-select; }
+  select.rl-select::picker-icon { display: none; }
+  select.rl-select::picker(select) {
+    border: 1px solid var(--rl-neutral-200);
+    border-radius: var(--radius-md, 0.375rem);
+    background-color: var(--rl-neutral-100);
+    color: var(--rl-neutral-950);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
+    padding: 0.25rem;
+    margin-top: 0.25rem;
   }
-
-  if (!customElements.get('rla-select')) {
-    customElements.define('rla-select', RLASelect);
+  select.rl-select option {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.625rem;
+    border-radius: calc(var(--radius-md, 0.375rem) - 0.125rem);
+    background-color: var(--rl-neutral-100);
+    color: var(--rl-neutral-950);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+  }
+  select.rl-select .rl-select-item-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+  select.rl-select option:hover,
+  select.rl-select option:focus {
+    background-color: var(--rl-neutral-200);
+    color: var(--rl-neutral-950);
+  }
+  select.rl-select option:checked {
+    background-color: var(--rl-primary-500);
+    color: var(--rl-neutral-50);
+    font-weight: 500;
   }
-</script>
+</style>

package/src/components/select/RLSSelect.tsx

@@ -0,0 +1,180 @@
+import { createMemo, splitProps, For, type Component, type JSX } from "solid-js"
+import type { SelectItem } from "./select"
+import { selectTheme } from "./select.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSSelectProps {
+  id?: string
+  name?: string
+  value?: string | number
+  defaultValue?: string | number
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  class?: string
+  items?: SelectItem[]
+  children?: JSX.Element
+  onChange?: (e: Event & { currentTarget: HTMLSelectElement }) => void
+  onBlur?: (e: FocusEvent & { currentTarget: HTMLSelectElement }) => void
+}
+
+const RLSSelect: Component<RLSSelectProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "id",
+    "name",
+    "value",
+    "defaultValue",
+    "placeholder",
+    "disabled",
+    "required",
+    "size",
+    "class",
+    "items",
+    "children",
+    "onChange",
+    "onBlur"
+  ])
+
+  const classes = createMemo(() =>
+    selectTheme({
+      size: props.size,
+      class: props.class
+    })
+  )
+
+  const normalizedItems = createMemo(() => {
+    if (!props.items) return []
+    return props.items.map((item: SelectItem) => {
+      if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
+        return { label: String(item), value: String(item), disabled: false }
+      }
+      const i = item as {
+        label?: string
+        value?: any
+        disabled?: boolean
+        icon?: string
+        avatar?: { src?: string; alt?: string; loading?: "lazy" | "eager" }
+      }
+      return {
+        label: String(i.label ?? i.value ?? ""),
+        value: String(i.value ?? ""),
+        disabled: !!i.disabled,
+        icon: i.icon,
+        avatar: i.avatar
+      }
+    })
+  })
+
+  const currentValue = createMemo(() =>
+    props.value !== undefined
+      ? String(props.value)
+      : props.defaultValue !== undefined
+        ? String(props.defaultValue)
+        : undefined
+  )
+
+  return (
+    <div class={`${classes().root}`}>
+      <select
+        id={props.id}
+        name={props.name}
+        disabled={props.disabled}
+        required={props.required}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        class={classes().select}
+        data-slot="select"
+        {...rest}
+      >
+        {props.placeholder ? (
+          <option value="" disabled selected={!currentValue()}>
+            {props.placeholder}
+          </option>
+        ) : null}
+
+        {props.children ? (
+          props.children
+        ) : (
+          <For each={normalizedItems()}>
+            {(item) => (
+              <option
+                value={item.value}
+                disabled={item.disabled}
+                selected={currentValue() !== undefined ? currentValue() === item.value : undefined}
+              >
+                {item.icon ? <RLSIcon name={item.icon} class="rl-select-item-icon" /> : null}
+                {item.avatar ? (
+                  <img src={item.avatar.src} alt={item.avatar.alt} class="rl-select-item-icon" />
+                ) : null}
+                {item.label}
+              </option>
+            )}
+          </For>
+        )}
+      </select>
+
+      {/* Custom Chevron arrow */}
+      <span class={classes().icon} data-slot="icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M6 9l6 6 6-6" />
+        </svg>
+      </span>
+
+      <style>{`
+        select.rl-select,
+        select.rl-select::picker(select) { appearance: base-select; }
+        select.rl-select::picker-icon { display: none; }
+        select.rl-select::picker(select) {
+          border: 1px solid var(--rl-neutral-200);
+          border-radius: var(--radius-md, 0.375rem);
+          background-color: var(--rl-neutral-100);
+          color: var(--rl-neutral-950);
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.25), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
+          padding: 0.25rem;
+          margin-top: 0.25rem;
+        }
+        select.rl-select option {
+          display: flex;
+          align-items: center;
+          gap: 0.375rem;
+          padding: 0.375rem 0.625rem;
+          border-radius: calc(var(--radius-md, 0.375rem) - 0.125rem);
+          background-color: var(--rl-neutral-100);
+          color: var(--rl-neutral-950);
+          font-size: 0.875rem;
+          cursor: pointer;
+          transition: background-color 0.15s ease, color 0.15s ease;
+        }
+        select.rl-select .rl-select-item-icon {
+          width: 1rem;
+          height: 1rem;
+          flex-shrink: 0;
+        }
+        select.rl-select option:hover,
+        select.rl-select option:focus {
+          background-color: var(--rl-neutral-200);
+          color: var(--rl-neutral-950);
+        }
+        select.rl-select option:checked {
+          background-color: var(--rl-primary-500);
+          color: var(--rl-neutral-50);
+          font-weight: 500;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default RLSSelect

package/src/components/select/RLVSelect.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
 import { computed, useAttrs } from "vue"
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { SelectProps } from "./select"
-import selectThemeDefault from "./select.theme"
+import { selectTheme } from "./select.theme"
 import RLVIcon from "../icon/RLVIcon.vue"
 
 defineOptions({ name: "RLVSelect" })
 
 const attrs = useAttrs()
-const selectScv = scv(selectThemeDefault)
 
 const modelValue = defineModel<string | number | undefined>()
 
@@ -21,16 +17,12 @@ const props = withDefaults(defineProps<SelectProps>(), {
 })
 
 const resolvedClasses = computed(() =>
-  resolveClasses(
-    selectScv,
-    {
-      size: props.size,
-      color: props.color,
-      disabled: props.disabled
-    },
-    useUi("select", props.ui),
-    props.class
-  )
+  selectTheme({
+    size: props.size,
+    color: props.color,
+    disabled: props.disabled,
+    class: props.class
+  })
 )
 
 const normalizedItems = computed(() => {
@@ -63,6 +55,13 @@ const normalizedItems = computed(() => {
         :value="item.value"
         :disabled="item.disabled"
       >
+        <RLVIcon v-if="item.icon" :name="item.icon" class="rl-select-item-icon" />
+        <img
+          v-else-if="item.avatar"
+          :src="item.avatar.src"
+          :alt="item.avatar.alt"
+          class="rl-select-item-icon"
+        />
         {{ item.label }}
       </option>
     </select>
@@ -71,3 +70,53 @@ const normalizedItems = computed(() => {
     </span>
   </div>
 </template>
+
+<style>
+select.rl-select,
+select.rl-select::picker(select) {
+  appearance: base-select;
+}
+select.rl-select::picker-icon {
+  display: none;
+}
+select.rl-select::picker(select) {
+  border: 1px solid var(--rl-neutral-200);
+  border-radius: var(--radius-md, 0.375rem);
+  background-color: var(--rl-neutral-100);
+  color: var(--rl-neutral-950);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.25),
+    0 4px 6px -4px rgba(0, 0, 0, 0.15);
+  padding: 0.25rem;
+  margin-top: 0.25rem;
+}
+select.rl-select option {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.625rem;
+  border-radius: calc(var(--radius-md, 0.375rem) - 0.125rem);
+  background-color: var(--rl-neutral-100);
+  color: var(--rl-neutral-950);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+select.rl-select .rl-select-item-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+select.rl-select option:hover,
+select.rl-select option:focus {
+  background-color: var(--rl-neutral-200);
+  color: var(--rl-neutral-950);
+}
+select.rl-select option:checked {
+  background-color: var(--rl-primary-500);
+  color: var(--primary-foreground, #ffffff);
+  font-weight: 500;
+}
+</style>

package/src/components/select/select.theme.ts

@@ -1,29 +1,23 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSelectTheme = () =>
-  defineTheme({
-    slots: ["root", "label", "trigger", "content", "item", "itemText", "itemIcon"],
-    base: {
-      root: "relative w-full flex flex-col gap-1.5",
-      label: "text-sm font-medium text-foreground",
-      trigger:
-        "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      content:
-        "absolute z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-lg transition-all w-full mt-1 max-h-60 overflow-y-auto",
-      item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      itemText: "truncate",
-      itemIcon: "ml-auto size-4"
-    },
-    variants: {
-      size: {
-        sm: { trigger: "h-8 px-2 text-xs", item: "py-1 px-1.5 text-xs" },
-        md: { trigger: "h-9 px-3 text-sm", item: "py-1.5 px-2 text-sm" },
-        lg: { trigger: "h-10 px-4 text-base", item: "py-2 px-2.5 text-base" }
-      }
-    },
-    defaultVariants: {
-      size: "md"
+export const selectTheme = defineTheme("select", {
+  slots: ["root", "select", "icon"],
+  base: {
+    root: "relative inline-flex items-center w-full",
+    select:
+      "rl-select w-full cursor-pointer rounded-md border border-default bg-default text-highlighted shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
+    icon: "pointer-events-none absolute right-2 flex items-center text-muted"
+  },
+  variants: {
+    size: {
+      xs: { select: "py-0.5 pl-2 pr-6 text-xs" },
+      sm: { select: "py-1 pl-2.5 pr-7 text-xs" },
+      md: { select: "py-1.5 pl-3 pr-8 text-sm" },
+      lg: { select: "py-2 pl-3.5 pr-9 text-base" },
+      xl: { select: "py-2.5 pl-4 pr-10 text-base" }
     }
-  })
-
-export default createSelectTheme()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})