@rimelight/ui 0.0.47 → 0.0.48

package/src/components/input/RLAInput.astro

@@ -1,51 +1,62 @@
----
-import type { InputProps } from "./input"
-import { inputTheme } from "./input.theme"
-
-
-
-const {
-  type = "text",
-  value = "",
-  placeholder,
-  disabled = false,
-  readonly = false,
-  name,
-  required = false,
-  error = false,
-  leadingIcon,
-  trailingIcon,
-  theme,
-  ...rest
-} = Astro.props as InputProps
-
-
-
-const classes = inputTheme({
-  ...Astro.props,
-  error: !!error
-});
----
-<div class={classes.root} data-slot="root" data-theme={theme}>
-  {(leadingIcon || Astro.slots.has("leading")) && (
-    <span class={classes.leading} data-slot="leading">
-      {leadingIcon ? <span class={leadingIcon} /> : <slot name="leading" />}
-    </span>
-  )}
-  <input
-    type={type}
-    class={classes.input}
-    value={value}
-    placeholder={placeholder}
-    disabled={disabled}
-    readonly={readonly}
-    name={name}
-    required={required}
-    {...rest}
-  />
-  {(trailingIcon || Astro.slots.has("trailing")) && (
-    <span class={classes.trailing} data-slot="trailing">
-      {trailingIcon ? <span class={trailingIcon} /> : <slot name="trailing" />}
-    </span>
-  )}
-</div>
+---
+import type { InputProps } from "./input"
+import { inputTheme } from "./input.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+const {
+  type = "text",
+  value = "",
+  placeholder,
+  disabled = false,
+  readonly = false,
+  name,
+  required = false,
+  error = false,
+  leadingIcon,
+  trailingIcon,
+  size = "md",
+  variant = "default",
+  theme,
+  class: className,
+  ui,
+  ...rest
+} = Astro.props as InputProps
+
+const hasLeading = !!(leadingIcon || Astro.slots.has("leading"))
+const hasTrailing = !!(trailingIcon || Astro.slots.has("trailing"))
+
+const classes = inputTheme({
+  variant,
+  size,
+  hasLeading,
+  hasTrailing,
+  error: !!error,
+  theme,
+  ui,
+  class: className
+})
+---
+<div class={classes.root} data-slot="root" data-theme={theme}>
+  {(leadingIcon || Astro.slots.has("leading")) && (
+    <span class={classes.leading} data-slot="leading">
+      {leadingIcon ? <RLAIcon name={leadingIcon} size="sm" aria-hidden="true" /> : <slot name="leading" />}
+    </span>
+  )}
+  <input
+    type={type}
+    class={classes.input}
+    data-slot="input"
+    value={value}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    name={name}
+    required={required}
+    {...rest}
+  />
+  {(trailingIcon || Astro.slots.has("trailing")) && (
+    <span class={classes.trailing} data-slot="trailing">
+      {trailingIcon ? <RLAIcon name={trailingIcon} size="sm" aria-hidden="true" /> : <slot name="trailing" />}
+    </span>
+  )}
+</div>

package/src/components/input/RLSInput.tsx

@@ -59,7 +59,7 @@ const RLSInput: Component<RLSInputProps> = (allProps) => {
   )
 
   return (
-    <div class={resolvedClasses().root} data-slot="root">
+    <div class={resolvedClasses().root} data-slot="root" data-theme={props.theme}>
       {props.leading ? (
         props.leading
       ) : props.leadingIcon ? (

package/src/components/input-date/RLSInputDate.tsx

@@ -0,0 +1,92 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { InputDateProps } from "./input-date"
+import { inputDateTheme } from "./input-date.theme"
+import { inputTheme } from "../input/input.theme"
+
+export interface RLSInputDateProps extends InputDateProps {
+  children?: JSX.Element
+  value?: string
+  defaultValue?: string
+  name?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  min?: string
+  max?: string
+  step?: number
+  size?: "sm" | "md" | "lg"
+  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void
+  onChange?: (e: Event & { currentTarget: HTMLInputElement }) => void
+  onBlur?: (e: FocusEvent & { currentTarget: HTMLInputElement }) => void
+  onFocus?: (e: FocusEvent & { currentTarget: HTMLInputElement }) => void
+  onKeyDown?: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
+}
+
+const RLSInputDate: Component<RLSInputDateProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "children",
+    "value",
+    "defaultValue",
+    "name",
+    "placeholder",
+    "disabled",
+    "readonly",
+    "required",
+    "min",
+    "max",
+    "step",
+    "size",
+    "ui",
+    "class",
+    "onInput",
+    "onChange",
+    "onBlur",
+    "onFocus",
+    "onKeyDown"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    inputDateTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const inputClasses = createMemo(() =>
+    inputTheme({
+      variant: "default",
+      size: props.size ?? "md",
+      error: false,
+      ui: props.ui
+    })
+  )
+
+  return (
+    <div class={`${resolvedClasses().root} ${inputClasses().root}`} data-slot="root">
+      <input
+        type="date"
+        name={props.name}
+        value={props.value !== undefined ? props.value : (props.defaultValue ?? "")}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        readonly={props.readonly}
+        required={props.required}
+        min={props.min}
+        max={props.max}
+        step={props.step}
+        class={inputClasses().input}
+        data-slot="input"
+        onInput={props.onInput}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
+        onKeyDown={props.onKeyDown}
+        {...rest}
+      />
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSInputDate

package/src/components/input-menu/RLSInputMenu.tsx

@@ -0,0 +1,199 @@
+import {
+  createMemo,
+  createSignal,
+  splitProps,
+  For,
+  Show,
+  onMount,
+  onCleanup,
+  createEffect,
+  type Component
+} from "solid-js"
+import type { InputMenuProps } from "./input-menu"
+import { inputMenuTheme } from "./input-menu.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSInputMenuProps extends InputMenuProps {
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+}
+
+type InputMenuItem = { label: string; value: string; [key: string]: any }
+
+const RLSInputMenu: Component<RLSInputMenuProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "value",
+    "defaultValue",
+    "placeholder",
+    "disabled",
+    "name",
+    "label",
+    "size",
+    "color",
+    "ui",
+    "class",
+    "onValueChange"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    inputMenuTheme({
+      size: props.size ?? "md",
+      color: props.color,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const normalizedItems = createMemo<InputMenuItem[]>(() =>
+    (props.items ?? []).map((item) =>
+      typeof item === "string" ? { label: item, value: item } : item
+    )
+  )
+
+  const [selectedValue, setSelectedValue] = createSignal<string>(
+    props.value !== undefined
+      ? String(props.value)
+      : props.defaultValue !== undefined
+        ? String(props.defaultValue)
+        : ""
+  )
+  const currentValue = () => (props.value !== undefined ? String(props.value) : selectedValue())
+
+  const selectedItem = createMemo(() =>
+    normalizedItems().find((item) => String(item.value) === String(currentValue()))
+  )
+
+  const visibleLabel = createMemo(() => {
+    if (props.placeholder && (currentValue() === "" || currentValue() === "undefined")) {
+      return props.placeholder
+    }
+    return selectedItem()?.label ?? props.placeholder ?? "Select item..."
+  })
+
+  const [open, setOpen] = createSignal(false)
+  const [query, setQuery] = createSignal("")
+
+  let searchRef: HTMLInputElement | undefined
+  let hiddenRef: HTMLInputElement | undefined
+
+  const filteredItems = createMemo(() => {
+    const q = query().toLowerCase().trim()
+    if (!q) return normalizedItems()
+    return normalizedItems().filter((item) => item.label.toLowerCase().includes(q))
+  })
+
+  const selectItem = (value: string, _label: string) => {
+    if (props.value === undefined) setSelectedValue(value)
+    if (hiddenRef) hiddenRef.value = value
+    props.onValueChange?.(value)
+    setQuery("")
+    setOpen(false)
+  }
+
+  const handleTriggerClick = (e: MouseEvent) => {
+    e.stopPropagation()
+    if (props.disabled) return
+    setOpen(!open())
+  }
+
+  const handleItemClick = (e: MouseEvent, item: InputMenuItem) => {
+    e.stopPropagation()
+    selectItem(item.value, item.label)
+  }
+
+  createEffect(() => {
+    if (open()) searchRef?.focus()
+  })
+
+  onMount(() => {
+    const handleDocumentClick = () => {
+      setOpen(false)
+    }
+    document.addEventListener("click", handleDocumentClick)
+    onCleanup(() => document.removeEventListener("click", handleDocumentClick))
+  })
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-disabled={props.disabled ? "" : undefined}
+      {...rest}
+    >
+      {props.label ? (
+        <label class={resolvedClasses().label} data-slot="label">
+          {props.label}
+        </label>
+      ) : null}
+
+      <div class="relative w-full" data-inputMenu-wrapper>
+        <button
+          type="button"
+          class={resolvedClasses().trigger}
+          data-slot="trigger"
+          disabled={props.disabled}
+          data-inputMenu-trigger
+          onClick={handleTriggerClick}
+        >
+          <span data-inputMenu-value>{visibleLabel()}</span>
+          <RLSIcon name="i-rl-chevronsUpDown" class="opacity-50" aria-hidden="true" />
+        </button>
+
+        <Show when={open()}>
+          <div
+            class={`${resolvedClasses().content} absolute z-50`}
+            data-inputMenu-dropdown
+            data-slot="content"
+          >
+            <input
+              type="text"
+              class={resolvedClasses().input}
+              placeholder="Search..."
+              data-inputMenu-search
+              ref={(el) => (searchRef = el)}
+              onInput={(e) => setQuery(e.currentTarget.value)}
+            />
+            <div class="py-1" data-inputMenu-items>
+              <For each={filteredItems()}>
+                {(item) => (
+                  <div
+                    class={resolvedClasses().item}
+                    data-slot="item"
+                    data-value={item.value}
+                    data-label={item.label}
+                    data-inputMenu-item
+                    data-state={
+                      String(item.value) === String(currentValue()) ? "selected" : undefined
+                    }
+                    onClick={(e) => handleItemClick(e, item)}
+                  >
+                    <span class={resolvedClasses().itemText}>{item.label}</span>
+                    <RLSIcon
+                      name="i-rl-check"
+                      class={`${resolvedClasses().itemIcon} ${
+                        String(item.value) === String(currentValue()) ? "" : "hidden"
+                      }`}
+                      data-check-icon
+                      aria-hidden="true"
+                    />
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+      </div>
+
+      <input
+        type="hidden"
+        name={props.name}
+        value={currentValue()}
+        data-inputMenu-hidden-input
+        ref={(el) => (hiddenRef = el)}
+      />
+    </div>
+  )
+}
+
+export default RLSInputMenu

package/src/components/input-number/RLSInputNumber.tsx

@@ -0,0 +1,184 @@
+import { createMemo, createSignal, splitProps, type Component, type JSX } from "solid-js"
+import type { InputNumberProps } from "./input-number"
+import { inputNumberTheme } from "./input-number.theme"
+import { inputTheme } from "../input/input.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSInputNumberProps extends InputNumberProps {
+  children?: JSX.Element
+  value?: number
+  defaultValue?: number
+  min?: number
+  max?: number
+  step?: number
+  name?: string
+  placeholder?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  size?: "sm" | "md" | "lg"
+  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void
+  onChange?: (e: Event & { currentTarget: HTMLInputElement }) => void
+  onBlur?: (e: FocusEvent & { currentTarget: HTMLInputElement }) => void
+  onFocus?: (e: FocusEvent & { currentTarget: HTMLInputElement }) => void
+  onKeyDown?: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
+  onValueChange?: (value: number) => void
+}
+
+const RLSInputNumber: Component<RLSInputNumberProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "children",
+    "value",
+    "defaultValue",
+    "min",
+    "max",
+    "step",
+    "name",
+    "placeholder",
+    "disabled",
+    "readonly",
+    "required",
+    "size",
+    "ui",
+    "class",
+    "onInput",
+    "onChange",
+    "onBlur",
+    "onFocus",
+    "onKeyDown",
+    "onValueChange"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    inputNumberTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const inputClasses = createMemo(() =>
+    inputTheme({
+      variant: "default",
+      size: props.size ?? "md",
+      error: false,
+      ui: props.ui
+    })
+  )
+
+  const clamp = (value: number) =>
+    Math.min(
+      props.max ?? Number.POSITIVE_INFINITY,
+      Math.max(props.min ?? Number.NEGATIVE_INFINITY, value)
+    )
+
+  const [internalValue, setInternalValue] = createSignal<number | undefined>(props.defaultValue)
+  const boundValue = () => (props.value !== undefined ? props.value : internalValue())
+
+  let inputRef: HTMLInputElement | undefined
+
+  const updateValue = (next: number) => {
+    const clamped = clamp(next)
+    if (props.value === undefined) setInternalValue(clamped)
+    props.onValueChange?.(clamped)
+  }
+
+  const stepBy = (dir: 1 | -1) => {
+    if (props.disabled || props.readonly) return
+    const raw = inputRef ? Number(inputRef.value) : Number(boundValue())
+    const base = Number.isNaN(raw) ? Number(boundValue() || 0) : raw
+    updateValue((Number.isNaN(base) ? 0 : base) + dir * (props.step ?? 1))
+    if (inputRef)
+      inputRef.value = String(clamp((Number.isNaN(base) ? 0 : base) + dir * (props.step ?? 1)))
+  }
+
+  const changeEvent = (el: HTMLInputElement): Event & { currentTarget: HTMLInputElement } => {
+    const ev = new Event("change", { bubbles: true })
+    Object.defineProperty(ev, "currentTarget", { value: el })
+    return ev as Event & { currentTarget: HTMLInputElement }
+  }
+
+  const commit = () => {
+    const el = inputRef
+    if (!el) return
+    const raw = Number(el.value)
+    if (el.value !== "" && !Number.isNaN(raw)) {
+      const clamped = clamp(raw)
+      if (props.value === undefined) setInternalValue(clamped)
+      if (clamped !== raw) el.value = String(clamped)
+      props.onValueChange?.(clamped)
+    }
+    props.onChange?.(changeEvent(el))
+  }
+
+  const handleWheel = (e: WheelEvent) => {
+    if (props.disabled || props.readonly) return
+    e.preventDefault()
+    stepBy(e.deltaY < 0 ? 1 : -1)
+  }
+
+  const handleKeyDown = (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+    props.onKeyDown?.(e)
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault()
+      stepBy(e.key === "ArrowUp" ? 1 : -1)
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      commit()
+    }
+  }
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      <div class={`relative w-full ${inputClasses().root}`}>
+        <input
+          ref={(el) => (inputRef = el)}
+          type="number"
+          name={props.name}
+          value={props.value !== undefined ? props.value : ""}
+          placeholder={props.placeholder}
+          min={props.min}
+          max={props.max}
+          step={props.step}
+          disabled={props.disabled}
+          readonly={props.readonly}
+          required={props.required}
+          class={`${inputClasses().input} pr-11 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none`}
+          data-slot="input"
+          onInput={props.onInput}
+          onChange={props.onChange}
+          onBlur={commit}
+          onFocus={props.onFocus}
+          onKeyDown={handleKeyDown}
+          onWheel={handleWheel}
+        />
+        <div class="absolute right-1 top-1/2 flex -translate-y-1/2 flex-col">
+          <button
+            type="button"
+            tabIndex={-1}
+            aria-label="Increment"
+            class="flex size-6 items-center justify-center rounded-sm text-muted hover:bg-muted/60 hover:text-highlighted disabled:cursor-not-allowed disabled:opacity-50"
+            data-slot="increment"
+            disabled={props.disabled || props.readonly}
+            onClick={() => stepBy(1)}
+          >
+            <RLSIcon name="arrowUp" size="xs" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            tabIndex={-1}
+            aria-label="Decrement"
+            class="flex size-6 items-center justify-center rounded-sm text-muted hover:bg-muted/60 hover:text-highlighted disabled:cursor-not-allowed disabled:opacity-50"
+            data-slot="decrement"
+            disabled={props.disabled || props.readonly}
+            onClick={() => stepBy(-1)}
+          >
+            <RLSIcon name="arrowDown" size="xs" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSInputNumber