@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLADashboardSidebarCollapse.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardSidebarCollapseProps } from "../../types"
-import dashboardSidebarCollapseThemeDefault from "../../themes/dashboard-sidebar-collapse.theme"
-
-const dashboardSidebarCollapse = scv(dashboardSidebarCollapseThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSidebarCollapseProps
-
-const classes = resolveClasses(dashboardSidebarCollapse, {}, useUi("dashboardSidebarCollapse", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardSidebarCollapseProps } from "../../types"
+import dashboardSidebarCollapseThemeDefault, { createDashboardSidebarCollapseTheme } from "../../themes/dashboard-sidebar-collapse.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardSidebarCollapseTheme = uiConfig.colors ? createDashboardSidebarCollapseTheme() : dashboardSidebarCollapseThemeDefault
+
+const dashboardSidebarCollapse = scv(dashboardSidebarCollapseTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardSidebarCollapseProps
+
+const classes = resolveClasses(dashboardSidebarCollapse, {}, useUi("dashboardSidebarCollapse", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLADashboardSidebarToggle.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardSidebarToggleProps } from "../../types"
-import dashboardSidebarToggleThemeDefault from "../../themes/dashboard-sidebar-toggle.theme"
-
-const dashboardSidebarToggle = scv(dashboardSidebarToggleThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSidebarToggleProps
-
-const classes = resolveClasses(dashboardSidebarToggle, {}, useUi("dashboardSidebarToggle", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardSidebarToggleProps } from "../../types"
+import dashboardSidebarToggleThemeDefault, { createDashboardSidebarToggleTheme } from "../../themes/dashboard-sidebar-toggle.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardSidebarToggleTheme = uiConfig.colors ? createDashboardSidebarToggleTheme() : dashboardSidebarToggleThemeDefault
+
+const dashboardSidebarToggle = scv(dashboardSidebarToggleTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardSidebarToggleProps
+
+const classes = resolveClasses(dashboardSidebarToggle, {}, useUi("dashboardSidebarToggle", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLADashboardToolbar.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardToolbarProps } from "../../types"
-import dashboardToolbarThemeDefault from "../../themes/dashboard-toolbar.theme"
-
-const dashboardToolbar = scv(dashboardToolbarThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardToolbarProps
-
-const classes = resolveClasses(dashboardToolbar, {}, useUi("dashboardToolbar", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DashboardToolbarProps } from "../../types"
+import dashboardToolbarThemeDefault, { createDashboardToolbarTheme } from "../../themes/dashboard-toolbar.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dashboardToolbarTheme = uiConfig.colors ? createDashboardToolbarTheme() : dashboardToolbarThemeDefault
+
+const dashboardToolbar = scv(dashboardToolbarTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DashboardToolbarProps
+
+const classes = resolveClasses(dashboardToolbar, {}, useUi("dashboardToolbar", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLADock.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DockProps } from "../../types"
-import dockThemeDefault from "../../themes/dock.theme"
-
-const dock = scv(dockThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DockProps
-
-const classes = resolveClasses(dock, {}, useUi("dock", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DockProps } from "../../types"
+import dockThemeDefault, { createDockTheme } from "../../themes/dock.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const dockTheme = uiConfig.colors ? createDockTheme() : dockThemeDefault
+
+const dock = scv(dockTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DockProps
+
+const classes = resolveClasses(dock, {}, useUi("dock", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/{plugins/starlightAddons/components/Gamepad.astro → components/astro/RLADocsGamepad.astro}

@@ -1,180 +1,178 @@
----
-
-interface HighlightGroup {
-  label: string
-  buttons: string[]
-  color: string
-}
-
-interface Props {
-  highlightedButtons?: string[]
-  groups?: HighlightGroup[]
-  highlightColor?: string
-  backgroundColor?: string
-}
-
-const {
-  highlightedButtons = [],
-  groups = [],
-  highlightColor = 'var(--ui-color-primary-500, #00c16a)',
-  backgroundColor = 'transparent'
-} = Astro.props
-
-function getButtonHighlight(buttonId: string) {
-  if (highlightedButtons.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 }
-}
-
-interface Button {
-  id: string
-  label?: string
-  x: number
-  y: number
-  r?: number
-  w?: number
-  h?: number
-  type?: string
-}
-
-const shoulderButtons: Button[] = [
-  { 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: Button[] = [
-  // Face Buttons (Smaller, tighter)
-  { 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 },
-
-  // D-Pad (Refined)
-  { 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' },
-
-  // Sticks (Smaller, proportional)
-  { id: 'LS', x: 155, y: 215, r: 24 },
-  { id: 'RS', x: 245, y: 215, r: 24 },
-
-  // Menu Buttons
-  { id: 'View', label: '⧉', x: 145, y: 105, w: 16, h: 10 },
-  { id: 'Menu', label: '≡', x: 239, y: 105, w: 16, h: 10 },
-]
----
-
-<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>
-
-      {backgroundColor && backgroundColor !== 'transparent' && (
-          <rect x="-20" y="-20" width="440" height="360" fill={backgroundColor} rx="24" />
-      )}
-
-      <!-- Shoulder Buttons -->
-      {shoulderButtons.map(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"}
-              />
-              <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>
-            </g>
-        )
-      })}
-
-      <!-- Controller Body -->
-      <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"
-      />
-
-      <!-- Touchpad -->
-      <path d="M145,90 L255,90 L262,150 L138,150 Z" fill="#151525" stroke="#33334d" stroke-width="0.5" />
-
-      {mainButtons.map(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>}
-              </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>}
-            </g>
-        )
-      })}
-
-    </svg>
-  </div>
-
-  {groups.some(g => g.label) && (
-      <div class="flex flex-wrap justify-center gap-x-6 gap-y-3 mt-10 w-full">
-        {groups.filter(g => g.label).map(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>
-        ))}
-      </div>
-  )}
-</div>
-
+---
+interface HighlightGroup {
+  label: string
+  buttons: string[]
+  color: string
+}
+
+interface Props {
+  highlightedButtons?: string[]
+  groups?: HighlightGroup[]
+  highlightColor?: string
+  backgroundColor?: string
+}
+
+const {
+  highlightedButtons = [],
+  groups = [],
+  highlightColor = 'var(--color-primary-500, #00c16a)',
+  backgroundColor = 'transparent'
+} = Astro.props
+
+function getButtonHighlight(buttonId: string) {
+  if (highlightedButtons.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 }
+}
+
+interface Button {
+  id: string
+  label?: string
+  x: number
+  y: number
+  r?: number
+  w?: number
+  h?: number
+  type?: string
+}
+
+const shoulderButtons: Button[] = [
+  { 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: Button[] = [
+  // Face Buttons
+  { 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 },
+
+  // D-Pad
+  { 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' },
+
+  // Sticks
+  { id: 'LS', x: 155, y: 215, r: 24 },
+  { id: 'RS', x: 245, y: 215, r: 24 },
+
+  // Menu Buttons
+  { id: 'View', label: '⧉', x: 145, y: 105, w: 16, h: 10 },
+  { id: 'Menu', label: '≡', x: 239, y: 105, w: 16, h: 10 },
+]
+---
+
+<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>
+
+      {backgroundColor && backgroundColor !== 'transparent' && (
+          <rect x="-20" y="-20" width="440" height="360" fill={backgroundColor} rx="24" />
+      )}
+
+      <!-- Shoulder Buttons -->
+      {shoulderButtons.map(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"}
+              />
+              <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>
+            </g>
+        )
+      })}
+
+      <!-- Controller Body -->
+      <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"
+      />
+
+      <!-- Touchpad -->
+      <path d="M145,90 L255,90 L262,150 L138,150 Z" fill="#151525" stroke="#33334d" stroke-width="0.5" />
+
+      {mainButtons.map(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>}
+              </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>}
+            </g>
+        )
+      })}
+
+    </svg>
+  </div>
+
+  {groups.some(g => g.label) && (
+      <div class="flex flex-wrap justify-center gap-x-6 gap-y-3 mt-10 w-full">
+        {groups.filter(g => g.label).map(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>
+        ))}
+      </div>
+  )}
+</div>

package/src/{plugins/starlightAddons/components/Keyboard.astro → components/astro/RLADocsKeyboard.astro}

@@ -25,7 +25,7 @@ const {
   keySize = 40,
   variant = 'full',
   os = 'windows',
-  highlightColor = 'var(--ui-color-primary-500, #00c16a)',
+  highlightColor = 'var(--color-primary-500, #00c16a)',
   backgroundColor = 'transparent'
 } = Astro.props
 
@@ -159,7 +159,6 @@ const displayMainRows = variant === '60'
     ]
     : mainRows;
 
-
 interface RenderKey extends Key {
   x: number;
   y: number;
@@ -318,4 +317,3 @@ if (variant === 'full') {
       </div>
   )}
 </div>
-

package/src/{plugins/starlightAddons/PackageManagers.astro → components/astro/RLADocsPackageManagers.astro}

@@ -1,14 +1,19 @@
 ---
-import { Tabs, TabItem } from "@astrojs/starlight/components"
-import { Prism } from "@astrojs/prism"
+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?: "add" | "create" | "dlx" | "exec" | "install" | "remove" | "run"
+  type?: CommandType
   dev?: boolean
   args?: string
   comment?: string
   prefix?: string
+  managers?: Manager[]
 }
 
 const {
@@ -18,20 +23,18 @@ const {
   args,
   comment,
   prefix,
+  managers = ["npm", "pnpm", "yarn", "deno", "bun", "vp"]
 } = Astro.props
 
-type Manager = "npm" | "yarn" | "pnpm" | "bun"
-type CommandType = NonNullable<Props["type"]>
-
 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" },
 }
 
-const managers: Manager[] = ["npm", "pnpm", "yarn", "bun"]
-
 function getCommand(mgr: Manager, cmdType: CommandType): string | undefined {
   let cmd = commands[mgr][cmdType]
   if (cmd === undefined) return undefined
@@ -62,12 +65,23 @@ const tabs = managers
       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")
+}))
 ---
 
-<Tabs syncKey="package-managers">
-  {tabs.map((tab) => (
-      <TabItem label={tab.mgr}>
-        <Prism lang="sh" code={tab.cmd!} />
-      </TabItem>
+<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>
   ))}
-</Tabs>
+</RLATabs>