@rimelight/ui 0.0.37 → 0.0.39

package/src/components/splitter/RLASplitter.astro

@@ -0,0 +1,238 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { SplitterProps } from "./splitter"
+import splitterTheme from "./splitter.theme"
+
+import RLAIcon from "../icon/RLAIcon.astro"
+
+const splitter = scv(splitterTheme)
+
+const {
+  direction = "horizontal",
+  defaultSizes = [50, 50],
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SplitterProps
+
+const classes = resolveClasses(splitter, {
+  direction
+}, useUi("splitter", uiProp), className)
+
+// Normalise sizes so they sum to 100
+const total = defaultSizes.reduce((s, v) => s + v, 0)
+const sizes = defaultSizes.map(s => (s / (total || 100)) * 100)
+
+const panelCount = sizes.length
+const id = `splitter-${Math.random().toString(36).substring(2, 9)}`
+
+const panelContents: string[] = []
+await Promise.all(
+  sizes.map(async (_, i) => {
+    if (Astro.slots.has(`panel-${i}`)) {
+      panelContents[i] = await Astro.slots.render(`panel-${i}`)
+    }
+  })
+)
+---
+
+<rla-splitter {...rest}>
+  <div
+    class:list={[classes.root, id]}
+    data-slot="root"
+    data-resizable
+    data-direction={direction}
+  >
+    {sizes.map((_size, i) => (
+      <>
+        <div
+          class={classes.panel}
+          data-slot="panel"
+          data-resizable-panel={i}
+        >
+          {Astro.slots.has(`panel-${i}`) ? (
+            <Fragment set:html={panelContents[i]} />
+          ) : (
+            i === 0
+              ? <slot />
+              : <slot name="panel" />
+          )}
+        </div>
+
+        {/* Render a handle between panels, not after the last one */}
+        {i < panelCount - 1 && (
+          <div
+            class={classes.handle}
+            data-slot="handle"
+            data-resizable-handle={i}
+            role="separator"
+            aria-orientation={direction === "horizontal" ? "vertical" : "horizontal"}
+            tabindex={0}
+            aria-label="Resize panels"
+          >
+            <RLAIcon
+              name={direction === "horizontal" ? "gripVertical" : "gripHorizontal"}
+              class="size-3.5 text-muted-foreground/50"
+              aria-hidden="true"
+            />
+          </div>
+        )}
+      </>
+    ))}
+  </div>
+</rla-splitter>
+
+<script>
+  class RLASplitter extends HTMLElement {
+    private splitterCleanup: (() => void) | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const container = this.querySelector("[data-resizable]") as HTMLElement | null;
+      if (!container) return;
+
+      const direction = container.dataset.direction ?? "horizontal";
+      const isHorizontal = direction === "horizontal";
+
+      const panels = Array.from(
+        container.querySelectorAll("[data-resizable-panel]")
+      ) as HTMLElement[];
+
+      const handles = Array.from(
+        container.querySelectorAll("[data-resizable-handle]")
+      ) as HTMLElement[];
+
+      const cleanupFns: (() => void)[] = [];
+
+      handles.forEach((handle, idx) => {
+        const panelA = panels[idx];
+        const panelB = panels[idx + 1];
+        if (!panelA || !panelB) return;
+
+        const containerSize = () =>
+          isHorizontal
+            ? container.clientWidth
+            : container.clientHeight;
+
+        let isDragging = false;
+        let startPos = 0;
+        let startASize = 0;
+        let startBSize = 0;
+
+        const getSize = (el: HTMLElement) =>
+          isHorizontal ? el.offsetWidth : el.offsetHeight;
+
+        const setSize = (el: HTMLElement, px: number) => {
+          const pct = (px / containerSize()) * 100;
+          if (isHorizontal) {
+            el.style.width = `${pct}%`;
+          } else {
+            el.style.height = `${pct}%`;
+          }
+        };
+
+        const onMouseMove = (e: MouseEvent) => {
+          if (!isDragging) return;
+          const delta = isHorizontal
+            ? e.clientX - startPos
+            : e.clientY - startPos;
+
+          const newASize = Math.max(48, startASize + delta);
+          const newBSize = Math.max(48, startBSize - delta);
+
+          // Only resize if both panels have enough space
+          if (startASize + startBSize - newASize < 48) return;
+
+          setSize(panelA, newASize);
+          setSize(panelB, newBSize);
+        };
+
+        const onMouseUp = () => {
+          isDragging = false;
+          document.body.style.cursor = "";
+          document.body.style.userSelect = "";
+          handle.classList.remove("bg-primary/30");
+          panels.forEach(p => p.style.transition = "");
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+          e.preventDefault();
+          isDragging = true;
+          startPos = isHorizontal ? e.clientX : e.clientY;
+          startASize = getSize(panelA);
+          startBSize = getSize(panelB);
+          document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
+          document.body.style.userSelect = "none";
+          handle.classList.add("bg-primary/30");
+          panels.forEach(p => p.style.transition = "none");
+          document.addEventListener("mousemove", onMouseMove);
+          document.addEventListener("mouseup", onMouseUp);
+        };
+
+        handle.addEventListener("mousedown", onMouseDown);
+        cleanupFns.push(() => {
+          handle.removeEventListener("mousedown", onMouseDown);
+          document.removeEventListener("mousemove", onMouseMove);
+          document.removeEventListener("mouseup", onMouseUp);
+        });
+
+        // Keyboard resize: arrow keys shift by 2%
+        const onKeyDown = (e: KeyboardEvent) => {
+          const step = containerSize() * 0.02;
+          const forward = isHorizontal
+            ? e.key === "ArrowRight"
+            : e.key === "ArrowDown";
+          const backward = isHorizontal
+            ? e.key === "ArrowLeft"
+            : e.key === "ArrowUp";
+
+          if (!forward && !backward) return;
+          e.preventDefault();
+
+          const aSize = getSize(panelA);
+          const bSize = getSize(panelB);
+          const delta = forward ? step : -step;
+
+          setSize(panelA, Math.max(48, aSize + delta));
+          setSize(panelB, Math.max(48, bSize - delta));
+        };
+
+        handle.addEventListener("keydown", onKeyDown);
+        cleanupFns.push(() => {
+          handle.removeEventListener("keydown", onKeyDown);
+        });
+      });
+
+      this.splitterCleanup = () => {
+        cleanupFns.forEach(fn => fn());
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.splitterCleanup) {
+        this.splitterCleanup();
+        this.splitterCleanup = null;
+      }
+    }
+  }
+
+  if (!customElements.get('rla-splitter')) {
+    customElements.define('rla-splitter', RLASplitter);
+  }
+</script>
+
+<style is:inline set:html={`
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="0"] { width: ${sizes[0] ?? 50}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="1"] { width: ${sizes[1] ?? 50}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="2"] { width: ${sizes[2] ?? 0}%; }
+  .${id}[data-direction="horizontal"] > [data-resizable-panel="3"] { width: ${sizes[3] ?? 0}%; }
+
+  .${id}[data-direction="vertical"] > [data-resizable-panel="0"] { height: ${sizes[0] ?? 50}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="1"] { height: ${sizes[1] ?? 50}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="2"] { height: ${sizes[2] ?? 0}%; }
+  .${id}[data-direction="vertical"] > [data-resizable-panel="3"] { height: ${sizes[3] ?? 0}%; }
+`} />

package/src/components/splitter/splitter.theme.ts

@@ -0,0 +1,23 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createSplitterTheme = () =>
+  defineTheme({
+    slots: ["root", "panel", "handle"],
+    base: {
+      root: "flex w-full h-full",
+      panel: "overflow-auto transition-all",
+      handle:
+        "flex items-center justify-center bg-border hover:bg-primary/50 transition-colors cursor-col-resize select-none"
+    },
+    variants: {
+      direction: {
+        horizontal: { root: "flex-row", handle: "w-1.5 h-full cursor-col-resize" },
+        vertical: { root: "flex-col", handle: "h-1.5 w-full cursor-row-resize" }
+      }
+    },
+    defaultVariants: {
+      direction: "horizontal"
+    }
+  })
+
+export default createSplitterTheme()

package/src/components/spoiler/RLASpoiler.astro

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

package/src/components/spoiler/spoiler.theme.ts

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

package/src/components/stepper/RLAStepper.astro

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

package/src/components/stepper/stepper.theme.ts

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

package/src/components/steps/RLASteps.astro

@@ -0,0 +1,116 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { StepsProps } from "./steps"
+import stepsTheme from "./steps.theme"
+
+
+const steps = scv(stepsTheme)
+
+const {
+  size = "md",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as StepsProps
+
+const classes = resolveClasses(steps, { size }, useUi("steps", uiProp), className)
+---
+
+<div class:list={[classes.root, "rl-steps"]} data-slot="root" data-size={size} {...rest}>
+  <ol class="rl-steps-list">
+    <slot />
+  </ol>
+</div>
+
+<style is:inline>
+  .rl-steps-list {
+    list-style: none;
+    counter-reset: rl-step 0;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rl-steps-list > li {
+    counter-increment: rl-step;
+    position: relative;
+    padding-left: 2.625rem;
+    padding-bottom: 1.75rem;
+    margin: 0;
+  }
+
+  .rl-steps-list > li:last-child {
+    padding-bottom: 0;
+  }
+
+  .rl-steps-list > li::before {
+    content: counter(rl-step);
+    position: absolute;
+    left: 0;
+    top: 0.125rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--color-primary-foreground, #fff);
+    background-color: var(--color-primary, #3b82f6);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    z-index: 1;
+  }
+
+  .rl-steps-list > li::after {
+    content: '';
+    position: absolute;
+    left: calc(0.875rem - 1px);
+    top: calc(1.75rem + 0.375rem);
+    bottom: 0;
+    width: 2px;
+    background-color: var(--color-border, #e5e7eb);
+  }
+
+  .rl-steps-list > li:last-child::after {
+    display: none;
+  }
+
+  .rl-steps-list > li > :first-child {
+    margin-top: 0;
+  }
+
+  /* size: sm */
+  [data-size="sm"] .rl-steps-list > li {
+    padding-left: 2rem;
+    padding-bottom: 1.25rem;
+  }
+  [data-size="sm"] .rl-steps-list > li::before {
+    width: 1.375rem;
+    height: 1.375rem;
+    font-size: 0.625rem;
+  }
+  [data-size="sm"] .rl-steps-list > li::after {
+    left: calc(0.6875rem - 1px);
+    top: calc(1.375rem + 0.375rem);
+  }
+
+  /* size: lg */
+  [data-size="lg"] .rl-steps-list > li {
+    padding-left: 3.25rem;
+    padding-bottom: 2.25rem;
+  }
+  [data-size="lg"] .rl-steps-list > li::before {
+    width: 2.25rem;
+    height: 2.25rem;
+    font-size: 0.875rem;
+  }
+  [data-size="lg"] .rl-steps-list > li::after {
+    left: calc(1.125rem - 1px);
+    top: calc(2.25rem + 0.375rem);
+  }
+</style>

package/src/components/steps/steps.theme.ts

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

package/src/components/sticky-surface/RLAStickySurface.astro

@@ -0,0 +1,38 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { StickySurfaceProps } from "./sticky-surface"
+import { resolveTheme } from "../../utils/resolveTheme"
+import stickySurfaceThemeDefault, { createStickySurfaceTheme } from "./sticky-surface.theme"
+const stickySurfaceTheme = resolveTheme(stickySurfaceThemeDefault, createStickySurfaceTheme)
+
+
+const stickySurface = scv(stickySurfaceTheme)
+
+const {
+  offsetTop = 0,
+  zIndex = 10,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as StickySurfaceProps
+
+const classes = resolveClasses(stickySurface, {}, useUi("stickySurface", uiProp), className)
+const topOffset = `${offsetTop}px`
+const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
+---
+<div
+  class:list={[classes.root, id]}
+  data-slot="root"
+  {...rest}
+>
+  <slot />
+</div>
+
+<style is:inline set:html={`
+  .${id} {
+    top: ${topOffset} !important;
+    z-index: ${zIndex} !important;
+  }
+`} />

package/src/components/sticky-surface/sticky-surface.theme.ts

@@ -0,0 +1,12 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createStickySurfaceTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "sticky top-0 self-start transition-all duration-300"
+    }
+  })
+
+export default createStickySurfaceTheme()

package/src/components/surround/RLASurround.astro

@@ -0,0 +1,40 @@
+---
+export interface SurroundItem {
+  label: string;
+  href: string;
+}
+
+export interface Props {
+  prev?: SurroundItem | null;
+  next?: SurroundItem | null;
+}
+
+const { prev, next } = Astro.props;
+import RLAIcon from "../icon/RLAIcon.astro"
+---
+
+{(prev || next) && (
+  <div class="mt-12 pt-6 border-t border-border flex justify-between gap-4">
+    {prev ? (
+      <a href={prev.href} class="flex flex-col gap-1 text-left group no-underline max-w-[45%]">
+        <span class="text-xs text-muted-foreground font-medium flex items-center gap-1 group-hover:text-primary transition-colors">
+          <RLAIcon name="arrowLeft" class="size-3" /> Previous
+        </span>
+        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
+          {prev.label}
+        </span>
+      </a>
+    ) : <div />}
+
+    {next ? (
+      <a href={next.href} class="flex flex-col gap-1 text-right group no-underline max-w-[45%]">
+        <span class="text-xs text-muted-foreground font-medium flex items-center justify-end gap-1 group-hover:text-primary transition-colors">
+          Next <RLAIcon name="arrowRight" class="size-3" />
+        </span>
+        <span class="text-sm font-semibold text-foreground group-hover:text-primary transition-colors truncate">
+          {next.label}
+        </span>
+      </a>
+    ) : <div />}
+  </div>
+)}

package/src/components/switch/RLASwitch.astro

@@ -0,0 +1,51 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { SwitchProps } from "./switch"
+import { resolveTheme } from "../../utils/resolveTheme"
+import switchThemeDefault, { createSwitchTheme } from "./switch.theme"
+const switchTheme = resolveTheme(switchThemeDefault, createSwitchTheme)
+
+
+const switchFn = scv(switchTheme)
+
+const {
+  checked = false,
+  disabled = false,
+  name,
+  label,
+  color = "primary",
+  size = "md",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as SwitchProps
+
+const classes = resolveClasses(switchFn, {
+  color,
+  size,
+  checked,
+  theme
+}, useUi("switch", uiProp), className);
+---
+<label class={classes.root} data-slot="root">
+  <input
+    type="checkbox"
+    class={classes.input}
+    checked={checked}
+    disabled={disabled}
+    name={name}
+    {...rest}
+  />
+  <div class={classes.track} data-slot="track">
+    <div class={classes.thumb} data-slot="thumb" />
+  </div>
+  {label !== undefined && label !== null && (
+    <span class={classes.label} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+</label>

package/src/components/switch/switch.theme.ts

@@ -0,0 +1,66 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createSwitchTheme = (colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "input", "track", "thumb", "label"],
+    base: {
+      root: "inline-flex items-center gap-2 cursor-pointer select-none",
+      input: "absolute opacity-0 size-0 pointer-events-none peer",
+      track: [
+        "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      ],
+      thumb:
+        "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
+      label: "text-sm text-foreground leading-none"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      size: {
+        sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
+        md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
+        lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
+      },
+      checked: {
+        true: { thumb: "translate-x-full" },
+        false: { thumb: "translate-x-0" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      {
+        size: "sm",
+        checked: true,
+        classNames: { thumb: "translate-x-3" }
+      },
+      {
+        size: "md",
+        checked: true,
+        classNames: { thumb: "translate-x-4" }
+      },
+      {
+        size: "lg",
+        checked: true,
+        classNames: { thumb: "translate-x-5" }
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      size: "md",
+      checked: false
+    }
+  })
+
+export default createSwitchTheme()