@rimelight/ui 0.0.42 → 0.0.43

package/src/components/select/RLSSelect.tsx

@@ -0,0 +1,126 @@
+import { createMemo, splitProps, For, type Component, type JSX } from "solid-js"
+import type { SelectItem } from "./select"
+
+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 SIZE_CLASSES = {
+  xs: "py-0.5 pl-2 pr-6 text-xs",
+  sm: "py-1 pl-2.5 pr-7 text-xs",
+  md: "py-1.5 pl-3 pr-8 text-sm",
+  lg: "py-2 pl-3.5 pr-9 text-base",
+  xl: "py-2.5 pl-4 pr-10 text-base"
+} as const
+
+const RLSSelect: Component<RLSSelectProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "id",
+    "name",
+    "value",
+    "defaultValue",
+    "placeholder",
+    "disabled",
+    "required",
+    "size",
+    "class",
+    "items",
+    "children",
+    "onChange",
+    "onBlur"
+  ])
+
+  const sizeClass = createMemo(() => SIZE_CLASSES[props.size ?? "md"])
+
+  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 }
+      return {
+        label: String(i.label ?? i.value ?? ""),
+        value: String(i.value ?? ""),
+        disabled: !!i.disabled
+      }
+    })
+  })
+
+  const currentValue = createMemo(() =>
+    props.value !== undefined
+      ? String(props.value)
+      : props.defaultValue !== undefined
+        ? String(props.defaultValue)
+        : undefined
+  )
+
+  return (
+    <div class={`relative inline-flex items-center w-full ${props.class || ""}`}>
+      <select
+        id={props.id}
+        name={props.name}
+        disabled={props.disabled}
+        required={props.required}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        class={`rl-select w-full cursor-pointer rounded-md border border-default bg-default ${sizeClass()} text-foreground 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`}
+        {...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.label}
+              </option>
+            )}
+          </For>
+        )}
+      </select>
+
+      {/* Custom Chevron arrow */}
+      <span class="pointer-events-none absolute right-2 flex items-center text-muted-foreground">
+        <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>
+    </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(() => {

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

@@ -1,29 +1,108 @@
-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" }
+export const selectTheme = defineTheme("select", {
+  slots: [
+    "root",
+    "label",
+    "trigger",
+    "leading",
+    "leadingIcon",
+    "leadingAvatar",
+    "trailing",
+    "trailingIcon",
+    "trailingClear",
+    "value",
+    "placeholder",
+    "content",
+    "viewport",
+    "group",
+    "empty",
+    "separator",
+    "item",
+    "itemLeadingIcon",
+    "itemLeadingAvatar",
+    "itemLeadingChip",
+    "itemWrapper",
+    "itemLabel",
+    "itemDescription",
+    "itemTrailingIcon",
+    "input",
+    "createOption"
+  ],
+  base: {
+    root: "relative w-full flex flex-col gap-1.5",
+    label: "text-sm font-medium text-highlighted",
+    trigger:
+      "relative group w-full inline-flex items-center justify-between rounded-md border border-default bg-default px-3 py-2 text-sm shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-75 cursor-pointer",
+    leading: "inline-flex items-center gap-1.5 shrink-0 me-2",
+    leadingIcon: "shrink-0 size-4 text-muted",
+    leadingAvatar: "shrink-0 size-4 rounded-full object-cover",
+    trailing: "inline-flex items-center gap-1.5 shrink-0 ms-auto",
+    trailingIcon: "shrink-0 size-4 text-muted transition-transform duration-200",
+    trailingClear: "p-0 text-muted hover:text-highlighted cursor-pointer",
+    value: "truncate text-highlighted",
+    placeholder: "truncate text-muted",
+    content:
+      "absolute z-50 left-0 right-0 min-w-[12rem] bg-default shadow-lg rounded-md border border-default overflow-hidden mt-1 flex flex-col max-h-60",
+    viewport: "relative p-1 scroll-py-1 overflow-y-auto flex-1 divide-y divide-border/50",
+    group: "p-1 isolate",
+    empty: "p-3 text-center text-sm text-muted",
+    separator: "-mx-1 my-1 h-px bg-border",
+    item: "group relative w-full flex items-center justify-between select-none outline-none rounded-md px-2 py-1.5 text-sm cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    itemLeadingIcon: "shrink-0 size-4 me-2 text-muted group-hover:text-highlighted",
+    itemLeadingAvatar: "shrink-0 size-4 me-2 rounded-full object-cover",
+    itemLeadingChip: "shrink-0 size-2.5 me-2 rounded-full",
+    itemWrapper: "flex-1 flex flex-col min-w-0",
+    itemLabel: "truncate font-normal",
+    itemDescription: "truncate text-xs text-muted",
+    itemTrailingIcon: "shrink-0 size-4 ms-auto text-primary",
+    input:
+      "w-full border-b border-default bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted",
+    createOption:
+      "p-2 text-sm font-medium text-primary hover:bg-accent cursor-pointer flex items-center gap-2 border-t border-default"
+  },
+  variants: {
+    size: {
+      xs: {
+        trigger: "h-7 px-2 text-xs",
+        item: "py-1 px-1.5 text-xs",
+        input: "py-1 px-2 text-xs"
+      },
+      sm: {
+        trigger: "h-8 px-2.5 text-xs",
+        item: "py-1 px-2 text-xs",
+        input: "py-1.5 px-2.5 text-xs"
+      },
+      md: {
+        trigger: "h-9 px-3 text-sm",
+        item: "py-1.5 px-2 text-sm",
+        input: "py-2 px-3 text-sm"
+      },
+      lg: {
+        trigger: "h-10 px-3.5 text-sm",
+        item: "py-2 px-2.5 text-sm",
+        input: "py-2.5 px-3.5 text-sm"
+      },
+      xl: {
+        trigger: "h-11 px-4 text-base",
+        item: "py-2.5 px-3 text-base",
+        input: "py-3 px-4 text-base"
       }
     },
-    defaultVariants: {
-      size: "md"
+    variant: {
+      outline: { trigger: "bg-default border border-default hover:bg-accent/50" },
+      soft: { trigger: "bg-accent/50 border-transparent hover:bg-accent" },
+      subtle: { trigger: "bg-accent border border-default hover:bg-accent/80" },
+      ghost: { trigger: "bg-transparent border-transparent hover:bg-accent" },
+      none: { trigger: "bg-transparent border-transparent px-0 shadow-none" }
+    },
+    theme: {
+      dark: { root: "rl-dark" },
+      light: { root: "rl-light" }
     }
-  })
-
-export default createSelectTheme()
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+})

package/src/components/select/select.ts

@@ -1,44 +1,66 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
+
+export type SelectItem =
+  | string
+  | number
+  | boolean
+  | {
+      label?: string
+      value?: any
+      description?: string
+      icon?: string
+      avatar?: { src?: string; alt?: string; loading?: "lazy" | "eager" }
+      chip?: { color?: string }
+      disabled?: boolean
+      type?: "item" | "label" | "separator"
+      class?: any
+      [key: string]: any
+    }
+  | SelectItem[]
+
 export interface SelectProps {
-  /**
-   * List of options.
-   */
-  items?: Array<{ label: string; value: string; [key: string]: any } | string>
-  /**
-   * Selected value.
-   */
-  value?: string | string[]
-  /**
-   * Placeholder text.
-   */
+  id?: string
+  name?: string
+  form?: string
   placeholder?: string
-  /**
-   * Disabled state.
-   */
+  items?: SelectItem[]
+  value?: any
+  defaultValue?: any
+  modelValue?: any
+  createItem?: boolean | "always" | { position?: "top" | "bottom"; when?: "always" | "empty" }
+  searchInput?: boolean | { placeholder?: string; icon?: string; variant?: string }
+  multiple?: boolean
+  clear?: boolean | object
+  clearIcon?: string
+  valueKey?: string
+  labelKey?: string
+  descriptionKey?: string
+  filterFields?: string[]
+  ignoreFilter?: boolean
   disabled?: boolean
-  /**
-   * Form control name.
-   */
-  name?: string
-  /**
-   * Form label.
-   */
+  required?: boolean
+  color?:
+    | ThemeColor
+    | "primary"
+    | "secondary"
+    | "success"
+    | "info"
+    | "warning"
+    | "error"
+    | "neutral"
+  variant?: "outline" | "soft" | "subtle" | "ghost" | "none"
+  theme?: "light" | "dark"
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  highlight?: boolean
+  icon?: string
+  leadingIcon?: string
+  trailingIcon?: string
+  selectedIcon?: string
+  loadingIcon?: string
+  loading?: boolean
+  avatar?: { src?: string; alt?: string; loading?: "lazy" | "eager" }
   label?: string
-  /**
-   * Size scale.
-   */
-  size?: "sm" | "md" | "lg"
-  /**
-   * Color theme.
-   */
-  color?: ThemeColor
-  /**
-   * Slot-specific CSS class overrides.
-   */
   ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
   class?: any
   [key: string]: unknown
 }

package/src/components/separator/RLASeparator.astro

@@ -1,83 +1,62 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { SeparatorProps } from "./separator"
-import { resolveTheme } from "../../utils/resolveTheme"
-import separatorThemeDefault, { createSeparatorTheme } from "./separator.theme"
-const separatorTheme = resolveTheme(separatorThemeDefault, createSeparatorTheme)
-import RLAAvatar from "../avatar/RLAAvatar.astro"
-import { cx } from "css-variants"
-
-
-const separator = scv(separatorTheme)
-
-const {
-  orientation = "horizontal",
-  color = "neutral",
-  size = "xs",
-  type = "solid",
-  label,
-  icon,
-  avatar,
-  position = "center",
-  decorative = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SeparatorProps & {
-  color?: string
-  size?: "xs" | "sm" | "md" | "lg" | "xl"
-  type?: "solid" | "dashed" | "dotted"
-  position?: "start" | "center" | "end"
-}
-
-const classes = resolveClasses(separator, {
-  orientation,
-  color: color as "neutral",
-  size: size as "xs",
-  type: type as "solid",
-  position: position as "center"
-}, useUi("separator", uiProp), className)
----
-<div
-  class={classes.root}
-  data-slot="root"
-  role={decorative ? "none" : "separator"}
-  aria-orientation={decorative ? undefined : orientation}
-  {...rest}
->
-  <div class={classes.border} />
-
-  {(label || icon || avatar || Astro.slots.has("default")) && (
-    <>
-      <div class={classes.container} data-slot="container">
-        <slot name="avatar">
-          {avatar && (
-            <RLAAvatar 
-              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
-              size={classes.avatarSize as any} 
-              class={classes.avatar} 
-              data-slot="avatar" 
-            />
-          )}
-        </slot>
-        
-        <slot name="icon">
-          {icon && (
-            <span class={classes.icon} data-slot="icon">
-              <span class={cx(icon)} aria-hidden="true" />
-            </span>
-          )}
-        </slot>
-
-        <span class={classes.label} data-slot="label">
-          {label}
-          <slot />
-        </span>
-      </div>
-
-      <div class={classes.border} />
-    </>
-  )}
-</div>
+---
+import type { SeparatorProps } from "./separator"
+import { separatorTheme } from "./separator.theme"
+import RLAAvatar from "../avatar/RLAAvatar.astro"
+
+
+
+const {
+  orientation = "horizontal",
+  size = "xs",
+  label,
+  icon,
+  avatar,
+  decorative = true,
+  ...rest
+} = Astro.props as SeparatorProps
+
+
+
+const classes = separatorTheme(Astro.props)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role={decorative ? "none" : "separator"}
+  aria-orientation={decorative ? undefined : orientation}
+  {...rest}
+>
+  <div class={classes.border} />
+
+  {(label || icon || avatar || Astro.slots.has("default")) && (
+    <>
+      <div class={classes.container} data-slot="container">
+        <slot name="avatar">
+          {avatar && (
+            <RLAAvatar 
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
+              size={classes.avatarSize as any} 
+              class={classes.avatar} 
+              data-slot="avatar" 
+            />
+          )}
+        </slot>
+        
+        <slot name="icon">
+          {icon && (
+            <span class={classes.icon} data-slot="icon">
+              <span class={icon as string} aria-hidden="true" />
+            </span>
+          )}
+        </slot>
+
+        <span class={classes.label} data-slot="label">
+          {label}
+          <slot />
+        </span>
+      </div>
+
+      <div class={classes.border} />
+    </>
+  )}
+</div>