@rimelight/ui 0.0.47 → 0.0.49

package/src/components/file-upload/RLSFileUpload.tsx

@@ -0,0 +1,163 @@
+import { createMemo, createSignal, splitProps, type Component, type JSX } from "solid-js"
+import type { FileUploadProps } from "./file-upload"
+import { fileUploadTheme } from "./file-upload.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSFileUploadProps extends FileUploadProps {
+  onChange?: (e: Event & { currentTarget: HTMLInputElement }) => void
+  children?: JSX.Element
+  iconSlot?: JSX.Element
+}
+
+const RLSFileUpload: Component<RLSFileUploadProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "accept",
+    "multiple",
+    "disabled",
+    "title",
+    "description",
+    "icon",
+    "color",
+    "ui",
+    "class",
+    "onChange",
+    "children",
+    "iconSlot"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    fileUploadTheme({
+      color: props.color,
+      disabled: !!props.disabled,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const [dragging, setDragging] = createSignal(false)
+  const [fileLabel, setFileLabel] = createSignal("")
+
+  let inputRef: HTMLInputElement | undefined
+
+  const uploadTitle = () => props.title ?? "Drop files here or click to upload"
+
+  const openPicker = () => {
+    if (props.disabled) return
+    inputRef?.click()
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (props.disabled) return
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault()
+      inputRef?.click()
+    }
+  }
+
+  const showFiles = (files: FileList | null) => {
+    if (!files || files.length === 0) return
+    setFileLabel(files.length === 1 ? files[0]!.name : `${files.length} files selected`)
+  }
+
+  const handleInputChange = (e: Event & { currentTarget: HTMLInputElement }) => {
+    showFiles(e.currentTarget.files)
+    props.onChange?.(e)
+  }
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault()
+    setDragging(true)
+  }
+
+  const handleDragLeave = () => {
+    setDragging(false)
+  }
+
+  const handleDrop = (e: DragEvent) => {
+    e.preventDefault()
+    setDragging(false)
+    const dt = e.dataTransfer
+    if (!dt) return
+    try {
+      const transfer = new DataTransfer()
+      Array.from(dt.files).forEach((f) => transfer.items.add(f))
+      if (inputRef) inputRef.files = transfer.files
+    } catch (err) {
+      void err
+    }
+    showFiles(dt.files)
+  }
+
+  return (
+    <div
+      class={resolvedClasses().root + (dragging() ? " border-primary bg-primary/5" : "")}
+      data-slot="root"
+      data-fileUpload
+      data-disabled={props.disabled ? "true" : undefined}
+      role="button"
+      tabIndex={props.disabled ? -1 : 0}
+      aria-label={uploadTitle()}
+      onClick={openPicker}
+      onKeyDown={handleKeyDown}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      {...rest}
+    >
+      <input
+        type="file"
+        class={resolvedClasses().input}
+        accept={props.accept}
+        multiple={props.multiple}
+        disabled={props.disabled}
+        data-fileUpload-input
+        aria-hidden="true"
+        tabIndex={-1}
+        ref={(el) => (inputRef = el)}
+        onChange={handleInputChange}
+      />
+
+      <div class={resolvedClasses().content} data-slot="content">
+        {props.iconSlot ? (
+          props.iconSlot
+        ) : (
+          <RLSIcon
+            name={props.icon ?? "uploadCloud"}
+            class={resolvedClasses().icon}
+            aria-hidden="true"
+          />
+        )}
+
+        {props.children ? (
+          props.children
+        ) : (
+          <>
+            <p class={resolvedClasses().title} data-slot="title">
+              {uploadTitle()}
+            </p>
+            {props.description ? (
+              <p class={resolvedClasses().description} data-slot="description">
+                {props.description}
+              </p>
+            ) : null}
+            {props.accept ? (
+              <p class="mt-1 text-[10px] text-muted/70">
+                Accepted: <span class="font-mono">{props.accept}</span>
+              </p>
+            ) : null}
+          </>
+        )}
+
+        <div
+          class={`mt-3 text-xs text-muted ${fileLabel() ? "" : "hidden"}`}
+          data-fileUpload-filelist
+          aria-live="polite"
+        >
+          {fileLabel() || "\u00a0"}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RLSFileUpload

package/src/components/floating-action/RLSFloatingAction.tsx

@@ -0,0 +1,26 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { FloatingActionProps } from "./floating-action"
+import { floatingActionTheme } from "./floating-action.theme"
+
+export interface RLSFloatingActionProps extends FloatingActionProps {
+  children?: JSX.Element
+}
+
+const RLSFloatingAction: Component<RLSFloatingActionProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    floatingActionTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSFloatingAction

package/src/components/footer/RLSFooter.tsx

@@ -0,0 +1,56 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { FooterProps } from "./footer"
+import { footerTheme } from "./footer.theme"
+
+export interface RLSFooterProps extends FooterProps {
+  left?: JSX.Element
+  center?: JSX.Element
+  right?: JSX.Element
+  children?: JSX.Element
+}
+
+const RLSFooter: Component<RLSFooterProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "contain",
+    "theme",
+    "ui",
+    "class",
+    "left",
+    "center",
+    "right",
+    "children"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    footerTheme({
+      contain: props.contain,
+      theme: props.theme,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <footer
+      class={resolvedClasses().root}
+      data-slot="root"
+      data-contain={props.contain ? "true" : "false"}
+      data-theme={props.theme}
+      {...rest}
+    >
+      <div class={resolvedClasses().container} data-slot="container">
+        <div class={resolvedClasses().left} data-slot="left">
+          {props.left}
+        </div>
+        <div class={resolvedClasses().center} data-slot="center">
+          {props.center}
+        </div>
+        <div class={resolvedClasses().right} data-slot="right">
+          {props.right}
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default RLSFooter

package/src/components/form/RLSForm.tsx

@@ -0,0 +1,34 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { FormProps } from "./form"
+import { formTheme } from "./form.theme"
+
+export interface RLSFormProps extends FormProps {
+  children?: JSX.Element
+  onSubmit?: (e: Event & { currentTarget: HTMLFormElement }) => void
+}
+
+const RLSForm: Component<RLSFormProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "schema",
+    "state",
+    "ui",
+    "class",
+    "children",
+    "onSubmit"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    formTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <form class={resolvedClasses().root} data-slot="root" onSubmit={props.onSubmit} {...rest}>
+      {props.children}
+    </form>
+  )
+}
+
+export default RLSForm

package/src/components/gallery/RLSGallery.tsx

@@ -0,0 +1,21 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { GalleryProps } from "./gallery"
+import { galleryTheme } from "./gallery.theme"
+
+export interface RLSGalleryProps extends GalleryProps {
+  children?: JSX.Element
+}
+
+const RLSGallery: Component<RLSGalleryProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() => galleryTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSGallery

package/src/components/gamepad/RLSGamepad.tsx

@@ -0,0 +1,269 @@
+import { For, Show, splitProps, type Component } from "solid-js"
+
+interface HighlightGroup {
+  label: string
+  buttons: string[]
+  color: string
+}
+
+export interface RLSGamepadProps {
+  highlightedButtons?: string[]
+  groups?: HighlightGroup[]
+  highlightColor?: string
+  backgroundColor?: string
+}
+
+interface GamepadButton {
+  id: string
+  label?: string
+  x: number
+  y: number
+  r?: number
+  w?: number
+  h?: number
+  type?: string
+}
+
+const shoulderButtons: GamepadButton[] = [
+  { id: "L2", label: "LT", x: 65, y: 10, w: 80, h: 22 },
+  { id: "L1", label: "LB", x: 65, y: 42, w: 80, h: 22 },
+  { id: "R2", label: "RT", x: 255, y: 10, w: 80, h: 22 },
+  { id: "R1", label: "RB", x: 255, y: 42, w: 80, h: 22 }
+]
+
+const mainButtons: GamepadButton[] = [
+  { id: "Y", label: "Y", x: 315, y: 125, r: 12 },
+  { id: "X", label: "X", x: 288, y: 152, r: 12 },
+  { id: "B", label: "B", x: 342, y: 152, r: 12 },
+  { id: "A", label: "A", x: 315, y: 179, r: 12 },
+  { id: "DPadUp", x: 85, y: 130, w: 20, h: 20, type: "dpad" },
+  { id: "DPadDown", x: 85, y: 174, w: 20, h: 20, type: "dpad" },
+  { id: "DPadLeft", x: 63, y: 152, w: 20, h: 20, type: "dpad" },
+  { id: "DPadRight", x: 107, y: 152, w: 20, h: 20, type: "dpad" },
+  { id: "LS", x: 155, y: 215, r: 24 },
+  { id: "RS", x: 245, y: 215, r: 24 },
+  { id: "View", label: "⧉", x: 145, y: 105, w: 16, h: 10 },
+  { id: "Menu", label: "≡", x: 239, y: 105, w: 16, h: 10 }
+]
+
+const RLSGamepad: Component<RLSGamepadProps> = (allProps) => {
+  const [props] = splitProps(allProps, [
+    "highlightedButtons",
+    "groups",
+    "highlightColor",
+    "backgroundColor"
+  ])
+
+  const highlighted = (): string[] => props.highlightedButtons ?? []
+  const groups = (): HighlightGroup[] => props.groups ?? []
+  const highlightColor = (): string => props.highlightColor || "var(--rl-primary-500)"
+  const backgroundColor = (): string => props.backgroundColor || "transparent"
+
+  const getButtonHighlight = (buttonId: string): { active: boolean; color: string | undefined } => {
+    if (highlighted().includes(buttonId)) {
+      return { active: true, color: highlightColor() }
+    }
+    for (const group of groups()) {
+      if (group.buttons.includes(buttonId)) {
+        return { active: true, color: group.color }
+      }
+    }
+    return { active: false, color: undefined }
+  }
+
+  return (
+    <div class="gamepad-wrapper">
+      <div class="gamepad-container">
+        <svg viewBox="-20 -20 440 380" class="gamepad-svg">
+          <defs>
+            <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stop-color="#2a2a40" stop-opacity="1" />
+              <stop offset="100%" stop-color="#1a1a2e" stop-opacity="1" />
+            </linearGradient>
+          </defs>
+
+          <Show when={backgroundColor() !== "transparent"}>
+            <rect x="-20" y="-20" width="440" height="360" fill={backgroundColor()} rx="24" />
+          </Show>
+
+          <For each={shoulderButtons}>
+            {(btn) => {
+              const highlight = getButtonHighlight(btn.id)
+              const w = btn.w || 0
+              const h = btn.h || 0
+              const color = highlight.active ? highlight.color || highlightColor() : "#1e1e30"
+              return (
+                <g class={`gp-btn shoulder ${highlight.active ? "active" : ""}`}>
+                  <rect
+                    x={btn.x}
+                    y={btn.y}
+                    width={w}
+                    height={h}
+                    rx="5"
+                    fill={color}
+                    stroke={highlight.active ? "#ffffff33" : "#33334d"}
+                    stroke-width={highlight.active ? "1.5" : "1"}
+                  />
+                  {btn.label ? (
+                    <text
+                      x={btn.x + w / 2}
+                      y={btn.y + h / 2}
+                      text-anchor="middle"
+                      dominant-baseline="central"
+                      class="btn-label"
+                      fill={highlight.active ? "#fff" : "#555570"}
+                    >
+                      {btn.label}
+                    </text>
+                  ) : null}
+                </g>
+              )
+            }}
+          </For>
+
+          <path
+            d="M120,85 L280,85 C320,85 340,95 350,115 C370,145 390,215 390,245 C390,285 360,315 320,315 C290,315 260,285 240,255 C220,245 180,245 160,255 C140,285 110,315 80,315 C40,315 10,285 10,245 C10,215 30,145 50,115 C60,95 80,85 120,85 Z"
+            fill="url(#bodyGrad)"
+            stroke="#33334d"
+            stroke-width="1"
+          />
+
+          <path
+            d="M145,90 L255,90 L262,150 L138,150 Z"
+            fill="#151525"
+            stroke="#33334d"
+            stroke-width="0.5"
+          />
+
+          <For each={mainButtons}>
+            {(btn) => {
+              const highlight = getButtonHighlight(btn.id)
+              const color = highlight.active ? highlight.color || highlightColor() : "#1e1e30"
+
+              if (btn.r) {
+                return (
+                  <g class={`gp-btn ${highlight.active ? "active" : ""}`}>
+                    <circle
+                      cx={btn.x}
+                      cy={btn.y}
+                      r={btn.r}
+                      fill={color}
+                      stroke={highlight.active ? "#ffffff33" : "#33334d"}
+                      stroke-width={highlight.active ? "1.5" : "1"}
+                    />
+                    {btn.label ? (
+                      <text
+                        x={btn.x}
+                        y={btn.y}
+                        text-anchor="middle"
+                        dominant-baseline="central"
+                        class="btn-label"
+                        fill={highlight.active ? "#fff" : "#555570"}
+                      >
+                        {btn.label}
+                      </text>
+                    ) : null}
+                  </g>
+                )
+              }
+
+              const w = btn.w || 0
+              const h = btn.h || 0
+              return (
+                <g class={`gp-btn ${highlight.active ? "active" : ""}`}>
+                  <rect
+                    x={btn.x}
+                    y={btn.y}
+                    width={w}
+                    height={h}
+                    rx="3"
+                    fill={color}
+                    stroke={highlight.active ? "#ffffff33" : "#33334d"}
+                    stroke-width={highlight.active ? "1.5" : "1"}
+                  />
+                  {btn.label ? (
+                    <text
+                      x={btn.x + w / 2}
+                      y={btn.y + h / 2}
+                      text-anchor="middle"
+                      dominant-baseline="central"
+                      class="btn-label"
+                      fill={highlight.active ? "#fff" : "#555570"}
+                    >
+                      {btn.label}
+                    </text>
+                  ) : null}
+                </g>
+              )
+            }}
+          </For>
+        </svg>
+      </div>
+
+      <Show when={groups().some((group) => group.label)}>
+        <div class="flex flex-wrap justify-center gap-x-6 gap-y-3 mt-10 w-full">
+          <For each={groups().filter((group) => group.label)}>
+            {(group) => (
+              <div class="flex items-center gap-2 m-0 p-0 h-[10px] text-[10px] text-[#777790] uppercase tracking-[0.1em] font-bold leading-[10px]">
+                <svg width="8" height="8" class="flex-shrink-0 block">
+                  <rect width="8" height="8" rx="2" fill={group.color} />
+                </svg>
+                <span class="inline-block h-[10px] leading-[10px] m-0 p-0">{group.label}</span>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      <style>{`
+        .gamepad-wrapper {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: 3rem;
+          border-radius: 1.5rem;
+          width: 100%;
+          max-width: 100%;
+          margin: 1.5rem 0;
+          box-sizing: border-box;
+          container-type: inline-size;
+          border: 1px solid #1a1a2e;
+        }
+        .gamepad-container {
+          width: 100%;
+          max-width: 27.5rem;
+        }
+        .gamepad-svg {
+          width: 100%;
+          height: auto;
+        }
+        .gp-btn rect,
+        .gp-btn circle {
+          fill: #1e1e30;
+          stroke: #33334d;
+          stroke-width: 1;
+          transition: all 0.2s ease;
+        }
+        .btn-label {
+          fill: #555570;
+          font-size: 0.625rem;
+          font-family: var(--font-sans, system-ui);
+          font-weight: 800;
+          pointer-events: none;
+          line-height: 1;
+        }
+        .gp-btn.active rect,
+        .gp-btn.active circle {
+          fill: var(--hl-color, #00c16a);
+          stroke: #ffffff33;
+          stroke-width: 1.5;
+        }
+        .gp-btn.active .btn-label {
+          fill: #fff;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default RLSGamepad

package/src/components/grid/RLSGrid.tsx

@@ -0,0 +1,29 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { GridProps } from "./grid"
+import { gridTheme } from "./grid.theme"
+
+export interface RLSGridProps extends GridProps {
+  children?: JSX.Element
+}
+
+const RLSGrid: Component<RLSGridProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["cols", "stagger", "gap", "ui", "class", "children"])
+
+  const resolvedClasses = createMemo(() =>
+    gridTheme({
+      cols: props.cols ?? 2,
+      gap: props.gap ?? "md",
+      stagger: props.stagger ?? false,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} {...rest}>
+      {props.children}
+    </div>
+  )
+}
+
+export default RLSGrid

package/src/components/head/RLAHead.astro

@@ -0,0 +1,9 @@
+---
+import UIHead, { type UIHeadProps } from "./UIHead.astro"
+
+export interface Props extends UIHeadProps {}
+---
+
+<UIHead {...Astro.props}>
+  <slot />
+</UIHead>

package/src/components/head/RLSHead.tsx

@@ -0,0 +1,42 @@
+import { onMount, onCleanup, type Component, type JSX } from "solid-js"
+
+export interface RLSHeadProps {
+  transitions?: boolean
+  children?: JSX.Element
+}
+
+const RLSHead: Component<RLSHeadProps> = (_allProps) => {
+  const getThemePreference = (): "dark" | "light" => {
+    if (typeof localStorage === "undefined") return "light"
+    const stored = localStorage.getItem("theme")
+    if (stored === "dark" || stored === "light") return stored
+    const dark = window.matchMedia("(prefers-color-scheme: dark)").matches
+    return dark ? "dark" : "light"
+  }
+
+  const applyTheme = () => {
+    if (typeof document === "undefined") return
+    document.documentElement.setAttribute("data-theme", getThemePreference())
+  }
+
+  onMount(() => {
+    applyTheme()
+
+    const mql = window.matchMedia("(prefers-color-scheme: dark)")
+    const onChange = () => {
+      if (localStorage.getItem("theme") === "system") applyTheme()
+    }
+
+    if (typeof mql.addEventListener === "function") {
+      mql.addEventListener("change", onChange)
+      onCleanup(() => mql.removeEventListener("change", onChange))
+    } else {
+      mql.addListener(onChange)
+      onCleanup(() => mql.removeListener(onChange))
+    }
+  })
+
+  return null
+}
+
+export default RLSHead

package/src/components/head/UIHead.astro

@@ -17,6 +17,9 @@ const {
     function getThemePreference() {
       var stored = localStorage.getItem('theme');
       if (stored === 'dark' || stored === 'light') return stored;
+      if (stored === 'system') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
       return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }