@rimelight/ui 0.0.46 → 0.0.48

package/src/components/stepper/RLSStepper.tsx

@@ -0,0 +1,205 @@
+import { createMemo, createSignal, For, splitProps, type Component, type JSX } from "solid-js"
+import type { StepperProps, StepperItem } from "./stepper"
+import { stepperTheme } from "./stepper.theme"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSStepperProps extends StepperProps {
+  children?: JSX.Element
+  indicator?: (ctx: {
+    item: StepperItem
+    index: number
+    state: "completed" | "active" | "inactive"
+  }) => JSX.Element
+  wrapper?: (ctx: { item: StepperItem; index: number }) => JSX.Element
+  onChange?: (ctx: { index: number; value: string | number }) => void
+  onNext?: (ctx: { index: number; value: string | number }) => void
+  onPrev?: (ctx: { index: number; value: string | number }) => void
+}
+
+const RLSStepper: Component<RLSStepperProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "items",
+    "value",
+    "defaultValue",
+    "modelValue",
+    "valueKey",
+    "linear",
+    "disabled",
+    "orientation",
+    "size",
+    "color",
+    "ui",
+    "class",
+    "children",
+    "indicator",
+    "wrapper",
+    "onChange",
+    "onNext",
+    "onPrev"
+  ])
+
+  const items = (): StepperItem[] => props.items ?? []
+  const valueKey = (): string => props.valueKey ?? "value"
+  const linear = (): boolean => props.linear !== false
+  const isDisabled = (): boolean => props.disabled === true
+
+  const initialActiveValue =
+    props.value ??
+    props.modelValue ??
+    props.defaultValue ??
+    (items().length > 0 ? (items()[0]?.[valueKey()] ?? items()[0]?.value ?? 0) : 0)
+
+  const activeIndex = items().findIndex((item, idx) => {
+    const val = item[valueKey()] ?? item.value ?? idx
+    return String(val) === String(initialActiveValue)
+  })
+
+  const [currentIndex, setCurrentIndex] = createSignal(activeIndex >= 0 ? activeIndex : 0)
+
+  const itemValue = (item: StepperItem, index: number): string | number =>
+    item[valueKey()] ?? item.value ?? index
+
+  const goTo = (index: number) => {
+    if (isDisabled()) return
+    if (index < 0 || index >= items().length) return
+    if (linear() && index > currentIndex() + 1) return
+
+    const oldIndex = currentIndex()
+    setCurrentIndex(index)
+    const value = itemValue(items()[index]!, index)
+
+    if (index > oldIndex) {
+      props.onNext?.({ index, value })
+    } else if (index < oldIndex) {
+      props.onPrev?.({ index, value })
+    }
+    props.onChange?.({ index, value })
+  }
+
+  const resolvedClasses = createMemo(() =>
+    stepperTheme({
+      size: props.size ?? "sm",
+      color: props.color ?? "primary",
+      orientation: props.orientation ?? "horizontal",
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={resolvedClasses().root} data-slot="root" {...rest}>
+      <div class={resolvedClasses().header} data-slot="header">
+        <For each={items()}>
+          {(item, index) => {
+            const isCompleted = index() < currentIndex()
+            const isActive = index() === currentIndex()
+            const isItemDisabled =
+              isDisabled() || item.disabled || (linear() && index() > currentIndex())
+            const state: "completed" | "active" | "inactive" = isCompleted
+              ? "completed"
+              : isActive
+                ? "active"
+                : "inactive"
+
+            return (
+              <>
+                <div
+                  class={`${resolvedClasses().item}  ${item.class || ""}`}
+                  data-slot="item"
+                  data-index={index()}
+                  data-value={itemValue(item, index())}
+                  data-state={state}
+                  data-disabled={isItemDisabled ? "true" : undefined}
+                >
+                  <div class={resolvedClasses().container} data-slot="container">
+                    <button
+                      type="button"
+                      class={`${resolvedClasses().trigger}  ${
+                        isActive || isCompleted
+                          ? "!bg-primary-600 !border-primary-600 !text-white"
+                          : ""
+                      }`}
+                      data-slot="trigger"
+                      disabled={isItemDisabled}
+                      data-step-trigger={index()}
+                      onClick={() => goTo(index())}
+                    >
+                      <span class={resolvedClasses().indicator} data-slot="indicator">
+                        {props.indicator ? (
+                          props.indicator({ item, index: index(), state })
+                        ) : item.icon ? (
+                          <RLSIcon
+                            name={item.icon}
+                            size="sm"
+                            class={`${resolvedClasses().icon}  ${
+                              isActive || isCompleted ? "!text-white" : "text-neutral-400"
+                            }`}
+                            data-slot="icon"
+                          />
+                        ) : (
+                          <span>{index() + 1}</span>
+                        )}
+                      </span>
+                    </button>
+                  </div>
+
+                  {item.title || item.description ? (
+                    <div class={resolvedClasses().wrapper} data-slot="wrapper">
+                      {props.wrapper ? (
+                        props.wrapper({ item, index: index() })
+                      ) : (
+                        <>
+                          {item.title ? (
+                            <div class={resolvedClasses().title} data-slot="title">
+                              {item.title}
+                            </div>
+                          ) : null}
+                          {item.description ? (
+                            <div class={resolvedClasses().description} data-slot="description">
+                              {item.description}
+                            </div>
+                          ) : null}
+                        </>
+                      )}
+                    </div>
+                  ) : null}
+                </div>
+
+                {index() < items().length - 1 ? (
+                  <div
+                    class={`${resolvedClasses().separator}  flex-1 h-0.5 mx-2 self-start mt-4 transition-colors ${
+                      index() < currentIndex() ? "bg-primary-600" : "bg-neutral-200"
+                    }`}
+                    data-slot="separator"
+                    data-separator-index={index()}
+                  />
+                ) : null}
+              </>
+            )
+          }}
+        </For>
+      </div>
+
+      <div class={resolvedClasses().content} data-slot="content">
+        {props.children}
+        <For each={items()}>
+          {(item, index) => {
+            const panelActive = index() === currentIndex()
+            return (
+              <div
+                data-stepper-panel={index()}
+                data-value={itemValue(item, index())}
+                hidden={panelActive ? undefined : "until-found"}
+                class="w-full"
+              >
+                {item.content ? <div>{item.content}</div> : null}
+              </div>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}
+
+export default RLSStepper

package/src/components/steps/RLSSteps.tsx

@@ -0,0 +1,108 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { StepsProps } from "./steps"
+import { stepsTheme } from "./steps.theme"
+
+export interface RLSStepsProps extends StepsProps {
+  children?: JSX.Element
+}
+
+const RLSSteps: Component<RLSStepsProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, ["size", "ui", "class", "children"])
+
+  const size = () => props.size || "md"
+
+  const resolvedClasses = createMemo(() =>
+    stepsTheme({
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  return (
+    <div class={`${resolvedClasses().root} rl-steps`} data-slot="root" data-size={size()} {...rest}>
+      <ol class="rl-steps-list">{props.children}</ol>
+      <style>{`
+        .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(--rl-neutral-50);
+          background-color: var(--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(--rl-neutral-200);
+        }
+        .rl-steps-list > li:last-child::after {
+          display: none;
+        }
+        .rl-steps-list > li > :first-child {
+          margin-top: 0;
+        }
+        [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);
+        }
+        [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>
+    </div>
+  )
+}
+
+export default RLSSteps

package/src/components/sticky-surface/RLSStickySurface.tsx

@@ -0,0 +1,63 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { StickySurfaceProps } from "./sticky-surface"
+import { stickySurfaceTheme } from "./sticky-surface.theme"
+
+export interface RLSStickySurfaceProps extends StickySurfaceProps {
+  children?: JSX.Element
+}
+
+const RLSStickySurface: Component<RLSStickySurfaceProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "stuckShadow",
+    "offsetTop",
+    "zIndex",
+    "ui",
+    "class",
+    "children"
+  ])
+
+  const stuckShadow = () => props.stuckShadow ?? true
+
+  const id = `sticky-${Math.random().toString(36).substring(2, 9)}`
+
+  const resolvedClasses = createMemo(() => stickySurfaceTheme({ ui: props.ui, class: props.class }))
+
+  return (
+    <div
+      class={`${resolvedClasses().root}  ${id}  ${stuckShadow() ? "rla-sticky-shadow" : ""}`}
+      data-slot="root"
+      {...rest}
+    >
+      {props.children}
+      <style>{`
+        .${id} {
+          top: ${props.offsetTop ?? 0}px !important;
+          z-index: ${props.zIndex ?? 10} !important;
+          container-type: scroll-state;
+          container-name: rla-sticky-${id};
+        }
+      `}</style>
+      {stuckShadow() ? (
+        <style>{`
+          @container rla-sticky-${id} scroll-state(stuck: top) {
+            .${id} {
+              box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
+              border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+            }
+          }
+
+          @media (prefers-color-scheme: dark) {
+            @container rla-sticky-${id} scroll-state(stuck: top) {
+              .${id} {
+                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.40), 0 1px 4px 0 rgba(0, 0, 0, 0.20);
+                border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+              }
+            }
+          }
+        `}</style>
+      ) : null}
+    </div>
+  )
+}
+
+export default RLSStickySurface

package/src/components/surround/RLSSurround.tsx

@@ -0,0 +1,57 @@
+import { Show, type Component } from "solid-js"
+import RLSIcon from "../icon/RLSIcon"
+
+export interface RLSSurroundItem {
+  label: string
+  href: string
+}
+
+export interface RLSSurroundProps {
+  prev?: RLSSurroundItem | null
+  next?: RLSSurroundItem | null
+  class?: string
+}
+
+const RLSSurround: Component<RLSSurroundProps> = (props) => {
+  return (
+    <Show when={props.prev || props.next}>
+      <div
+        class={`mt-12 pt-6 border-t border-default flex justify-between gap-4 ${props.class ?? ""}`}
+      >
+        <Show when={props.prev} fallback={<div />}>
+          {(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 font-medium flex items-center gap-1 group-hover:text-primary transition-colors">
+                <RLSIcon name="arrowLeft" class="size-3" /> Previous
+              </span>
+              <span class="text-sm font-semibold text-highlighted group-hover:text-primary transition-colors truncate">
+                {prev().label}
+              </span>
+            </a>
+          )}
+        </Show>
+
+        <Show when={props.next} fallback={<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 font-medium flex items-center justify-end gap-1 group-hover:text-primary transition-colors">
+                Next <RLSIcon name="arrowRight" class="size-3" />
+              </span>
+              <span class="text-sm font-semibold text-highlighted group-hover:text-primary transition-colors truncate">
+                {next().label}
+              </span>
+            </a>
+          )}
+        </Show>
+      </div>
+    </Show>
+  )
+}
+
+export default RLSSurround

package/src/components/switch/RLSSwitch.tsx

@@ -0,0 +1,56 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { SwitchProps } from "./switch"
+import { switchTheme } from "./switch.theme"
+
+export interface RLSSwitchProps extends SwitchProps {
+  children?: JSX.Element
+}
+
+const RLSSwitch: Component<RLSSwitchProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "ui",
+    "class",
+    "children",
+    "checked",
+    "disabled",
+    "name",
+    "label",
+    "value",
+    "trailing",
+    "theme"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    switchTheme({
+      ui: props.ui,
+      class: props.class,
+      ...allProps
+    })
+  )
+
+  return (
+    <label class={resolvedClasses().root} data-slot="root" data-theme={props.theme} {...rest}>
+      <input
+        type="checkbox"
+        class={resolvedClasses().input}
+        checked={!!props.checked}
+        disabled={props.disabled}
+        name={props.name}
+      />
+      <div class={resolvedClasses().track} data-slot="track">
+        <div class={resolvedClasses().thumb} data-slot="thumb" />
+      </div>
+      {props.label !== undefined && props.label !== null ? (
+        <span class={resolvedClasses().label} data-slot="label">
+          {props.label}
+        </span>
+      ) : props.children ? (
+        <span class={resolvedClasses().label} data-slot="label">
+          {props.children}
+        </span>
+      ) : null}
+    </label>
+  )
+}
+
+export default RLSSwitch