@rimelight/ui 0.0.37 → 0.0.39

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

@@ -0,0 +1,265 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { InputRatingProps } from "./input-rating"
+import { resolveTheme } from "../../utils/resolveTheme"
+import inputRatingThemeDefault, { createInputRatingTheme } from "./input-rating.theme"
+const inputRatingTheme = resolveTheme(inputRatingThemeDefault, createInputRatingTheme)
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const inputRating = scv(inputRatingTheme)
+
+const {
+  id,
+  readonly = false,
+  icon = "star",
+  emptyIcon,
+  color = "primary",
+  size = "md",
+  orientation = "horizontal",
+  step = 1,
+  disabled = false,
+  required = false,
+  name,
+  defaultValue = 0,
+  length = 5,
+  clearable = false,
+  hoverable = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputRatingProps
+
+const classes = resolveClasses(
+  inputRating,
+  {
+    orientation,
+    size,
+    color: color as any,
+    readonly,
+    disabled
+  },
+  useUi("inputRating", uiProp),
+  className
+)
+
+const sizeMap = {
+  xs: "0.75rem",
+  sm: "1rem",
+  md: "1.25rem",
+  lg: "1.5rem",
+  xl: "1.75rem"
+}
+const itemSize = sizeMap[size] || "1.25rem"
+
+const ratingItems = Array.from({ length }, (_, idx) => {
+  const i = idx + 1;
+  const initWidth = defaultValue >= i ? "100%" : defaultValue <= i - 1 ? "0%" : `${(defaultValue - (i - 1)) * 100}%`;
+  const isActive = defaultValue >= i - 0.99 ? "active" : "inactive";
+  return { i, initWidth, isActive };
+});
+---
+
+<rla-input-rating
+  data-step={step}
+  data-length={length}
+  data-clearable={clearable ? "true" : "false"}
+  data-hoverable={hoverable ? "true" : "false"}
+  data-disabled={disabled ? "true" : "false"}
+  data-readonly={readonly ? "true" : "false"}
+>
+  <div
+    class={classes.root}
+    data-slot="root"
+    id={id}
+    role="slider"
+    aria-valuenow={defaultValue}
+    aria-valuemin="0"
+    aria-valuemax={length}
+    aria-readonly={readonly ? "true" : "false"}
+    aria-disabled={disabled ? "true" : "false"}
+    tabindex={(disabled || readonly) ? undefined : "0"}
+    {...rest}
+  >
+    <input
+      type="hidden"
+      name={name}
+      value={defaultValue}
+      required={required}
+      disabled={disabled}
+      class="rating-hidden-input"
+    />
+
+    {ratingItems.map(({ i, initWidth, isActive }) => (
+      <div
+        class:list={["input-rating-item", classes.item]}
+        data-slot="item"
+        data-index={i}
+        style={`--item-size: ${itemSize}; width: ${itemSize}; height: ${itemSize};`}
+      >
+        <div class={classes.emptyIcon} data-slot="emptyIcon">
+          <slot name="item">
+            <RLAIcon name={emptyIcon || icon} size={size} class={classes.icon} />
+          </slot>
+        </div>
+
+        <div
+          class:list={["rating-item-indicator", classes.indicator]}
+          data-slot="indicator"
+          style={`width: ${initWidth}`}
+          data-state={isActive}
+        >
+          <slot name="item">
+            <RLAIcon name={icon} size={size} class={classes.icon} />
+          </slot>
+        </div>
+      </div>
+    ))}
+  </div>
+</rla-input-rating>
+
+<script>
+  function getWidthForVal(val: number, itemIndex: number) {
+    if (val >= itemIndex) return "100%"
+    if (val <= itemIndex - 1) return "0%"
+    return `${(val - (itemIndex - 1)) * 100}%`
+  }
+
+  class RLAInputRating extends HTMLElement {
+    private cleanup: (() => void) | null = null
+
+    connectedCallback() {
+      this.style.display = 'contents'
+      const root = this.querySelector('[data-slot="root"]') as HTMLElement | null
+      if (!root) return
+
+      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'
+
+      if (disabled || readonly) return
+
+      let selectedValue = parseFloat(input?.value || '0')
+
+      function updateVisuals(val: number) {
+        items.forEach((item) => {
+          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)
+            indicator.setAttribute('data-state', val >= idx - 0.99 ? 'active' : 'inactive')
+          }
+        })
+        root!.setAttribute('aria-valuenow', val.toString())
+      }
+
+      function getValueFromEvent(event: MouseEvent, item: HTMLElement, index: number) {
+        const rect = item.getBoundingClientRect()
+        const x = (event.clientX - rect.left) / rect.width
+        const steppedX = Math.ceil(x / step) * step
+        const val = index - 1 + steppedX
+        return Math.min(Math.max(val, 0), length)
+      }
+
+      const mouseMoveListeners = new Map<HTMLElement, (e: MouseEvent) => void>()
+      const mouseLeaveListeners = new Map<HTMLElement, () => void>()
+      const clickListeners = new Map<HTMLElement, (e: MouseEvent) => void>()
+
+      items.forEach((item) => {
+        const idx = parseInt(item.dataset.index || '0')
+
+        const onMouseMove = (event: MouseEvent) => {
+          const val = getValueFromEvent(event, item, idx)
+          if (hoverable) {
+            updateVisuals(val)
+          }
+        }
+
+        const onMouseLeave = () => {
+          updateVisuals(selectedValue)
+        }
+
+        const onClick = (event: MouseEvent) => {
+          const val = getValueFromEvent(event, item, idx)
+          let finalVal = val
+          if (clearable && selectedValue === val) {
+            finalVal = 0
+          }
+          selectedValue = finalVal
+          if (input) {
+            input.value = finalVal.toString()
+            input.dispatchEvent(new Event('change', { bubbles: true }))
+          }
+          updateVisuals(finalVal)
+        }
+
+        item.addEventListener('mousemove', onMouseMove)
+        item.addEventListener('mouseleave', onMouseLeave)
+        item.addEventListener('click', onClick)
+
+        mouseMoveListeners.set(item, onMouseMove)
+        mouseLeaveListeners.set(item, onMouseLeave)
+        clickListeners.set(item, onClick)
+      })
+
+      const onKeyDown = (event: KeyboardEvent) => {
+        let newVal = selectedValue
+        if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+          newVal = Math.min(selectedValue + step, length)
+          event.preventDefault()
+        } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+          newVal = Math.max(selectedValue - step, 0)
+          event.preventDefault()
+        } else if (event.key === "Home") {
+          newVal = 0
+          event.preventDefault()
+        } else if (event.key === "End") {
+          newVal = length
+          event.preventDefault()
+        }
+
+        if (newVal !== selectedValue) {
+          selectedValue = newVal
+          if (input) {
+            input.value = newVal.toString()
+            input.dispatchEvent(new Event('change', { bubbles: true }))
+          }
+          updateVisuals(newVal)
+        }
+      }
+
+      root.addEventListener('keydown', onKeyDown)
+
+      this.cleanup = () => {
+        items.forEach((item) => {
+          const move = mouseMoveListeners.get(item)
+          const leave = mouseLeaveListeners.get(item)
+          const click = clickListeners.get(item)
+          if (move) item.removeEventListener('mousemove', move)
+          if (leave) item.removeEventListener('mouseleave', leave)
+          if (click) item.removeEventListener('click', click)
+        })
+        root.removeEventListener('keydown', onKeyDown)
+      }
+    }
+
+    disconnectedCallback() {
+      if (this.cleanup) {
+        this.cleanup()
+        this.cleanup = null
+      }
+    }
+  }
+
+  if (!customElements.get('rla-input-rating')) {
+    customElements.define('rla-input-rating', RLAInputRating)
+  }
+</script>

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

@@ -0,0 +1,84 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createInputRatingTheme = (colors: readonly string[] = colorConfig.colors) => {
+  const colorVariants: Record<string, { root?: string; indicator: string; item: string }> = {
+    neutral: {
+      indicator: "text-highlighted",
+      item: "focus-visible:outline-inverted"
+    }
+  }
+  for (const c of colors) {
+    colorVariants[c] = {
+      root: "rl-color-" + c,
+      indicator: "text-[var(--rl-bg)]",
+      item: "focus-visible:outline-[var(--rl-ring)]"
+    }
+  }
+
+  return defineTheme({
+    slots: ["root", "item", "indicator", "icon", "emptyIcon"],
+    base: {
+      root: "inline-flex select-none",
+      item: [
+        "relative inline-block cursor-pointer select-none rounded-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+        "transition-all duration-150"
+      ],
+      indicator:
+        "absolute inset-y-0 left-0 overflow-hidden outline-none pointer-events-none flex items-center justify-start",
+      icon: "block w-[var(--item-size)] h-[var(--item-size)] max-w-none shrink-0",
+      emptyIcon:
+        "absolute inset-0 overflow-hidden pointer-events-none flex items-center justify-start text-muted"
+    },
+    variants: {
+      orientation: {
+        horizontal: {
+          root: "flex-row items-center gap-0.5"
+        },
+        vertical: {
+          root: "flex-col items-center gap-0.5"
+        }
+      },
+      size: {
+        xs: { item: "size-3" },
+        sm: { item: "size-4" },
+        md: { item: "size-5" },
+        lg: { item: "size-6" },
+        xl: { item: "size-7" }
+      },
+      color: colorVariants,
+      readonly: {
+        true: {
+          root: "cursor-default",
+          item: "cursor-default pointer-events-none"
+        },
+        false: {}
+      },
+      disabled: {
+        true: {
+          root: "opacity-75 cursor-not-allowed",
+          item: "cursor-not-allowed pointer-events-none"
+        },
+        false: {}
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      orientation: "horizontal",
+      readonly: false,
+      disabled: false
+    },
+    compoundVariants: [
+      {
+        readonly: false,
+        disabled: false,
+        classNames: {
+          item: "hover:scale-110"
+        }
+      }
+    ]
+  })
+}
+
+export default createInputRatingTheme()

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

@@ -0,0 +1,106 @@
+import type { ThemeColor } from "../../types/component"
+
+export interface InputRatingProps {
+  /**
+   * The component or element the root should render as.
+   */
+  as?: any
+  /**
+   * The id of the rating component.
+   */
+  id?: string
+  /**
+   * Make the rating readonly (non-interactive).
+   *
+   * @default false
+   */
+  readonly?: boolean
+  /**
+   * The icon displayed for each rating value.
+   *
+   * @default "star"
+   */
+  icon?: any
+  /**
+   * The icon displayed for empty rating values. Defaults to `icon` when not provided.
+   */
+  emptyIcon?: any
+  /**
+   * The color theme of the rating component.
+   *
+   * @default "primary"
+   */
+  color?: ThemeColor
+  /**
+   * The size scale of the component.
+   *
+   * @default "md"
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  /**
+   * The orientation of the rating items.
+   *
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical"
+  /**
+   * Slot-specific class overrides.
+   */
+  ui?: {
+    root?: any
+    item?: any
+    indicator?: any
+    icon?: any
+    emptyIcon?: any
+  }
+  /**
+   * The granularity each rating item is divided into.
+   *
+   * @default 1
+   */
+  step?: 1 | 0.5 | 0.25 | 0.1
+  /**
+   * When `true`, prevents the user from interacting with rating items.
+   */
+  disabled?: boolean
+  /**
+   * When `true`, indicates that the user must set the value before form submission.
+   */
+  required?: boolean
+  /**
+   * The name of the field, submitted with form data.
+   */
+  name?: string
+  /**
+   * The controlled rating value. Can be bound with v-model.
+   */
+  modelValue?: number
+  /**
+   * The initial rating value when rendered.
+   *
+   * @default 0
+   */
+  defaultValue?: number
+  /**
+   * The number of rating items to render.
+   *
+   * @default 5
+   */
+  length?: number
+  /**
+   * When `true`, clicking the currently selected rating resets it to 0.
+   *
+   * @default false
+   */
+  clearable?: boolean
+  /**
+   * When `true`, preview the hovered value when pointer hovers over stars.
+   *
+   * @default false
+   */
+  hoverable?: boolean
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+}

package/src/components/input-tags/RLAInputTags.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { InputTagsProps } from "./input-tags"
+import inputTagsTheme from "./input-tags.theme"
+
+
+const inputTags = scv(inputTagsTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputTagsProps
+
+const classes = resolveClasses(inputTags, {}, useUi("inputTags", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/input-tags/input-tags.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createInputTagsTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createInputTagsTheme()

package/src/components/input-time/RLAInputTime.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { InputTimeProps } from "./input-time"
+import inputTimeTheme from "./input-time.theme"
+
+
+const inputTime = scv(inputTimeTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputTimeProps
+
+const classes = resolveClasses(inputTime, {}, useUi("inputTime", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/input-time/input-time.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createInputTimeTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createInputTimeTheme()

package/src/components/kbd/RLAKbd.astro

@@ -0,0 +1,32 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { KbdProps } from "./kbd"
+import { resolveTheme } from "../../utils/resolveTheme"
+import kbdThemeDefault, { createKbdTheme } from "./kbd.theme"
+const kbdTheme = resolveTheme(kbdThemeDefault, createKbdTheme)
+
+
+const kbd = scv(kbdTheme)
+
+const {
+  size = "md",
+  color = "neutral",
+  variant = "outline",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as KbdProps & { color?: string; variant?: string; theme?: string }
+
+const classes = resolveClasses(kbd, {
+  size,
+  color: color as "neutral",
+  variant: variant as "solid",
+  theme: theme as "dark"
+}, useUi("kbd", uiProp), className)
+---
+<kbd class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</kbd>

package/src/components/kbd/kbd.theme.ts

@@ -0,0 +1,97 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createKbdTheme = (colors: readonly string[] = colorConfig.colors) => {
+  const colorVariants: Record<string, { root: string }> = { neutral: { root: "" } }
+  for (const c of colors) {
+    colorVariants[c] = { root: "" }
+  }
+
+  return defineTheme({
+    slots: ["root"],
+    base: {
+      root: "inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans uppercase"
+    },
+    variants: {
+      color: colorVariants,
+      variant: {
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" }
+      },
+      size: {
+        sm: { root: "h-4 min-w-[16px] text-[10px]" },
+        md: { root: "h-5 min-w-[20px] text-[11px]" },
+        lg: { root: "h-6 min-w-[24px] text-[12px]" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " ring ring-inset ring-[var(--rl-border)]/50 text-[var(--rl-text)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " text-[var(--rl-text)] bg-[var(--rl-bg)]/10"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25 bg-[var(--rl-bg)]/10"
+        }
+      })),
+      {
+        color: "neutral",
+        variant: "solid",
+        classNames: { root: "text-inverted bg-inverted" }
+      },
+      {
+        color: "neutral",
+        variant: "outline",
+        classNames: { root: "ring ring-inset ring-accented text-default bg-default" }
+      },
+      {
+        color: "neutral",
+        variant: "soft",
+        classNames: { root: "text-default bg-elevated" }
+      },
+      {
+        color: "neutral",
+        variant: "subtle",
+        classNames: { root: "ring ring-inset ring-accented text-default bg-elevated" }
+      }
+    ],
+    defaultVariants: {
+      variant: "outline",
+      color: "neutral",
+      size: "md"
+    }
+  })
+}
+
+export default createKbdTheme()