@rimelight/ui 0.0.34 → 0.0.35

package/src/components/astro/{RLADocsPackageManagers.astro → RLAPackageManagers.astro}

@@ -1,87 +1,81 @@
----
-import RLATabs from "./RLATabs.astro";
-import Prism from "prismjs";
-import "prismjs/components/prism-bash.js";
-
-type Manager = "npm" | "pnpm" | "yarn" | "deno" | "bun" | "vp"
-type CommandType = "add" | "create" | "dlx" | "exec" | "install" | "remove" | "run"
-
-interface Props {
-  pkg?: string
-  type?: CommandType
-  dev?: boolean
-  args?: string
-  comment?: string
-  prefix?: string
-  managers?: Manager[]
-}
-
-const {
-  pkg,
-  type = "add",
-  dev = false,
-  args,
-  comment,
-  prefix,
-  managers = ["npm", "pnpm", "yarn", "deno", "bun", "vp"]
-} = Astro.props
-
-const commands: Record<Manager, Partial<Record<CommandType, string>> & { dev: string }> = {
-  npm: { add: "npm i", create: "npm create", dlx: "npx", exec: "npx", install: "npm install", run: "npm run", remove: "npm uninstall", dev: "-D" },
-  yarn: { add: "yarn add", create: "yarn create", dlx: "yarn dlx", exec: "yarn", install: "yarn install", run: "yarn run", remove: "yarn remove", dev: "-D" },
-  pnpm: { add: "pnpm add", create: "pnpm create", dlx: "pnpx", exec: "pnpm", install: "pnpm install", run: "pnpm run", remove: "pnpm remove", dev: "-D" },
-  deno: { add: "deno add", create: "deno run -A", dlx: "deno run", exec: "deno run", install: "deno install", run: "deno task", remove: "deno remove", dev: "--dev" },
-  bun: { add: "bun add", create: "bun create", install: "bun install", run: "bun run", remove: "bun remove", dev: "-d" },
-  vp: { add: "vp add", create: "vp create", dlx: "vp dlx", exec: "vp exec", install: "vp install", run: "vp run", remove: "vp remove", dev: "-D" },
-}
-
-function getCommand(mgr: Manager, cmdType: CommandType): string | undefined {
-  let cmd = commands[mgr][cmdType]
-  if (cmd === undefined) return undefined
-
-  if (prefix) cmd = `${prefix} ${cmd}`
-  if (comment) cmd = `# ${comment.replaceAll("{PKG}", mgr)}\n${cmd}`
-  if (dev && cmdType === "add") cmd += ` ${commands[mgr].dev}`
-
-  if (pkg) {
-    // Logic to strip version tags for yarn create
-    const processedPkg = (cmdType === "create" && mgr === "yarn")
-        ? pkg.replace(/@(?![^@]*\/)[^\s]*$/, "")
-        : pkg
-    cmd += ` ${processedPkg}`
-  }
-
-  if (args) {
-    const needsDoubleDash = mgr === "npm" && !["dlx", "exec", "run"].includes(cmdType)
-    cmd += `${needsDoubleDash ? " --" : ""} ${args}`
-  }
-
-  return cmd
-}
-
-const tabs = managers
-    .map((mgr) => ({
-      mgr,
-      cmd: getCommand(mgr, type),
-    }))
-    .filter((tab) => tab.cmd !== undefined)
-
-const tabItems = tabs.map((tab) => ({
-  value: tab.mgr,
-  label: tab.mgr,
-}))
-
-// Pre-render the highlighted bash command via pure static prismjs
-const highlightedTabs = tabs.map((tab) => ({
-  mgr: tab.mgr,
-  html: Prism.highlight(tab.cmd!, Prism.languages.bash || Prism.languages.shell, "bash")
-}))
----
-
-<RLATabs items={tabItems} color="primary" size="md" variant="solid">
-  {highlightedTabs.map((tab, idx) => (
-    <div role="tabpanel" data-value={tab.mgr} class:list={[{ "hidden": idx !== 0 }]}>
-      <pre class="language-sh"><code class="language-sh" set:html={tab.html}></code></pre>
-    </div>
-  ))}
-</RLATabs>
+---
+import RLATabs from "./RLATabs.astro";
+import { Code } from "astro:components";
+
+type Manager = "npm" | "pnpm" | "yarn" | "deno" | "bun" | "vp"
+type CommandType = "add" | "create" | "dlx" | "exec" | "install" | "remove" | "run"
+
+interface Props {
+  pkg?: string
+  type?: CommandType
+  dev?: boolean
+  args?: string
+  comment?: string
+  prefix?: string
+  managers?: Manager[]
+}
+
+const {
+  pkg,
+  type = "add",
+  dev = false,
+  args,
+  comment,
+  prefix,
+  managers = ["npm", "pnpm", "yarn", "deno", "bun", "vp"]
+} = Astro.props
+
+const commands: Record<Manager, Partial<Record<CommandType, string>> & { dev: string }> = {
+  npm: { add: "npm i", create: "npm create", dlx: "npx", exec: "npx", install: "npm install", run: "npm run", remove: "npm uninstall", dev: "-D" },
+  yarn: { add: "yarn add", create: "yarn create", dlx: "yarn dlx", exec: "yarn", install: "yarn install", run: "yarn run", remove: "yarn remove", dev: "-D" },
+  pnpm: { add: "pnpm add", create: "pnpm create", dlx: "pnpx", exec: "pnpm", install: "pnpm install", run: "pnpm run", remove: "pnpm remove", dev: "-D" },
+  deno: { add: "deno add", create: "deno run -A", dlx: "deno run", exec: "deno run", install: "deno install", run: "deno task", remove: "deno remove", dev: "--dev" },
+  bun: { add: "bun add", create: "bun create", install: "bun install", run: "bun run", remove: "bun remove", dev: "-d" },
+  vp: { add: "vp add", create: "vp create", dlx: "vp dlx", exec: "vp exec", install: "vp install", run: "vp run", remove: "vp remove", dev: "-D" },
+}
+
+function getCommand(mgr: Manager, cmdType: CommandType): string | undefined {
+  let cmd = commands[mgr][cmdType]
+  if (cmd === undefined) return undefined
+
+  if (prefix) cmd = `${prefix} ${cmd}`
+  if (comment) cmd = `# ${comment.replaceAll("{PKG}", mgr)}\n${cmd}`
+  if (dev && cmdType === "add") cmd += ` ${commands[mgr].dev}`
+
+  if (pkg) {
+    // Logic to strip version tags for yarn create
+    const processedPkg = (cmdType === "create" && mgr === "yarn")
+        ? pkg.replace(/@(?![^@]*\/)\S*$/, "")
+        : pkg
+    cmd += ` ${processedPkg}`
+  }
+
+  if (args) {
+    const needsDoubleDash = mgr === "npm" && !["dlx", "exec", "run"].includes(cmdType)
+    cmd += `${needsDoubleDash ? " --" : ""} ${args}`
+  }
+
+  return cmd
+}
+
+const tabs = managers
+    .map((mgr) => ({
+      mgr,
+      cmd: getCommand(mgr, type),
+    }))
+    .filter((tab) => tab.cmd !== undefined)
+
+const tabItems = tabs.map((tab) => ({
+  value: tab.mgr,
+  label: tab.mgr,
+}))
+
+---
+
+<RLATabs items={tabItems} color="primary" size="md" variant="solid">
+  {tabs.map((tab, idx) => (
+    <div role="tabpanel" data-value={tab.mgr} class:list={[{ "hidden": idx !== 0 }]}>
+      <Code code={tab.cmd!} lang="bash" />
+    </div>
+  ))}
+</RLATabs>

package/src/components/astro/RLAPageSection.astro

@@ -28,11 +28,13 @@ const {
   ...rest
 } = Astro.props as PageSectionProps;
 
+const resolvedVariant = (variant === "default" || variant === "hero" || variant === "cta") ? variant : "default"
+
 const classes = resolveClasses(pageSection, {
-  variant,
+  variant: resolvedVariant,
   orientation,
   reverse,
-  ...(variant === "cta" && { ctaVariant }),
+  ...(resolvedVariant === "cta" && { ctaVariant }),
   headline: !!(Astro.slots.has("headline") || headline),
   title: !!(Astro.slots.has("title") || title),
   description: !!(Astro.slots.has("description") || description),

package/src/components/astro/RLAPopover.astro

@@ -21,15 +21,16 @@ const {
 const classes = resolveClasses(popover, {
   placement
 }, useUi("popover", uiProp), className)
+const popoverId = `rla-popover-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div class={classes.root} data-slot="popover-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+  <div class={classes.trigger} data-slot="trigger">
     <slot name="trigger">
-      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
+      {triggerLabel && <button type="button" class="cursor-pointer" popovertarget={popoverId}>{triggerLabel}</button>}
     </slot>
   </div>
 
-  <div class={classes.content} data-slot="content">
+  <div id={popoverId} popover class={classes.content} data-slot="content">
     <slot />
   </div>
 </div>

package/src/components/astro/RLAPost.astro

@@ -4,7 +4,9 @@ import { useUi, resolveClasses } from "../../utils"
 import type { PostProps } from "../../types"
 import postThemeDefault, { createPostTheme } from "../../themes/post.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
+import type { ImageMetadata } from "astro"
 import Image from "astro/components/Image.astro"
+import RLABadge from "./RLABadge.astro"
 
 const uiConfig = getUIConfig()
 const postTheme = uiConfig.colors ? createPostTheme() : postThemeDefault
@@ -17,13 +19,16 @@ const {
   date,
   image,
   to,
+  badge,
+  badgeColor = "primary",
   variant = "soft",
+  orientation = "vertical",
   ui: uiProp,
   class: className,
   ...rest
 } = Astro.props as PostProps
 
-const classes = resolveClasses(post, { variant }, useUi("post", uiProp), className);
+const classes = resolveClasses(post, { variant, orientation }, useUi("post", uiProp), className);
 
 const Tag = to ? "a" : "div";
 const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() : date) : null;
@@ -35,7 +40,7 @@ const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() :
         {typeof image === 'string' ? (
            <img src={image} alt={title} class={classes.image} data-slot="image" />
         ) : (
-           <Image src={image} alt={title || ""} class={classes.image} data-slot="image" />
+           <Image src={image as ImageMetadata} alt={title || ""} class={classes.image} data-slot="image" />
         )}
       </div>
     )}
@@ -50,6 +55,10 @@ const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() :
       {description && <p class={classes.description} data-slot="description">{description}</p>}
     </slot>
 
+    <slot name="badge" {...{ ui: classes }}>
+      {badge && <RLABadge color={badgeColor as any} size="sm" shape="pill" class={classes.badge} data-slot="badge">{badge}</RLABadge>}
+    </slot>
+
     <slot name="date" {...{ ui: classes }}>
       {formattedDate && <time class={classes.date} data-slot="date">{formattedDate}</time>}
     </slot>

package/src/components/astro/RLAScrollArea.astro

@@ -4,7 +4,10 @@ import { useUi, resolveClasses } from "../../utils"
 import type { ScrollAreaProps } from "../../types"
 import scrollAreaThemeDefault, { createScrollAreaTheme } from "../../themes/scroll-area.theme"
 
-const scrollAreaTheme = scrollAreaThemeDefault
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const scrollAreaTheme = uiConfig.colors ? createScrollAreaTheme() : scrollAreaThemeDefault
 const scrollArea = scv(scrollAreaTheme)
 
 const {

package/src/components/astro/RLAScrollToTop.astro

@@ -1,172 +1,200 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ScrollToTopProps } from "../../types"
-import scrollToTopThemeDefault, { createScrollToTopTheme } from "../../themes/scroll-to-top.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const scrollToTopTheme = uiConfig.colors ? createScrollToTopTheme(uiConfig.colors) : scrollToTopThemeDefault
-
-const scrollToTop = scv(scrollToTopTheme)
-
-const {
-  color = "primary",
-  progressWidth = 6,
-  duration = 0.1,
-  threshold = 200,
-  showProgress = false,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ScrollToTopProps
-
-const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop", uiProp), className)
-
-const circumference = 2 * Math.PI * 45
-const percentPx = circumference / 100
-
-
----
-
-<div
-  class:list={["rla-scroll-to-top", "fixed bottom-6 right-6 z-50", classes.root]}
-  data-threshold={threshold}
-  data-duration={duration}
-  data-circle-stroke-width={progressWidth}
-  {...rest}
->
-  <button
-    type="button"
-    class={classes.button}
-    aria-label="Scroll to top"
-    data-scroll-to-top-button
-  >
-    <div class={classes.progressBase}>
-      <svg class={classes.svg} viewBox="0 0 100 100" shape-rendering="geometricPrecision">
-        <circle
-          cx="50"
-          cy="50"
-          r="45"
-          stroke={`var(--color-${color}-900)`}
-          fill={`var(--color-${color}-950)`}
-          stroke-width={progressWidth}
-          stroke-dashoffset="0"
-          stroke-linecap="round"
-          class="gauge-secondary-stroke opacity-100"
-        />
-        {showProgress && (
-        <circle
-          cx="50"
-          cy="50"
-          r="45"
-          fill="transparent"
-          stroke={`var(--color-${color}-500)`}
-          stroke-width={progressWidth}
-          stroke-dashoffset="0"
-          stroke-linecap="round"
-          class="gauge-primary-stroke opacity-100"
-          data-progress-circle
-        />
-        )}
-      </svg>
-      <div class={classes.iconContainer}>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class={classes.icon}
-        >
-          <path d="m5 12 7-7 7 7" />
-          <path d="M12 19V5" />
-        </svg>
-      </div>
-    </div>
-  </button>
-</div>
-
-<script>
-  document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
-    const element = el as HTMLElement
-    const button = element.querySelector('[data-scroll-to-top-button]') as HTMLButtonElement | null
-    const progressCircle = element.querySelector('[data-progress-circle]') as SVGCircleElement | null
-
-    if (!button) return
-
-    const threshold = Number(element.dataset.threshold) || 200
-
-    function updateScrollState() {
-      const scrollTop = window.scrollY || document.documentElement.scrollTop
-      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
-      const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
-
-      if (scrollTop > threshold) {
-        element.classList.add('visible')
-      } else {
-        element.classList.remove('visible')
-      }
-
-      if (progressCircle) {
-        const circumference = 2 * Math.PI * 45
-        const percentPx = circumference / 100
-        const duration = element.dataset.duration || '0.1'
-        progressCircle.style.setProperty('--stroke-percent', scrollPercentage.toString())
-        progressCircle.style.setProperty('--percent-to-px', `${percentPx}px`)
-        progressCircle.style.setProperty('--circumference', circumference.toString())
-        progressCircle.style.setProperty('--duration', `${duration}s`)
-      }
-    }
-
-    button.addEventListener('click', () => {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
-    })
-
-    window.addEventListener('scroll', updateScrollState, { passive: true })
-    updateScrollState()
-  })
-</script>
-
-<style>
-  .rla-scroll-to-top {
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s ease-in-out;
-  }
-
-  .rla-scroll-to-top.visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .progress-circle-base {
-    transform: translateZ(0);
-  }
-
-  .gauge-primary-stroke {
-    stroke-dasharray: calc(var(--stroke-percent, 0) * var(--percent-to-px, 2.826px)) var(--circumference, 282.6);
-    transition: stroke-dasharray var(--duration, 0.1s) ease, stroke var(--duration, 0.1s) ease;
-    transform: rotate(-90deg);
-    transform-origin: center;
-    shape-rendering: geometricPrecision;
-  }
-
-  .gauge-secondary-stroke {
-    stroke-dasharray: 282.6;
-    transform: rotate(-90deg);
-    transform-origin: center;
-  }
-
-  [data-progress-circle] {
-    --stroke-percent: 0;
-    --percent-to-px: 2.826px;
-    --circumference: 282.6;
-    --duration: 0.1s;
-  }
-</style>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ScrollToTopProps } from "../../types"
+import scrollToTopThemeDefault, { createScrollToTopTheme } from "../../themes/scroll-to-top.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const scrollToTopTheme = uiConfig.colors ? createScrollToTopTheme(uiConfig.colors) : scrollToTopThemeDefault
+
+const scrollToTop = scv(scrollToTopTheme)
+
+const {
+  color = "primary",
+  progressWidth = 6,
+  duration = 0.1,
+  threshold = 200,
+  showProgress = false,
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ScrollToTopProps
+
+const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop", uiProp), className)
+
+---
+
+<rla-scroll-to-top data-threshold={threshold} data-duration={duration} data-color={color} data-progress-width={progressWidth} {...rest}>
+  <div
+    class:list={["rla-scroll-to-top-inner", "fixed bottom-6 right-6 z-50", classes.root]}
+  >
+    <button
+      type="button"
+      class={classes.button}
+      aria-label="Scroll to top"
+      data-scroll-to-top-button
+    >
+      <div class={classes.progressBase}>
+        <div class="gauge-track"></div>
+        {showProgress && (
+        <div class="gauge-progress" data-gauge-progress></div>
+        )}
+        <div class={classes.iconContainer}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class={classes.icon}
+          >
+            <path d="m5 12 7-7 7 7" />
+            <path d="M12 19V5" />
+          </svg>
+        </div>
+      </div>
+    </button>
+  </div>
+</rla-scroll-to-top>
+
+<script>
+  function onClick() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  class RLAScrollToTop extends HTMLElement {
+    private cleanupScroll: (() => void) | null = null;
+    private styleEl: HTMLStyleElement | null = null;
+
+    connectedCallback() {
+      this.style.display = 'contents';
+      const button = this.querySelector('[data-scroll-to-top-button]');
+      const innerElement = this.querySelector('.rla-scroll-to-top-inner') as HTMLElement | null;
+
+      if (!button || !innerElement) return;
+
+      const id = ++RLAScrollToTop.instanceCounter;
+      const threshold = Number(this.dataset.threshold) || 200;
+      const color = this.dataset.color || 'primary';
+      const progressWidth = Number(this.dataset.progressWidth) || 6;
+      const gaugeBorderWidth = progressWidth * 0.5;
+      const nonce = (document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') ?? '');
+
+      const getStyleEl = () => {
+        if (!this.styleEl) {
+          this.styleEl = document.createElement('style');
+          if (nonce) this.styleEl.setAttribute('nonce', nonce);
+          document.head.appendChild(this.styleEl);
+        }
+        return this.styleEl;
+      };
+
+      const updateStyles = () => {
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
+        const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
+
+        if (scrollTop > threshold) {
+          innerElement.classList.add('visible');
+        } else {
+          innerElement.classList.remove('visible');
+        }
+
+        getStyleEl().textContent = `
+          .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-track {
+            border-width: ${gaugeBorderWidth}px;
+            border-color: var(--color-${color}-900);
+            background-color: #000;
+          }
+          .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-progress {
+            --gauge-progress: ${scrollPercentage};
+            --gauge-stroke-width: ${gaugeBorderWidth}px;
+            --gauge-color: var(--color-${color}-500);
+          }
+        `;
+      };
+
+      innerElement.dataset.rlaInstance = String(id);
+
+      button.addEventListener('click', onClick);
+
+      window.addEventListener('scroll', updateStyles, { passive: true });
+      updateStyles();
+
+      this.cleanupScroll = () => {
+        button.removeEventListener('click', onClick);
+        window.removeEventListener('scroll', updateStyles);
+        if (this.styleEl) {
+          this.styleEl.remove();
+          this.styleEl = null;
+        }
+      };
+    }
+
+    disconnectedCallback() {
+      if (this.cleanupScroll) {
+        this.cleanupScroll();
+        this.cleanupScroll = null;
+      }
+    }
+
+    static instanceCounter = 0;
+  }
+
+  if (!customElements.get('rla-scroll-to-top')) {
+    customElements.define('rla-scroll-to-top', RLAScrollToTop);
+  }
+</script>
+
+<style>
+  .rla-scroll-to-top-inner {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .rla-scroll-to-top-inner.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .progress-circle-base {
+    position: relative;
+    transform: translateZ(0);
+  }
+
+  .gauge-track {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border-style: solid;
+  }
+
+  .gauge-progress {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: conic-gradient(
+      from 0deg,
+      var(--gauge-color, var(--color-primary-500)) 0deg,
+      var(--gauge-color, var(--color-primary-500)) calc(var(--gauge-progress, 0) * 3.6deg),
+      transparent calc(var(--gauge-progress, 0) * 3.6deg)
+    );
+    -webkit-mask: radial-gradient(
+      circle closest-side,
+      transparent calc(100% - var(--gauge-stroke-width, 6px)),
+      #000 calc(100% - var(--gauge-stroke-width, 6px))
+    );
+    mask: radial-gradient(
+      circle closest-side,
+      transparent calc(100% - var(--gauge-stroke-width, 6px)),
+      #000 calc(100% - var(--gauge-stroke-width, 6px))
+    );
+  }
+</style>