@rimelight/ui 0.0.36 → 0.0.38

package/src/components/astro/RLACopyMarkdown.astro

@@ -1,78 +0,0 @@
----
-import RLAButton from "./RLAButton.astro"
-import type { ButtonProps } from "../../types"
-
-interface Props extends Omit<ButtonProps, "href" | "label" | "leadingIcon" | "trailingIcon" | "loading" | "loadingAuto" | "square" | "active" | "activeColor" | "activeVariant"> {
-  raw: string
-}
-
-const {
-  raw,
-  ...rest
-} = Astro.props
----
-
-<rla-copy-markdown {...rest}>
-  <RLAButton
-    class="rl-copy-markdown"
-    color="neutral"
-    variant="outline"
-    size="sm"
-    leadingIcon="i-lucide-copy"
-    label="Copy Markdown"
-    data-raw={raw}
-  />
-</rla-copy-markdown>
-
-<script>
-  class RLACopyMarkdown extends HTMLElement {
-    private copyCleanup: (() => void) | null = null;
-
-    connectedCallback() {
-      this.style.display = 'contents';
-      const copyBtn = this.querySelector(".rl-copy-markdown") as HTMLButtonElement | null;
-      if (!copyBtn) return;
-
-      const onClick = async () => {
-        try {
-          copyBtn.disabled = true;
-          const markdown = copyBtn.getAttribute("data-raw");
-          if (!markdown) {
-            throw new Error("No raw markdown content provided to copy");
-          }
-          await navigator.clipboard.writeText(markdown);
-          
-          const labelEl = copyBtn.querySelector('[data-slot="label"]');
-          if (labelEl) {
-            const origText = labelEl.textContent;
-            labelEl.textContent = "Copied!";
-            setTimeout(() => {
-              labelEl.textContent = origText;
-            }, 2000);
-          }
-        } catch (err) {
-          console.error("Failed to copy:", err);
-        } finally {
-          copyBtn.disabled = false;
-        }
-      };
-
-      copyBtn.addEventListener("click", onClick);
-
-      this.copyCleanup = () => {
-        copyBtn.removeEventListener("click", onClick);
-      };
-    }
-
-    disconnectedCallback() {
-      if (this.copyCleanup) {
-        this.copyCleanup();
-        this.copyCleanup = null;
-      }
-    }
-  }
-
-  if (!customElements.get('rla-copy-markdown')) {
-    customElements.define('rla-copy-markdown', RLACopyMarkdown);
-  }
-</script>

package/src/components/astro/RLADashboardGroup.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardGroupProps } from "../../types"
-import dashboardGroupThemeDefault, { createDashboardGroupTheme } from "../../themes/dashboard-group.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const dashboardGroupTheme = uiConfig.colors ? createDashboardGroupTheme() : dashboardGroupThemeDefault
-
-const dashboardGroup = scv(dashboardGroupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardGroupProps
-
-const classes = resolveClasses(dashboardGroup, {}, useUi("dashboardGroup", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLADashboardNavbar.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardNavbarProps } from "../../types"
-import dashboardNavbarThemeDefault, { createDashboardNavbarTheme } from "../../themes/dashboard-navbar.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const dashboardNavbarTheme = uiConfig.colors ? createDashboardNavbarTheme() : dashboardNavbarThemeDefault
-
-const dashboardNavbar = scv(dashboardNavbarTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardNavbarProps
-
-const classes = resolveClasses(dashboardNavbar, {}, useUi("dashboardNavbar", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLADashboardPanel.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardPanelProps } from "../../types"
-import dashboardPanelThemeDefault, { createDashboardPanelTheme } from "../../themes/dashboard-panel.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const dashboardPanelTheme = uiConfig.colors ? createDashboardPanelTheme() : dashboardPanelThemeDefault
-
-const dashboardPanel = scv(dashboardPanelTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardPanelProps
-
-const classes = resolveClasses(dashboardPanel, {}, useUi("dashboardPanel", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLADashboardResizeHandle.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardResizeHandleProps } from "../../types"
-import dashboardResizeHandleThemeDefault, { createDashboardResizeHandleTheme } from "../../themes/dashboard-resize-handle.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const dashboardResizeHandleTheme = uiConfig.colors ? createDashboardResizeHandleTheme() : dashboardResizeHandleThemeDefault
-
-const dashboardResizeHandle = scv(dashboardResizeHandleTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardResizeHandleProps
-
-const classes = resolveClasses(dashboardResizeHandle, {}, useUi("dashboardResizeHandle", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLADashboardSearch.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardSearchProps } from "../../types"
-import dashboardSearchThemeDefault, { createDashboardSearchTheme } from "../../themes/dashboard-search.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const dashboardSearchTheme = uiConfig.colors ? createDashboardSearchTheme() : dashboardSearchThemeDefault
-
-const dashboardSearch = scv(dashboardSearchTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSearchProps
-
-const classes = resolveClasses(dashboardSearch, {}, useUi("dashboardSearch", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLADashboardSearchButton.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DashboardSearchButtonProps } from "../../types"
-import dashboardSearchButtonThemeDefault, { createDashboardSearchButtonTheme } from "../../themes/dashboard-search-button.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const dashboardSearchButtonTheme = uiConfig.colors ? createDashboardSearchButtonTheme() : dashboardSearchButtonThemeDefault
-
-const dashboardSearchButton = scv(dashboardSearchButtonTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DashboardSearchButtonProps
-
-const classes = resolveClasses(dashboardSearchButton, {}, useUi("dashboardSearchButton", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLADashboardSidebar.astro

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

package/src/components/astro/RLADashboardSidebarCollapse.astro

@@ -1,23 +0,0 @@
----
-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,23 +0,0 @@
----
-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,23 +0,0 @@
----
-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,23 +0,0 @@
----
-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/components/astro/RLADocsGamepad.astro

@@ -1,178 +0,0 @@
----
-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>