@rimelight/ui 0.0.47 → 0.0.49

package/src/components/select/RLSSelect.tsx

@@ -1,20 +1,29 @@
-import { createMemo, splitProps, For, type Component, type JSX } from "solid-js"
-import type { SelectItem } from "./select"
+import { createMemo, createSignal, splitProps, For, type Component, type JSX } from "solid-js"
+import type { SelectItem, SelectProps } from "./select"
 import { selectTheme } from "./select.theme"
+import RLSButton, { type RLSButtonProps } from "../button/RLSButton"
 import RLSIcon from "../icon/RLSIcon"
 
-export interface RLSSelectProps {
+export interface RLSSelectProps extends Partial<Omit<SelectProps, "onChange" | "onBlur">> {
   id?: string
   name?: string
-  value?: string | number
-  defaultValue?: string | number
+  value?: string | number | (string | number)[]
+  defaultValue?: string | number | (string | number)[]
   placeholder?: string
   disabled?: boolean
   required?: boolean
+  multiple?: boolean
   size?: "xs" | "sm" | "md" | "lg" | "xl"
+  variant?: "default" | "icon" | "outline" | "soft" | "subtle" | "ghost" | "none"
+  buttonVariant?: RLSButtonProps["variant"]
+  buttonColor?: RLSButtonProps["color"]
   class?: string
   items?: SelectItem[]
+  leadingIcon?: string
+  leading?: JSX.Element
   children?: JSX.Element
+  theme?: string
+  ui?: any
   onChange?: (e: Event & { currentTarget: HTMLSelectElement }) => void
   onBlur?: (e: FocusEvent & { currentTarget: HTMLSelectElement }) => void
 }
@@ -28,17 +37,33 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
     "placeholder",
     "disabled",
     "required",
+    "multiple",
     "size",
+    "variant",
+    "buttonVariant",
+    "buttonColor",
     "class",
     "items",
+    "leadingIcon",
+    "leading",
     "children",
+    "theme",
+    "ui",
     "onChange",
     "onBlur"
   ])
 
+  const resolvedVariant = () =>
+    props.variant === "default" || props.variant === "icon" ? props.variant : "default"
+
+  const buttonVariant = () => props.buttonVariant ?? "ghost"
+  const buttonColor = () => props.buttonColor ?? "neutral"
+
   const classes = createMemo(() =>
     selectTheme({
       size: props.size,
+      variant: resolvedVariant(),
+      ui: props.ui,
       class: props.class
     })
   )
@@ -68,26 +93,76 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
 
   const currentValue = createMemo(() =>
     props.value !== undefined
-      ? String(props.value)
+      ? props.value
       : props.defaultValue !== undefined
-        ? String(props.defaultValue)
+        ? props.defaultValue
         : undefined
   )
 
+  const labelFrom = (value?: string | number | (string | number)[]) => {
+    if (props.placeholder && (value === undefined || value === "")) return props.placeholder
+    if (Array.isArray(value)) return props.placeholder ?? ""
+    const item = normalizedItems().find((i) => String(i.value) === String(value))
+    return item?.label ?? ""
+  }
+
+  const [labelText, setLabelText] = createSignal(labelFrom(currentValue()))
+
+  const handleChange = (e: Event & { currentTarget: HTMLSelectElement }) => {
+    setLabelText(e.currentTarget.options[e.currentTarget.selectedIndex]?.text ?? "")
+    props.onChange?.(e)
+  }
+
+  const triggerProps = () => {
+    const p: RLSButtonProps = {
+      "variant": buttonVariant(),
+      "color": buttonColor(),
+      "square": true,
+      "aria-hidden": "true",
+      "tabIndex": -1,
+      "data-slot": "trigger",
+      "type": "button"
+    }
+    if (props.size) p.size = props.size
+    if (props.disabled !== undefined) p.disabled = props.disabled
+    if (props.leadingIcon) p.leadingIcon = props.leadingIcon
+    if (props.leading) p.leading = props.leading
+    return p
+  }
+
   return (
-    <div class={`${classes().root}`}>
+    <div class={classes().root} data-slot="root" data-theme={props.theme}>
+      {resolvedVariant() === "icon" ? (
+        <RLSButton data-slot="trigger" {...triggerProps()} />
+      ) : props.leading ? (
+        <span class={classes().leading} data-slot="leading">
+          {props.leading}
+        </span>
+      ) : props.leadingIcon ? (
+        <span class={classes().leading} data-slot="leading">
+          <RLSIcon name={props.leadingIcon} size="sm" class="size-4" />
+        </span>
+      ) : null}
+
+      {resolvedVariant() !== "icon" ? (
+        <span class={classes().label} data-slot="label" aria-hidden="true">
+          {labelText()}
+        </span>
+      ) : null}
+
       <select
         id={props.id}
         name={props.name}
         disabled={props.disabled}
         required={props.required}
-        onChange={props.onChange}
+        multiple={props.multiple}
+        onChange={handleChange}
         onBlur={props.onBlur}
         class={classes().select}
         data-slot="select"
         {...rest}
       >
-        {props.placeholder ? (
+        {props.placeholder && !props.multiple ? (
           <option value="" disabled selected={!currentValue()}>
             {props.placeholder}
           </option>
@@ -97,40 +172,33 @@ const RLSSelect: Component<RLSSelectProps> = (allProps) => {
           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>
-            )}
+            {(item) => {
+              const val = currentValue()
+              const isSelected = Array.isArray(val)
+                ? val.map(String).includes(String(item.value))
+                : val !== undefined
+                  ? String(val) === String(item.value)
+                  : undefined
+              return (
+                <option value={item.value} disabled={item.disabled} selected={isSelected}>
+                  {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>
+      {resolvedVariant() !== "icon" ? (
+        <span class={classes().icon} data-slot="icon">
+          <RLSIcon name="chevronDown" size="sm" class="size-4" aria-hidden="true" />
+        </span>
+      ) : null}
 
       <style>{`
         select.rl-select,

package/src/components/select/RLVSelect.vue

@@ -2,6 +2,7 @@
 import { computed, useAttrs } from "vue"
 import type { SelectProps } from "./select"
 import { selectTheme } from "./select.theme"
+import RLVButton from "../button/RLVButton.vue"
 import RLVIcon from "../icon/RLVIcon.vue"
 
 defineOptions({ name: "RLVSelect" })
@@ -12,13 +13,21 @@ const modelValue = defineModel<string | number | undefined>()
 
 const props = withDefaults(defineProps<SelectProps>(), {
   size: "md",
+  variant: "default",
+  buttonVariant: "ghost",
+  buttonColor: "neutral",
   color: "neutral",
   disabled: false
 })
 
+const resolvedVariant = computed(() =>
+  props.variant === "default" || props.variant === "icon" ? props.variant : "default"
+)
+
 const resolvedClasses = computed(() =>
   selectTheme({
     size: props.size,
+    variant: resolvedVariant.value,
     color: props.color,
     disabled: props.disabled,
     class: props.class
@@ -34,10 +43,50 @@ const normalizedItems = computed(() => {
     return item
   })
 })
+
+const displayLabel = computed(() => {
+  const value = modelValue.value
+  if (props.placeholder && (value === undefined || value === "")) return props.placeholder
+  const item = normalizedItems.value.find((i) => String(i.value) === String(value))
+  return item?.label ?? ""
+})
 </script>
 
 <template>
   <div :class="resolvedClasses.root" data-slot="root">
+    <RLVButton
+      v-if="resolvedVariant === 'icon'"
+      :variant="buttonVariant"
+      :color="buttonColor"
+      :size="size"
+      square
+      :disabled="disabled"
+      :leading-icon="leadingIcon"
+      aria-hidden="true"
+      tabindex="-1"
+      type="button"
+      data-slot="trigger"
+    >
+      <template #leading>
+        <slot name="leading" />
+      </template>
+    </RLVButton>
+    <div
+      v-else-if="$slots.leading || leadingIcon"
+      :class="resolvedClasses.leading"
+      data-slot="leading"
+    >
+      <RLVIcon v-if="leadingIcon" :name="leadingIcon" class="size-4" />
+      <slot v-else name="leading" />
+    </div>
+    <span
+      v-if="resolvedVariant !== 'icon'"
+      :class="resolvedClasses.label"
+      data-slot="label"
+      aria-hidden="true"
+    >
+      {{ displayLabel }}
+    </span>
     <select
       v-bind="attrs"
       v-model="modelValue"
@@ -65,7 +114,7 @@ const normalizedItems = computed(() => {
         {{ item.label }}
       </option>
     </select>
-    <span :class="resolvedClasses.icon" data-slot="icon">
+    <span v-if="resolvedVariant !== 'icon'" :class="resolvedClasses.icon" data-slot="icon">
       <RLVIcon name="i-lucide-chevron-down" class="size-4" />
     </span>
   </div>

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

@@ -1,23 +1,43 @@
 import { defineTheme } from "../../resolver"
 
 export const selectTheme = defineTheme("select", {
-  slots: ["root", "select", "icon"],
+  slots: ["root", "select", "icon", "leading", "label"],
   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"
+    root: "relative inline-flex items-center gap-2",
+    select: "rl-select appearance-none absolute inset-0 h-full w-full opacity-0 cursor-pointer",
+    label: "text-sm font-medium",
+    icon: "pointer-events-none absolute inset-y-0 right-2.5 flex items-center text-current",
+    leading: "flex items-center text-current shrink-0 pointer-events-none self-center"
   },
   variants: {
+    variant: {
+      default: {
+        root: "w-full rounded-md border border-default bg-default shadow-sm text-highlighted hover:bg-accented/50 transition-colors cursor-pointer"
+      },
+      icon: {
+        root: "rounded-lg focus-within:ring-2 focus-within:ring-ring",
+        label: "hidden",
+        icon: "hidden",
+        leading: "hidden"
+      }
+    },
     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" }
+      xs: { root: "text-xs", label: "text-xs pr-5" },
+      sm: { root: "text-xs", label: "text-xs pr-6" },
+      md: { root: "text-sm", label: "text-sm pr-7" },
+      lg: { root: "text-base", label: "text-base pr-8" },
+      xl: { root: "text-base", label: "text-base pr-9" }
     }
   },
+  compoundVariants: [
+    { variant: "default", size: "xs", class: { root: "px-2 py-0.5" } },
+    { variant: "default", size: "sm", class: { root: "px-2.5 py-1" } },
+    { variant: "default", size: "md", class: { root: "px-3 py-1.5" } },
+    { variant: "default", size: "lg", class: { root: "px-3.5 py-2" } },
+    { variant: "default", size: "xl", class: { root: "px-4 py-2.5" } }
+  ],
   defaultVariants: {
+    variant: "default",
     size: "md"
   }
 })

package/src/components/select/select.ts

@@ -48,7 +48,26 @@ export interface SelectProps {
     | "warning"
     | "error"
     | "neutral"
-  variant?: "outline" | "soft" | "subtle" | "ghost" | "none"
+  /**
+   * The visual variant of the select.
+   *
+   * `icon` renders the trigger as an icon-only `RLButton` that opens the option picker.
+   *
+   * @default "default"
+   */
+  variant?: "default" | "icon" | "outline" | "soft" | "subtle" | "ghost" | "none"
+  /**
+   * The `RLButton` variant used when `variant="icon"`.
+   *
+   * @default "ghost"
+   */
+  buttonVariant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"
+  /**
+   * The `RLButton` color used when `variant="icon"`.
+   *
+   * @default "neutral"
+   */
+  buttonColor?: ThemeColor
   theme?: "light" | "dark"
   size?: "xs" | "sm" | "md" | "lg" | "xl"
   highlight?: boolean

package/src/components/separator/RLSSeparator.tsx

@@ -0,0 +1,92 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { SeparatorProps } from "./separator"
+import { separatorTheme } from "./separator.theme"
+import RLSAvatar from "../avatar/RLSAvatar"
+
+export interface RLSSeparatorProps extends SeparatorProps {
+  children?: JSX.Element
+  avatarSlot?: JSX.Element
+  iconSlot?: JSX.Element
+  label?: any
+  icon?: string
+  avatar?: string | Record<string, any>
+}
+
+const RLSSeparator: Component<RLSSeparatorProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "color",
+    "size",
+    "type",
+    "position",
+    "orientation",
+    "decorative",
+    "label",
+    "icon",
+    "avatar",
+    "ui",
+    "class",
+    "children",
+    "avatarSlot",
+    "iconSlot"
+  ])
+
+  const classes = createMemo(() =>
+    separatorTheme({
+      color: props.color ?? "neutral",
+      size: props.size ?? "xs",
+      type: props.type ?? "solid",
+      position: props.position,
+      orientation: props.orientation ?? "horizontal",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const decorative = props.decorative ?? true
+
+  return (
+    <div
+      class={classes()["root"]}
+      data-slot="root"
+      role={decorative ? "none" : "separator"}
+      aria-orientation={decorative ? undefined : props.orientation}
+      {...rest}
+    >
+      <div class={classes()["border"]} />
+
+      {(props.label || props.icon || props.avatar || props.children !== undefined) && (
+        <>
+          <div class={classes()["container"]} data-slot="container">
+            {props.avatarSlot !== undefined ? (
+              props.avatarSlot
+            ) : props.avatar ? (
+              <RLSAvatar
+                {...(typeof props.avatar === "string" ? { src: props.avatar } : props.avatar)}
+                size={classes()["avatarSize"] as any}
+                class={classes()["avatar"]}
+                data-slot="avatar"
+              />
+            ) : null}
+
+            {props.iconSlot !== undefined ? (
+              props.iconSlot
+            ) : props.icon ? (
+              <span class={classes()["icon"]} data-slot="icon">
+                <span class={props.icon} aria-hidden="true" />
+              </span>
+            ) : null}
+
+            <span class={classes()["label"]} data-slot="label">
+              {props.label}
+              {props.children}
+            </span>
+          </div>
+
+          <div class={classes()["border"]} />
+        </>
+      )}
+    </div>
+  )
+}
+
+export default RLSSeparator

package/src/components/share/RLSShare.tsx

@@ -0,0 +1,66 @@
+import { createSignal, onCleanup, splitProps, type Component } from "solid-js"
+import type { ButtonProps } from "../button/button"
+import RLSButton from "../button/RLSButton"
+
+export interface RLSShareProps extends Omit<
+  ButtonProps,
+  | "href"
+  | "label"
+  | "leadingIcon"
+  | "trailingIcon"
+  | "loading"
+  | "loadingAuto"
+  | "square"
+  | "active"
+  | "activeColor"
+  | "activeVariant"
+> {}
+
+const RLSShare: Component<RLSShareProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["class", "ui"])
+  const [copied, setCopied] = createSignal(false)
+  let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+  onCleanup(() => {
+    if (timeoutId !== undefined) clearTimeout(timeoutId)
+  })
+
+  const handleShare = async () => {
+    if (typeof navigator.share === "function") {
+      try {
+        await navigator.share({ title: document.title, url: window.location.href })
+      } catch (err) {
+        const error = err as { name?: string }
+        if (error.name !== "AbortError") {
+          console.error("Share failed:", err)
+        }
+      }
+      return
+    }
+    try {
+      await navigator.clipboard.writeText(window.location.href)
+      setCopied(true)
+      if (timeoutId !== undefined) clearTimeout(timeoutId)
+      timeoutId = setTimeout(() => setCopied(false), 2000)
+    } catch (err) {
+      console.error("Failed to copy link:", err)
+    }
+  }
+
+  return (
+    <RLSButton
+      id="rl-share"
+      class={props.class}
+      color="neutral"
+      variant="outline"
+      size="sm"
+      leadingIcon="share"
+      label={copied() ? "Link Copied!" : "Share"}
+      ui={props.ui}
+      onClick={handleShare}
+      {...rest}
+    />
+  )
+}
+
+export default RLSShare