@rimelight/ui 0.0.47 → 0.0.49

package/src/components/layout-grid/RLSLayoutGrid.tsx

@@ -0,0 +1,402 @@
+import {
+  createMemo,
+  createSignal,
+  createEffect,
+  splitProps,
+  Show,
+  onMount,
+  onCleanup,
+  type Component
+} from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { LayoutGridProps } from "./layout-grid"
+import { layoutGridTheme } from "./layout-grid.theme"
+import { defineShortcuts } from "../../shortcuts"
+
+const isDev = (import.meta as ImportMeta & { env?: { DEV?: boolean } }).env?.DEV === true
+
+const normalizeArray = (val: number | number[] | undefined, defaultValue: number): number[] => {
+  if (val === undefined)
+    return [defaultValue, defaultValue, defaultValue, defaultValue, defaultValue]
+  if (!Array.isArray(val)) return [val, val, val, val, val]
+  const arr = [...val]
+  while (arr.length < 5) {
+    const lastVal = arr[arr.length - 1]
+    arr.push(lastVal !== undefined ? lastVal : defaultValue)
+  }
+  return arr
+}
+
+const hexToRgba = (hex: string, alpha: number): string => {
+  const cleanHex = hex.replace("#", "")
+  const num = parseInt(cleanHex, 16)
+  const r = (num >> 16) & 255
+  const g = (num >> 8) & 255
+  const b = num & 255
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+export interface RLSLayoutGridProps extends LayoutGridProps {}
+
+const RLSLayoutGrid: Component<RLSLayoutGridProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "cols",
+    "smCols",
+    "mdCols",
+    "lgCols",
+    "xlCols",
+    "smBreakpoint",
+    "mdBreakpoint",
+    "lgBreakpoint",
+    "xlBreakpoint",
+    "gutter",
+    "margin",
+    "gridColor",
+    "gridOpacity",
+    "maxWidth",
+    "innerMaxWidth",
+    "innerGridColor",
+    "innerGridOpacity",
+    "showInnerBackground",
+    "showBackground",
+    "showFullWidth",
+    "fullWidthGridColor",
+    "fullWidthGridOpacity",
+    "showFullWidthBackground",
+    "zIndex",
+    "shortcut",
+    "devOnly",
+    "ui",
+    "class"
+  ])
+
+  const resolvedClasses = createMemo(() => layoutGridTheme({ ui: props.ui, class: props.class }))
+
+  const gutterArray = createMemo(() => normalizeArray(props.gutter ?? [0.75, 1, 1.5, 2, 2], 1))
+  const marginArray = createMemo(() => normalizeArray(props.margin ?? [0.75, 1, 1.5, 2, 2], 1))
+
+  const shouldRender = () => !(props.devOnly ?? true) || isDev
+
+  let hostRef: HTMLElement | undefined
+  let overlayRef: HTMLElement | undefined
+  let columnsRef: HTMLElement | undefined
+  let indicatorRef: HTMLElement | undefined
+
+  const [visible, setVisible] = createSignal(false)
+  const [currentBreakpoint, setCurrentBreakpoint] = createSignal<
+    "base" | "sm" | "md" | "lg" | "xl"
+  >("base")
+
+  const toggleGrid = () => {
+    setVisible((wasVisible) => {
+      const next = !wasVisible
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem("rla-grid-visible", next ? "true" : "false")
+      }
+      if (overlayRef) overlayRef.style.display = next ? "block" : "none"
+      return next
+    })
+  }
+
+  onMount(() => {
+    if (typeof localStorage !== "undefined") {
+      setVisible(localStorage.getItem("rla-grid-visible") === "true")
+    }
+
+    const updateBreakpoint = () => {
+      const width = document.documentElement.clientWidth
+      const sm = props.smBreakpoint ?? 640
+      const md = props.mdBreakpoint ?? 768
+      const lg = props.lgBreakpoint ?? 1024
+      const xl = props.xlBreakpoint ?? 1280
+      let next: "base" | "sm" | "md" | "lg" | "xl" = "base"
+      if (width >= xl) next = "xl"
+      else if (width >= lg) next = "lg"
+      else if (width >= md) next = "md"
+      else if (width >= sm) next = "sm"
+      setCurrentBreakpoint(next)
+    }
+    updateBreakpoint()
+
+    const resizeObserver = new ResizeObserver(updateBreakpoint)
+    resizeObserver.observe(document.documentElement)
+
+    const cleanupShortcuts = defineShortcuts({
+      [props.shortcut ?? "meta_shift_g"]: {
+        handler: (e) => {
+          e.preventDefault()
+          toggleGrid()
+        },
+        label: "Toggle Layout Grid",
+        description: "Show or hide the development layout grid guide overlay",
+        category: "development"
+      }
+    })
+
+    onCleanup(() => {
+      resizeObserver.disconnect()
+      cleanupShortcuts()
+    })
+  })
+
+  const updateGrid = () => {
+    const columnsContainer = columnsRef
+    const indicatorElement = indicatorRef
+    if (!columnsContainer || !visible()) return
+
+    const width = document.documentElement.clientWidth
+    const smBreakpoint = props.smBreakpoint ?? 640
+    const mdBreakpoint = props.mdBreakpoint ?? 768
+    const lgBreakpoint = props.lgBreakpoint ?? 1024
+    const xlBreakpoint = props.xlBreakpoint ?? 1280
+
+    let breakpointIndex = 0
+    let colCount = props.cols ?? 4
+    let breakpointThreshold = 0
+
+    switch (currentBreakpoint()) {
+      case "xl":
+        breakpointIndex = 4
+        colCount = props.xlCols ?? 12
+        breakpointThreshold = xlBreakpoint
+        break
+      case "lg":
+        breakpointIndex = 3
+        colCount = props.lgCols ?? 12
+        breakpointThreshold = lgBreakpoint
+        break
+      case "md":
+        breakpointIndex = 2
+        colCount = props.mdCols ?? 8
+        breakpointThreshold = mdBreakpoint
+        break
+      case "sm":
+        breakpointIndex = 1
+        colCount = props.smCols ?? 4
+        breakpointThreshold = smBreakpoint
+        break
+      default:
+        breakpointIndex = 0
+        colCount = props.cols ?? 4
+        breakpointThreshold = 0
+        break
+    }
+
+    const gutters = gutterArray()
+    const margins = marginArray()
+    const gutterValue = gutters[breakpointIndex] ?? gutters[gutters.length - 1] ?? 1
+    const marginValue = margins[breakpointIndex] ?? margins[margins.length - 1] ?? 1
+
+    const gridColor = props.gridColor ?? "#ff0000"
+    const gridOpacity = props.gridOpacity ?? 0.1
+    const showBackground = props.showBackground ?? true
+    const showFullWidth = props.showFullWidth ?? true
+    const fullWidthColor = props.fullWidthGridColor ?? "#3b82f6"
+    const fullWidthOpacity = props.fullWidthGridOpacity ?? 0.05
+    const showFullWidthBackground = props.showFullWidthBackground ?? true
+
+    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+    const marginPx = marginValue * rootFontSize
+    const gutterPx = gutterValue * rootFontSize
+
+    const maxWidthVal = props.maxWidth ?? "1440px"
+    let maxWidthPx = width
+    if (!maxWidthVal.includes("vw")) {
+      maxWidthPx = parseInt(maxWidthVal)
+    }
+
+    const innerMaxWidthVal = props.innerMaxWidth ?? "768px"
+    let innerMaxWidthPx = width
+    if (!innerMaxWidthVal.includes("vw")) {
+      innerMaxWidthPx = parseInt(innerMaxWidthVal)
+    }
+
+    const innerGridColor = props.innerGridColor ?? "#10b981"
+    const innerGridOpacity = props.innerGridOpacity ?? 0.1
+    const showInnerBackground = props.showInnerBackground ?? true
+
+    const activeWidth = width > maxWidthPx ? maxWidthPx : width
+    const innerWidth = activeWidth - 2 * marginPx
+    const colWidth = (innerWidth - (colCount - 1) * gutterPx) / colCount
+
+    const containerLeft = (width - maxWidthPx) / 2
+    const containerRight = (width + maxWidthPx) / 2
+
+    columnsContainer.innerHTML = ""
+
+    hostRef?.style.setProperty("--rla-grid-cols", colCount.toString())
+    hostRef?.style.setProperty("--rla-grid-gap", `${gutterPx}px`)
+    hostRef?.style.setProperty("--rla-grid-margin", `${marginPx}px`)
+    hostRef?.style.setProperty("--rla-grid-max-width", maxWidthVal)
+
+    const rootStyle = document.documentElement.style
+    rootStyle.setProperty("--rla-grid-cols", colCount.toString())
+    rootStyle.setProperty("--rla-grid-gap", `${gutterPx}px`)
+    rootStyle.setProperty("--rla-grid-gutter", `${gutterPx}px`)
+    rootStyle.setProperty("--rla-grid-col-width", `${colWidth}px`)
+    rootStyle.setProperty("--rla-grid-margin", `${marginPx}px`)
+    rootStyle.setProperty("--rla-grid-max-width", maxWidthVal)
+
+    const containerStartX = width > maxWidthPx ? containerLeft + marginPx : marginPx
+    const step = colWidth + gutterPx
+
+    let totalCols = colCount
+    if (width > maxWidthPx && showFullWidth) {
+      let leftX = marginPx
+      while (leftX + colWidth < containerLeft) {
+        totalCols++
+        leftX += step
+      }
+      let rightX = width - marginPx - colWidth
+      while (rightX > containerRight) {
+        totalCols++
+        rightX -= step
+      }
+    }
+
+    if (indicatorElement) {
+      indicatorElement.innerHTML = `<span style="color: #3b82f6;">${currentBreakpoint().toUpperCase()} (${breakpointThreshold}px)</span> <span style="opacity: 0.35;">|</span> <span>${width}px</span> <span style="opacity: 0.35;">|</span> <span style="color: #ef4444;">${totalCols} Cols</span>`
+    }
+
+    const gridWrapper = document.createElement("div")
+    gridWrapper.className =
+      "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl gap-xs sm:gap-md md:gap-xl lg:gap-xl h-full box-border grid"
+    gridWrapper.style.gridTemplateColumns = "repeat(var(--rla-grid-cols), 1fr)"
+
+    const innerLeft = (width - innerMaxWidthPx) / 2
+    const innerRight = (width + innerMaxWidthPx) / 2
+
+    for (let i = 0; i < colCount; i++) {
+      const colX = containerStartX + i * step
+      const colRight = colX + colWidth
+      const isInner = colX >= innerLeft - 1 && colRight <= innerRight + 1
+
+      const col = document.createElement("div")
+      col.className = "grid-column"
+      const color = isInner ? innerGridColor : gridColor
+      const opacity = isInner ? innerGridOpacity : gridOpacity
+      const bg = isInner ? showInnerBackground : showBackground
+      Object.assign(col.style, {
+        height: "100%",
+        borderInline: `1px solid ${color}`,
+        boxSizing: "border-box",
+        backgroundColor: bg ? hexToRgba(color, opacity) : "transparent"
+      })
+      gridWrapper.appendChild(col)
+    }
+
+    columnsContainer.appendChild(gridWrapper)
+
+    if (width > maxWidthPx && showFullWidth) {
+      const drawOuterColumn = (x: number) => {
+        const col = document.createElement("div")
+        col.className = "rla-outer-column"
+        Object.assign(col.style, {
+          position: "absolute",
+          top: "0",
+          left: `${x}px`,
+          width: `${colWidth}px`,
+          height: "100%",
+          borderInline: `1px solid ${fullWidthColor}`,
+          boxSizing: "border-box",
+          backgroundColor: showFullWidthBackground
+            ? hexToRgba(fullWidthColor, fullWidthOpacity)
+            : "transparent"
+        })
+        columnsContainer.appendChild(col)
+      }
+
+      let leftX = marginPx
+      while (leftX + colWidth < containerLeft) {
+        drawOuterColumn(leftX)
+        leftX += step
+      }
+
+      let rightX = width - marginPx - colWidth
+      while (rightX > containerRight) {
+        drawOuterColumn(rightX)
+        rightX -= step
+      }
+    }
+  }
+
+  createEffect(() => {
+    if (overlayRef) overlayRef.style.display = visible() ? "block" : "none"
+    updateGrid()
+  })
+
+  return (
+    <Show when={shouldRender()}>
+      <Dynamic
+        component={"rla-layout-grid"}
+        ref={(el: Element) => (hostRef = el as HTMLElement | undefined)}
+        class={resolvedClasses().root}
+        data-cols={props.cols ?? 4}
+        data-sm-cols={props.smCols ?? 4}
+        data-md-cols={props.mdCols ?? 8}
+        data-lg-cols={props.lgCols ?? 12}
+        data-xl-cols={props.xlCols ?? 12}
+        data-sm-breakpoint={props.smBreakpoint ?? 640}
+        data-md-breakpoint={props.mdBreakpoint ?? 768}
+        data-lg-breakpoint={props.lgBreakpoint ?? 1024}
+        data-xl-breakpoint={props.xlBreakpoint ?? 1280}
+        data-gutter={JSON.stringify(gutterArray())}
+        data-margin={JSON.stringify(marginArray())}
+        data-grid-color={props.gridColor ?? "#ff0000"}
+        data-grid-opacity={props.gridOpacity ?? 0.1}
+        data-show-background={(props.showBackground ?? true) ? "true" : "false"}
+        data-max-width={props.maxWidth ?? "1440px"}
+        data-inner-max-width={props.innerMaxWidth ?? "768px"}
+        data-inner-color={props.innerGridColor ?? "#10b981"}
+        data-inner-opacity={props.innerGridOpacity ?? 0.1}
+        data-show-inner-background={(props.showInnerBackground ?? true) ? "true" : "false"}
+        data-show-full-width={(props.showFullWidth ?? true) ? "true" : "false"}
+        data-full-width-color={props.fullWidthGridColor ?? "#3b82f6"}
+        data-full-width-opacity={props.fullWidthGridOpacity ?? 0.05}
+        data-show-full-width-background={(props.showFullWidthBackground ?? true) ? "true" : "false"}
+        data-shortcut={props.shortcut ?? "meta_shift_g"}
+        style={{ display: "contents" }}
+        {...rest}
+      >
+        <aside
+          ref={(el) => (overlayRef = el as HTMLElement | undefined)}
+          class={resolvedClasses().overlay}
+          data-slot="overlay"
+          style={{ "z-index": `${props.zIndex ?? 1000}`, "display": "none" }}
+          id="rla-layout-grid-overlay"
+        >
+          <div
+            ref={(el) => (columnsRef = el as HTMLElement | undefined)}
+            style={{ position: "relative", width: "100%", height: "100%" }}
+            data-slot="columns-container"
+          />
+          <div
+            ref={(el) => (indicatorRef = el as HTMLElement | undefined)}
+            data-slot="indicator"
+            style={{
+              "position": "fixed",
+              "bottom": "20px",
+              "right": "20px",
+              "background": "rgba(0,0,0,0.85)",
+              "color": "#fff",
+              "padding": "6px 12px",
+              "border-radius": "6px",
+              "font-family": "var(--font-mono, monospace)",
+              "font-size": "11px",
+              "font-weight": "bold",
+              "pointer-events": "none",
+              "border": "1px solid rgba(255,255,255,0.15)",
+              "box-shadow": "0 4px 12px rgba(0,0,0,0.5)",
+              "letter-spacing": "0.05em",
+              "display": "flex",
+              "align-items": "center",
+              "gap": "8px"
+            }}
+          />
+        </aside>
+      </Dynamic>
+    </Show>
+  )
+}
+
+export default RLSLayoutGrid

package/src/components/layout-grid/layout-grid.ts

@@ -133,6 +133,30 @@ export interface LayoutGridProps {
    * @default true
    */
   devOnly?: boolean
+  /**
+   * Maximum width of the inner content container (CSS max-width string).
+   *
+   * @default "768px"
+   */
+  innerMaxWidth?: string
+  /**
+   * Color value for inner grid.
+   *
+   * @default "#10b981"
+   */
+  innerGridColor?: string
+  /**
+   * Opacity for inner grid background.
+   *
+   * @default 0.1
+   */
+  innerGridOpacity?: number
+  /**
+   * Whether to display background for inner grid.
+   *
+   * @default true
+   */
+  showInnerBackground?: boolean
   /**
    * UI class overrides for components elements slots.
    */
@@ -141,5 +165,5 @@ export interface LayoutGridProps {
    * CSS class to apply to the root wrapper.
    */
   class?: any
-  [key: string]: unknown
+  [key: string]: any
 }

package/src/components/link/RLSLink.tsx

@@ -4,7 +4,7 @@ import { linkTheme } from "./link.theme"
 import RLSIcon from "../icon/RLSIcon"
 import { resolveLinkAttrs } from "./helpers"
 
-type RLSLinkProps = LinkProps & {
+export interface RLSLinkProps extends LinkProps {
   children?: JSX.Element
   leading?: JSX.Element
   trailing?: JSX.Element
@@ -55,6 +55,7 @@ const RLSLink: Component<RLSLinkProps> = (allProps) => {
     <a
       class={classes()["root"]}
       data-slot="root"
+      data-theme={props.theme}
       href={attrs().href}
       target={attrs().target}
       rel={attrs().rel}

package/src/components/link/link.ts

@@ -22,71 +22,80 @@ export interface LinkProps {
    *
    * @default false
    */
-  external?: boolean
+  external?: boolean | undefined
   /**
    * Custom external link icon name.
    *
    * @default "externalLink"
    */
-  externalIcon?: string
+  externalIcon?: string | undefined
   /**
    * Suppress the automatic external link icon.
    *
    * @default false
    */
-  noExternalIcon?: boolean
+  noExternalIcon?: boolean | undefined
   /**
    * Where to open the linked URL. External links default to `"_blank"`.
    *
    * @default undefined
    */
-  target?: string
+  target?: string | undefined
   /**
    * Relationship of the linked URL. External links default to `"noopener noreferrer"`. Set to empty
    * string to suppress the attribute entirely.
    *
    * @default undefined
    */
-  rel?: string | null
+  rel?: string | null | undefined
   /**
    * Enables Astro's built-in prefetch strategy.
    *
    * @default undefined;
    */
-  prefetch?: boolean | "hover" | "tap" | "load" | "viewport"
+  prefetch?: boolean | "hover" | "tap" | "load" | "viewport" | undefined
   /**
    * Applies active styling to the link.
    *
    * @default undefined
    */
-  active?: boolean
+  active?: boolean | undefined
   /**
    * Disables the link, preventing navigation and applying disabled styling.
    *
    * @default false
    */
-  disabled?: boolean
+  disabled?: boolean | undefined
   /**
    * When true, only `class` is applied — all default theme styles are skipped.
    *
    * @default false
    */
-  raw?: boolean
+  raw?: boolean | undefined
   /**
    * Screen reader accessibility label. When omitted on external links, "(opens in a new tab)" is
    * appended automatically.
    */
-  ariaLabel?: string
+  ariaLabel?: string | undefined
   /**
    * The value of `aria-current` when the link is the active/current page.
    *
    * @default "page"
    */
-  ariaCurrentValue?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean
+  ariaCurrentValue?:
+    | "page"
+    | "step"
+    | "location"
+    | "date"
+    | "time"
+    | "true"
+    | "false"
+    | boolean
+    | undefined
   /**
    * Force a color-scheme context on the component.
    */
-  theme?: Theme
+  theme?: Theme | undefined
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/link-group/RLSLinkGroup.tsx

@@ -0,0 +1,76 @@
+import { createMemo, splitProps, For, Show, type Component, type JSX } from "solid-js"
+import type { LinkGroupProps } from "./link-group"
+import { linkGroupTheme } from "./link-group.theme"
+import RLSLink from "../link/RLSLink"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSLinkGroupProps extends LinkGroupProps {
+  children?: JSX.Element
+}
+
+const RLSLinkGroup: Component<RLSLinkGroupProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "label",
+    "leadingIcon",
+    "trailingIcon",
+    "href",
+    "links",
+    "theme",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    linkGroupTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const normalizedLinks = createMemo(() => {
+    if (!props.links) return []
+    return Array.isArray(props.links) ? props.links : [props.links]
+  })
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" data-theme={props.theme} {...rest}>
+      {props.label ? (
+        <h4 class={resolvedClasses().title} data-slot="title">
+          {props.href ? (
+            <a href={props.href} class="hover:underline flex items-center gap-1.5">
+              {props.leadingIcon && <RLSIcon name={props.leadingIcon} size="sm" />}
+              <span>{props.label}</span>
+              {props.trailingIcon && <RLSIcon name={props.trailingIcon} size="sm" />}
+            </a>
+          ) : (
+            <span class="flex items-center gap-1.5">
+              {props.leadingIcon && <RLSIcon name={props.leadingIcon} size="sm" />}
+              <span>{props.label}</span>
+              {props.trailingIcon && <RLSIcon name={props.trailingIcon} size="sm" />}
+            </span>
+          )}
+        </h4>
+      ) : null}
+
+      <ul class={resolvedClasses().list} data-slot="list">
+        <Show when={!props.children} fallback={props.children}>
+          <For each={normalizedLinks()}>
+            {(link) => (
+              <li class={resolvedClasses().item} data-slot="item">
+                <RLSLink
+                  theme={link.theme ?? props.theme}
+                  class={`${resolvedClasses().link} w-full !justify-start`}
+                  data-slot="link"
+                  {...link}
+                />
+              </li>
+            )}
+          </For>
+        </Show>
+      </ul>
+    </div>
+  )
+}
+
+export default RLSLinkGroup

package/src/components/listbox/RLSListbox.tsx

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

package/src/components/locale-selector/RLALocaleSelector.astro

@@ -8,6 +8,7 @@ const {
   currentLocale = "en",
   size = "md",
   theme,
+  class: classAttr,
   ...rest
 } = Astro.props as LocaleSelectorProps;
 
@@ -69,7 +70,7 @@ const currentLocaleUrl = items.find(item => item.code === currentLocale)?.value
 ---
 
 <rla-locale-selector data-theme={theme} {...rest}>
-    <div class:list={[classes.root]} data-locale-selector>
+    <div class:list={[classes.root, classAttr]} data-locale-selector>
         {Astro.slots.has("label") && (
                 <label class:list={[classes.label]}>
                     <slot name="label" />