@rimelight/ui 0.0.46 → 0.0.48

package/src/components/input-pin/RLSInputPin.tsx

@@ -0,0 +1,185 @@
+import { createMemo, createSignal, splitProps, For, type Component, type JSX } from "solid-js"
+import type { InputPinProps } from "./input-pin"
+import { inputPinTheme } from "./input-pin.theme"
+import { inputTheme } from "../input/input.theme"
+
+export interface RLSInputPinProps extends InputPinProps {
+  children?: JSX.Element
+  length?: number
+  value?: string
+  defaultValue?: string
+  name?: string
+  disabled?: boolean
+  required?: boolean
+  type?: "text" | "numeric" | "alphanumeric"
+  size?: "sm" | "md" | "lg"
+  onInput?: (e: InputEvent & { currentTarget: HTMLInputElement }) => void
+  onChange?: (e: Event & { currentTarget: HTMLInputElement }) => void
+  onKeyDown?: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => void
+  onComplete?: (value: string) => void
+}
+
+const RLSInputPin: Component<RLSInputPinProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "children",
+    "length",
+    "value",
+    "defaultValue",
+    "name",
+    "disabled",
+    "required",
+    "type",
+    "size",
+    "ui",
+    "class",
+    "onInput",
+    "onChange",
+    "onKeyDown",
+    "onComplete"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    inputPinTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const cellsClasses = createMemo(() =>
+    inputTheme({
+      variant: "default",
+      size: props.size ?? "md",
+      error: false,
+      ui: props.ui
+    })
+  )
+
+  const length = () => props.length ?? 4
+  const pinType = () => props.type ?? "numeric"
+
+  const initial = (props.value ?? props.defaultValue ?? "").split("")
+  const cells = createMemo(() => Array.from({ length: length() }))
+
+  const [current, setCurrent] = createSignal<string>(props.value ?? props.defaultValue ?? "")
+
+  let pinRefs: Array<HTMLInputElement | undefined> = []
+
+  const setCellRef = (el: HTMLInputElement | undefined, index: number) => {
+    pinRefs[index] = el
+  }
+
+  const focusCell = (index: number) => {
+    const el = pinRefs[index]
+    if (el) {
+      el.focus()
+      el.select()
+    }
+  }
+
+  const handleInput = (e: InputEvent & { currentTarget: HTMLInputElement }, index: number) => {
+    const input = e.currentTarget
+    let digit = input.value
+    if (pinType() === "numeric") {
+      digit = digit.replace(/[^0-9]/g, "")
+    } else if (pinType() === "alphanumeric") {
+      digit = digit.replace(/[^0-9a-zA-Z]/g, "")
+    } else {
+      digit = digit.replace(/[^0-9]/g, "")
+    }
+    digit = digit.slice(-1)
+    input.value = digit
+    const next = current().slice(0, index) + digit + current().slice(index + 1)
+    setCurrent(next)
+    props.onInput?.(e)
+    props.onChange?.(e)
+    if (digit) {
+      if (index < length() - 1) {
+        focusCell(index + 1)
+      } else if (next.length === length()) {
+        props.onComplete?.(next)
+      }
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent & { currentTarget: HTMLInputElement }, index: number) => {
+    props.onKeyDown?.(e)
+    const input = e.currentTarget
+    if (e.key === "Backspace" && input.value === "") {
+      e.preventDefault()
+      if (index > 0) focusCell(index - 1)
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault()
+      if (index > 0) focusCell(index - 1)
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault()
+      if (index < length() - 1) focusCell(index + 1)
+    }
+  }
+
+  const handlePaste = (e: ClipboardEvent, index: number) => {
+    const pasted = (e.clipboardData?.getData("text") ?? "")
+      .replace(pinType() === "numeric" ? /[^0-9]/g : /[^0-9a-zA-Z]/g, "")
+      .slice(0, length())
+    if (!pasted) return
+    e.preventDefault()
+    const next = current().split("")
+    for (let i = 0; i < pasted.length; i++) {
+      const char = pasted[i]
+      if (char !== undefined && index + i < length()) next[index + i] = char
+    }
+    const joined = next.join("")
+    setCurrent(joined)
+    const endIndex = Math.min(index + pasted.length, length() - 1)
+    const endEl = pinRefs[endIndex]
+    if (endEl) {
+      endEl.value = joined[endIndex] ?? ""
+      endEl.focus()
+    }
+    if (joined.length === length()) props.onComplete?.(joined)
+  }
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      <div
+        role="group"
+        aria-label="One-time code"
+        class="flex items-center gap-2"
+        data-slot="group"
+      >
+        <For each={cells()}>
+          {(_, index) => (
+            <div
+              class={`${cellsClasses().root} w-12 h-12 flex items-center justify-center rounded-md`}
+              data-slot="cell"
+            >
+              <input
+                ref={(el) => setCellRef(el, index())}
+                type="text"
+                name={props.name ? `${props.name}-${index()}` : undefined}
+                inputMode={pinType() === "numeric" ? "numeric" : "text"}
+                autocomplete="one-time-code"
+                maxLength={1}
+                value={initial[index()] ?? ""}
+                disabled={props.disabled}
+                required={props.required}
+                aria-label={`Digit ${index() + 1}`}
+                class={`${cellsClasses().input} w-full text-center`}
+                data-slot="input"
+                onInput={(e) =>
+                  handleInput(e as InputEvent & { currentTarget: HTMLInputElement }, index())
+                }
+                onKeyDown={(e) =>
+                  handleKeyDown(e as KeyboardEvent & { currentTarget: HTMLInputElement }, index())
+                }
+                onPaste={(e) => handlePaste(e, index())}
+              />
+            </div>
+          )}
+        </For>
+      </div>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSInputPin

package/src/components/input-rating/RLAInputRating.astro

@@ -117,12 +117,12 @@ const ratingItems = Array.from({ length }, (_, idx) => {
       const input = this.querySelector('.rating-hidden-input') as HTMLInputElement | null
       const items = this.querySelectorAll('.input-rating-item') as NodeListOf<HTMLElement>
 
-      const step = parseFloat(this.dataset.step || '1')
-      const length = parseInt(this.dataset.length || '5')
-      const clearable = this.dataset.clearable === 'true'
-      const hoverable = this.dataset.hoverable === 'true'
-      const disabled = this.dataset.disabled === 'true'
-      const readonly = this.dataset.readonly === 'true'
+      const step = parseFloat(this.dataset["step"] || '1')
+      const length = parseInt(this.dataset["length"] || '5')
+      const clearable = this.dataset["clearable"] === 'true'
+      const hoverable = this.dataset["hoverable"] === 'true'
+      const disabled = this.dataset["disabled"] === 'true'
+      const readonly = this.dataset["readonly"] === 'true'
 
       if (disabled || readonly) return
 
@@ -130,7 +130,7 @@ const ratingItems = Array.from({ length }, (_, idx) => {
 
       function updateVisuals(val: number) {
         items.forEach((item) => {
-          const idx = parseInt(item.dataset.index || '0')
+          const idx = parseInt(item.dataset["index"] || '0')
           const indicator = item.querySelector('.rating-item-indicator') as HTMLElement | null
           if (indicator) {
             indicator.style.width = getWidthForVal(val, idx)
@@ -153,7 +153,7 @@ const ratingItems = Array.from({ length }, (_, idx) => {
       const clickListeners = new Map<HTMLElement, (e: MouseEvent) => void>()
 
       items.forEach((item) => {
-        const idx = parseInt(item.dataset.index || '0')
+        const idx = parseInt(item.dataset["index"] || '0')
 
         const onMouseMove = (event: MouseEvent) => {
           const val = getValueFromEvent(event, item, idx)

package/src/components/input-rating/RLSInputRating.tsx

@@ -0,0 +1,198 @@
+import { createMemo, createSignal, splitProps, For, type Component } from "solid-js"
+import type { InputRatingProps } from "./input-rating"
+import { inputRatingTheme } from "./input-rating.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSInputRatingProps extends InputRatingProps {
+  onValueChange?: (value: number) => void
+}
+
+const RLSInputRating: Component<RLSInputRatingProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "id",
+    "readonly",
+    "icon",
+    "emptyIcon",
+    "color",
+    "size",
+    "orientation",
+    "step",
+    "disabled",
+    "required",
+    "name",
+    "modelValue",
+    "defaultValue",
+    "value",
+    "length",
+    "clearable",
+    "hoverable",
+    "ui",
+    "class",
+    "onValueChange"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    inputRatingTheme({
+      color: props.color ?? "primary",
+      size: props.size ?? "md",
+      orientation: props.orientation ?? "horizontal",
+      readonly: !!props.readonly,
+      disabled: !!props.disabled,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const step = () => props.step ?? 1
+  const length = () => props.length ?? 5
+  const itemSize = () => {
+    const map: Record<string, string> = {
+      xs: "0.75rem",
+      sm: "1rem",
+      md: "1.25rem",
+      lg: "1.5rem",
+      xl: "1.75rem"
+    }
+    return map[props.size ?? "md"] ?? "1.25rem"
+  }
+
+  const [internalValue, setInternalValue] = createSignal<number>(
+    props.value !== undefined
+      ? props.value
+      : props.modelValue !== undefined
+        ? props.modelValue
+        : (props.defaultValue ?? 0)
+  )
+  const value = () =>
+    props.value !== undefined
+      ? props.value
+      : props.modelValue !== undefined
+        ? props.modelValue
+        : internalValue()
+
+  const [hoverValue, setHoverValue] = createSignal<number | null>(null)
+  const display = (): number => (hoverValue() !== null ? hoverValue()! : value())
+
+  const items = createMemo(() => Array.from({ length: length() }, (_, idx) => idx + 1))
+
+  const getWidthForVal = (val: number, itemIndex: number) => {
+    if (val >= itemIndex) return "100%"
+    if (val <= itemIndex - 1) return "0%"
+    return `${(val - (itemIndex - 1)) * 100}%`
+  }
+
+  const getValueFromEvent = (e: MouseEvent, el: HTMLElement, index: number) => {
+    const rect = el.getBoundingClientRect()
+    const x = (e.clientX - rect.left) / rect.width
+    const steppedX = Math.ceil(x / step()) * step()
+    return Math.min(Math.max(index - 1 + steppedX, 0), length())
+  }
+
+  const handleMouseMove = (e: MouseEvent, el: HTMLElement, index: number) => {
+    if (props.disabled || props.readonly) return
+    if (props.hoverable) setHoverValue(getValueFromEvent(e, el, index))
+  }
+
+  const handleMouseLeave = () => {
+    setHoverValue(null)
+  }
+
+  const handleClick = (e: MouseEvent, el: HTMLElement, index: number) => {
+    if (props.disabled || props.readonly) return
+    const val = getValueFromEvent(e, el, index)
+    let finalVal = val
+    if (props.clearable && value() === val) finalVal = 0
+    if (props.value === undefined && props.modelValue === undefined) setInternalValue(finalVal)
+    props.onValueChange?.(finalVal)
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (props.disabled || props.readonly) return
+    let newVal = value()
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      newVal = Math.min(value() + step(), length())
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      newVal = Math.max(value() - step(), 0)
+    } else if (e.key === "Home") {
+      newVal = 0
+    } else if (e.key === "End") {
+      newVal = length()
+    } else {
+      return
+    }
+    e.preventDefault()
+    if (props.value === undefined && props.modelValue === undefined) setInternalValue(newVal)
+    props.onValueChange?.(newVal)
+  }
+
+  return (
+    <div
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-step={step()}
+      data-length={length()}
+      data-clearable={props.clearable ? "true" : "false"}
+      data-hoverable={props.hoverable ? "true" : "false"}
+      data-disabled={props.disabled ? "true" : "false"}
+      data-readonly={props.readonly ? "true" : "false"}
+      id={props.id}
+      role="slider"
+      aria-valuenow={value()}
+      aria-valuemin={0}
+      aria-valuemax={length()}
+      aria-readonly={props.readonly ? "true" : "false"}
+      aria-disabled={props.disabled ? "true" : "false"}
+      tabIndex={props.disabled || props.readonly ? undefined : 0}
+      onKeyDown={handleKeyDown}
+      {...rest}
+    >
+      <input
+        type="hidden"
+        name={props.name}
+        value={value()}
+        required={props.required}
+        disabled={props.disabled || props.readonly}
+        class="rating-hidden-input"
+      />
+
+      <For each={items()}>
+        {(i) => (
+          <div
+            class={`input-rating-item ${resolvedClasses().item}`}
+            data-slot="item"
+            data-index={i}
+            style={{ "--item-size": itemSize(), "width": itemSize(), "height": itemSize() }}
+            onMouseMove={(e) => handleMouseMove(e, e.currentTarget, i)}
+            onMouseLeave={handleMouseLeave}
+            onClick={(e) => handleClick(e, e.currentTarget, i)}
+          >
+            <div class={resolvedClasses().emptyIcon} data-slot="emptyIcon">
+              <RLSIcon
+                name={props.emptyIcon || props.icon || "star"}
+                size={props.size ?? "md"}
+                class={resolvedClasses().icon}
+                aria-hidden="true"
+              />
+            </div>
+
+            <div
+              class={`rating-item-indicator ${resolvedClasses().indicator}`}
+              data-slot="indicator"
+              data-state={display() >= i - 0.99 ? "active" : "inactive"}
+              style={{ width: getWidthForVal(display(), i) }}
+            >
+              <RLSIcon
+                name={props.icon || "star"}
+                size={props.size ?? "md"}
+                class={resolvedClasses().icon}
+                aria-hidden="true"
+              />
+            </div>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
+export default RLSInputRating

package/src/components/input-rating/input-rating.ts

@@ -71,6 +71,10 @@ export interface InputRatingProps {
    * The name of the field, submitted with form data.
    */
   name?: string
+  /**
+   * The controlled rating value.
+   */
+  value?: number
   /**
    * The controlled rating value. Can be bound with v-model.
    */

package/src/components/input-tags/RLSInputTags.tsx

@@ -0,0 +1,94 @@
+import { createMemo, createSignal, For, Show, splitProps, type Component, type JSX } from "solid-js"
+import type { InputTagsProps, TagItem } from "./input-tags"
+import { inputTagsTheme } from "./input-tags.theme"
+
+export interface RLSInputTagsProps extends InputTagsProps {
+  children?: JSX.Element
+  onAddTag?: (tag: string) => void
+  onRemoveTag?: (tag: TagItem) => void
+}
+
+const RLSInputTags: Component<RLSInputTagsProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "displayLimit",
+    "estimatedTagWidth",
+    "showInput",
+    "name",
+    "placeholder",
+    "ui",
+    "class",
+    "children",
+    "onAddTag",
+    "onRemoveTag"
+  ])
+
+  const [inputValue, setInputValue] = createSignal("")
+  const limit = () => props.displayLimit ?? 4
+
+  const normalizedItems = createMemo<TagItem[]>(() =>
+    (props.items ?? []).map((item) =>
+      typeof item === "string" ? { label: item, value: item } : item
+    )
+  )
+
+  const renderedItems = () => normalizedItems().slice(0, limit())
+  const overflowCount = () => Math.max(0, normalizedItems().length - limit())
+
+  const handleKeyDown: JSX.EventHandler<HTMLInputElement, KeyboardEvent> = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      const val = inputValue().trim()
+      if (val) {
+        props.onAddTag?.(val)
+        setInputValue("")
+      }
+    }
+  }
+
+  const resolvedClasses = createMemo(() =>
+    inputTagsTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      <Show when={normalizedItems().length > 0} fallback={props.children}>
+        <For each={renderedItems()}>
+          {(item) => (
+            <span class={resolvedClasses().tag} data-slot="tag">
+              <span class={resolvedClasses().tagLabel}>{item.label}</span>
+              <Show when={props.name}>
+                <input type="hidden" name={props.name} value={item.value ?? item.label} />
+              </Show>
+            </span>
+          )}
+        </For>
+
+        <Show when={overflowCount() > 0}>
+          <span class={resolvedClasses().more} data-slot="more" aria-hidden="true">
+            +{overflowCount()} more
+          </span>
+        </Show>
+      </Show>
+
+      <Show when={props.showInput}>
+        <input
+          type="text"
+          name={props.name ? `${props.name}__input` : undefined}
+          placeholder={props.placeholder || "Add tag…"}
+          value={inputValue()}
+          onInput={(e) => setInputValue(e.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          class={resolvedClasses().input}
+          data-slot="input"
+          autocomplete="off"
+        />
+      </Show>
+    </div>
+  )
+}
+
+export default RLSInputTags

package/src/components/input-time/RLSInputTime.tsx

@@ -0,0 +1,92 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { InputTimeProps } from "./input-time"
+import { inputTimeTheme } from "./input-time.theme"
+import { inputTheme } from "../input/input.theme"
+
+export interface RLSInputTimeProps extends InputTimeProps {
+  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 RLSInputTime: Component<RLSInputTimeProps> = (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(() =>
+    inputTimeTheme({
+      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="time"
+        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 RLSInputTime

package/src/components/kbd/RLSKbd.tsx

@@ -0,0 +1,37 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { KbdProps } from "./kbd"
+import { kbdTheme } from "./kbd.theme"
+
+export interface RLSKbdProps extends KbdProps {
+  children?: JSX.Element
+}
+
+const RLSKbd: Component<RLSKbdProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "color",
+    "variant",
+    "size",
+    "theme",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const classes = createMemo(() =>
+    kbdTheme({
+      color: props.color ?? "neutral",
+      variant: props.variant ?? "outline",
+      size: props.size ?? "md",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <kbd class={classes()["root"]} data-slot="root" data-theme={props.theme} {...rest}>
+      {props.children}
+    </kbd>
+  )
+}
+
+export default RLSKbd