@rimelight/ui 0.0.22 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -70,7 +70,6 @@
     "tailwindcss": "^4.2.3",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
-    "unplugin-icons": "23.0.1",
     "vite-plugin-virtual": "^0.5.0"
   },
   "devDependencies": {

package/src/components/ThemeToggle.astro

@@ -1,7 +1,5 @@
 ---
 import RLAButton from "./astro/RLAButton.astro";
-import IconSun from "~icons/lucide/sun"
-import IconMoon from "~icons/lucide/moon"
 
 export interface ThemeToggleProps {
   class?: string;
@@ -23,8 +21,8 @@ const { class: className, size = "md" } = Astro.props as Props
   variant="ghost"
   aria-label="Toggle theme"
 >
-    <IconSun class="sun-wrapper block dark:hidden" />
-    <IconMoon class="moon-wrapper hidden dark:block" />
+    <span class="sun-wrapper block dark:hidden i-lucide-sun" />
+    <span class="moon-wrapper hidden dark:block i-lucide-moon" />
 </RLAButton>
 
 <script>

package/src/components/astro/RLAIcon.astro

@@ -0,0 +1,61 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { iconTheme } from "../../themes/icon.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const icon = scv({
+  slots: [...iconTheme.slots],
+  base: iconTheme.base,
+  variants: iconTheme.variants,
+  defaultVariants: iconTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLAIconProps {
+  /**
+   * Icon name following the UnoCSS icons format.
+   * @example "i-lucide-home"
+   */
+  name: string
+  /**
+   * Size variant for the icon.
+   */
+  size?: keyof typeof iconTheme.variants.size
+  /**
+   * External class applied to the root element.
+   */
+  class?: string
+  /**
+   * UI overrides for individual slots.
+   */
+  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+  [key: string]: unknown
+}
+
+const {
+  name,
+  size = "md",
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAIconProps
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.icon as Record<string, unknown>) ?? {}
+) as Record<keyof typeof iconTheme.base, string | undefined>
+
+const { root } = icon({ size })
+---
+
+<span
+  class={twMerge(root, mergedUI.root, className, name)}
+  data-slot="rla-icon"
+  aria-hidden="true"
+  {...rest}
+>
+</span>

package/src/components/astro/RLALogo.astro

@@ -0,0 +1,100 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { logoTheme } from "../../themes/logo.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const logo = scv({
+  slots: [...logoTheme.slots],
+  base: logoTheme.base,
+  variants: logoTheme.variants,
+  defaultVariants: logoTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args)),
+});
+
+export interface RLALogoProps {
+  /**
+   * The variant of the logo to display.
+   * @default "logomark"
+   */
+  variant?: string;
+  /**
+   * Override the color mode.
+   */
+  mode?: "color" | "white" | "black";
+  /**
+   * The URL to link to.
+   * @default "/"
+   */
+  href?: string;
+  /**
+   * UI overrides for individual slots, derived from the logo theme.
+   */
+  ui?: Partial<Record<keyof typeof logoTheme.base, string>>;
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string;
+  /**
+   * The alt text for the logo image.
+   */
+  alt?: string;
+  /**
+   * Standard HTML attributes for <a>
+   */
+  [key: string]: unknown;
+}
+
+const {
+  variant = "logomark",
+  mode,
+  href = "/",
+  class: className,
+  ui: uiProp,
+  alt,
+  ...rest
+} = Astro.props as RLALogoProps;
+
+const globalConfig = getUIConfig();
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.logo as Record<string, unknown>) ?? {},
+) as Record<keyof typeof logoTheme.base, string | undefined>;
+
+const { root } = logo();
+
+const rcLogos = globalConfig.logos as Record<string, any>;
+let logoSrc: string | null = null;
+
+if (rcLogos && typeof rcLogos === "object") {
+  let src = rcLogos[variant];
+  if (src && typeof src === "object") {
+    logoSrc = src[mode || "color"] || src.black || src.color;
+  } else if (typeof src === "string") {
+    logoSrc = src;
+  }
+}
+
+// Support for UnoCSS icons (e.g. `i-heroicons-home`)
+const isIcon = logoSrc && (logoSrc.includes(":") || logoSrc.startsWith("i-"));
+---
+
+<a
+  class={twMerge(root, mergedUI.root, className)}
+  href={href}
+  aria-label={alt || variant}
+  data-slot="rla-logo"
+  {...rest}
+>
+  {logoSrc ? (
+    isIcon ? (
+      <span class:list={[logoSrc, "size-full block shrink-0"]} aria-hidden="true" />
+    ) : (
+      <img src={logoSrc} alt={alt || ""} class="size-full block object-contain shrink-0" />
+    )
+  ) : (
+    <slot />
+  )}
+</a>

package/src/components/astro/RLAPlaceholder.astro

@@ -0,0 +1,71 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { placeholderTheme } from "../../themes/placeholder.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const placeholder = scv({
+  slots: [...placeholderTheme.slots],
+  base: placeholderTheme.base,
+  variants: placeholderTheme.variants,
+  compoundVariants: [...placeholderTheme.compoundVariants],
+  defaultVariants: placeholderTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLAPlaceholderProps {
+  /**
+   * UI overrides for individual slots, derived from the placeholder theme.
+   */
+  ui?: Partial<Record<keyof typeof placeholderTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * Standard HTML attributes.
+   */
+  [key: string]: unknown
+}
+
+const {
+  class: className,
+  ui: uiProp,
+  ...rest
+} = Astro.props as RLAPlaceholderProps
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.placeholder as Record<string, unknown>) ?? {}
+) as Record<keyof typeof placeholderTheme.base, string | undefined>
+
+const { base, svg } = placeholder()
+---
+
+<div class={twMerge(base, mergedUI.base, className)} {...rest}>
+  <svg class={twMerge(svg, mergedUI.svg)}>
+    <defs>
+      <pattern
+        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+        x="0"
+        y="0"
+        width="10"
+        height="10"
+        patternUnits="userSpaceOnUse"
+      >
+        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+      </pattern>
+    </defs>
+    <rect
+      stroke="none"
+      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+      width="100%"
+      height="100%"
+    />
+  </svg>
+
+  <slot />
+</div>

package/src/components/vue/RLVIcon.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import { useUi } from "../../composables"
+import { iconTheme } from "../../themes/icon.theme"
+
+const icon = scv({
+  slots: [...iconTheme.slots],
+  base: iconTheme.base,
+  variants: iconTheme.variants,
+  defaultVariants: iconTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVIconProps {
+  /**
+   * Icon name following the UnoCSS icons format. Can be a string like "i-lucide-home" or a Vue
+   * component.
+   *
+   * @example
+   *   "i-lucide-home"
+   */
+  name: string
+  /**
+   * Size variant for the icon.
+   */
+  size?: keyof typeof iconTheme.variants.size
+  /**
+   * External class applied to the root element.
+   */
+  class?: string
+  /**
+   * UI overrides for individual slots.
+   */
+  ui?: Partial<Record<keyof typeof iconTheme.base, string>>
+}
+
+const { name, size = "md", class: className, ui: uiProp } = defineProps<RLVIconProps>()
+
+const mergedUI = useUi("icon", uiProp as Record<string, unknown> | undefined)
+
+const resolvedClasses = computed(() => {
+  const { root } = icon({ size })
+  return {
+    root: twMerge(root, mergedUI.value.root, className)
+  }
+})
+
+defineSlots<{
+  default(props: {}): any
+}>()
+</script>
+
+<template>
+  <span
+    v-bind="$attrs"
+    :class="[resolvedClasses.root, name]"
+    data-slot="rlv-icon"
+    aria-hidden="true"
+  >
+    <slot />
+  </span>
+</template>

package/src/components/vue/RLVLogo.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { logoTheme } from "../../themes/logo.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const logo = scv({
+  slots: [...logoTheme.slots],
+  base: logoTheme.base,
+  variants: logoTheme.variants,
+  defaultVariants: logoTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVLogoProps {
+  /**
+   * The variant of the logo to display.
+   *
+   * @default "logomark"
+   */
+  variant?: string
+  /**
+   * Override the color mode.
+   */
+  mode?: "color" | "white" | "black"
+  /**
+   * The URL to link to.
+   *
+   * @default "/"
+   */
+  href?: string
+  /**
+   * UI overrides for individual slots, derived from the logo theme.
+   */
+  ui?: Partial<Record<keyof typeof logoTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * The alt text for the logo image.
+   */
+  alt?: string
+  /**
+   * Standard HTML attributes for <a>
+   */
+  [key: string]: unknown
+}
+
+const props = withDefaults(defineProps<RLVLogoProps>(), {
+  variant: "logomark",
+  href: "/"
+})
+
+defineSlots<{
+  /**
+   * The default slot for the logo content (e.g., text, custom elements).
+   */
+  default(props: {}): any
+}>()
+
+const globalConfig = getUIConfig()
+
+const mergedUI = computed(
+  () =>
+    defu(props.ui ?? {}, (globalConfig.logo as Record<string, unknown>) ?? {}) as Record<
+      keyof typeof logoTheme.base,
+      string | undefined
+    >
+)
+
+const resolvedClasses = computed(() => {
+  const { root } = logo()
+  return {
+    root: twMerge(root, mergedUI.value.root, props.class)
+  }
+})
+
+const logoSrc = computed<string | null>(() => {
+  const rcLogos = globalConfig.logos as Record<string, any>
+  let src: any = null
+
+  if (rcLogos && typeof rcLogos === "object") {
+    src = rcLogos[props.variant]
+    if (src && typeof src === "object") {
+      src = src[props.mode || "color"] || src.black || src.color
+    }
+  }
+
+  if (src && typeof src === "string" && src) return src
+
+  return null
+})
+
+const isIcon = computed(() => {
+  const src = logoSrc.value
+  if (!src) return false
+  if (src.startsWith("http") || src.startsWith("/") || src.startsWith(".")) return false
+  return src.includes(":") || src.startsWith("i-")
+})
+
+const Tag = computed(() => (props.href ? "a" : "div"))
+</script>
+
+<template>
+  <component
+    v-bind="$attrs"
+    :is="Tag"
+    :href="Tag === 'a' ? href : undefined"
+    :aria-label="alt || variant"
+    :class="resolvedClasses.root"
+    data-slot="rlv-logo"
+  >
+    <template v-if="logoSrc">
+      <!-- Using mode='svg' pattern is not strictly needed for UnoCSS icons -->
+      <span v-if="isIcon" :class="[logoSrc, 'size-full block shrink-0']" aria-hidden="true" />
+      <img v-else :src="logoSrc" :alt="alt || ''" class="size-full block object-contain shrink-0" />
+    </template>
+    <slot v-else />
+  </component>
+</template>

package/src/components/vue/RLVPlaceholder.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { placeholderTheme } from "../../themes/placeholder.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const placeholder = scv({
+  slots: [...placeholderTheme.slots],
+  base: placeholderTheme.base,
+  variants: placeholderTheme.variants,
+  compoundVariants: [...placeholderTheme.compoundVariants],
+  defaultVariants: placeholderTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVPlaceholderProps {
+  /**
+   * UI overrides for individual slots, derived from the placeholder theme.
+   */
+  ui?: Partial<Record<keyof typeof placeholderTheme.base, string>>
+  /**
+   * External class — applied to the root element.
+   */
+  class?: string
+  /**
+   * Standard HTML attributes.
+   */
+  [key: string]: unknown
+}
+
+const { class: className, ui: uiProp } = defineProps<RLVPlaceholderProps>()
+
+defineSlots<{
+  /**
+   * The default slot for placeholder content.
+   */
+  default(props: {}): any
+}>()
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.placeholder as Record<string, unknown>) ?? {}
+) as Record<keyof typeof placeholderTheme.base, string | undefined>
+
+const { base, svg } = placeholder()
+</script>
+
+<template>
+  <div :class="twMerge(base, mergedUI.base, className)" v-bind="$attrs">
+    <svg :class="twMerge(svg, mergedUI.svg)">
+      <defs>
+        <pattern
+          id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+          x="0"
+          y="0"
+          width="10"
+          height="10"
+          patternUnits="userSpaceOnUse"
+        >
+          <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+        </pattern>
+      </defs>
+      <rect
+        stroke="none"
+        fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+        width="100%"
+        height="100%"
+      />
+    </svg>
+
+    <slot />
+  </div>
+</template>

package/src/integrations/ui.ts

@@ -3,7 +3,6 @@ import UnoCSS from "unocss/astro"
 import vue from "@astrojs/vue"
 import uiPlugin from "@nuxt/ui/vite"
 import defu from "defu"
-import Icons from "unplugin-icons/vite"
 import tailwindcss from "@tailwindcss/vite"
 import { defaultUIConfig } from "../themes"
 
@@ -14,9 +13,25 @@ export type UIConfigOverrides = {
   "button"?: Partial<(typeof defaultUIConfig)["button"]>
   "header"?: Partial<(typeof defaultUIConfig)["header"]>
   "scroll-to-top"?: Partial<(typeof defaultUIConfig)["scroll-to-top"]>
+  "logo"?: Partial<(typeof defaultUIConfig)["logo"]>
 }
 
 export interface UIOptions {
+  /**
+   * Configuration for the Logo component variants.
+   */
+  logos?: Record<
+    string,
+    | string
+    | {
+        light?: string
+        dark?: string
+        color?: string
+        white?: string
+        black?: string
+        [key: string]: string | undefined
+      }
+  >
   /**
    * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
    * wins).
@@ -47,7 +62,8 @@ export interface UIOptions {
  *   })
  */
 export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
+  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
+  const resolvedConfig = { ...resolvedUI, logos: options.logos ?? {} }
 
   const virtualModuleId = "virtual:rimelight-ui"
   const resolvedVirtualModuleId = "\0" + virtualModuleId
@@ -74,10 +90,6 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
             router: false,
             scanPackages: ["@rimelight/ui"]
           }),
-          Icons({
-            compiler: "astro",
-            autoInstall: true
-          }),
           tailwindcss(),
           {
             name: "vite-plugin-rimelight-ui-config",

package/src/presets/index.ts

@@ -2,6 +2,7 @@ import {
   definePreset,
   presetTypography,
   presetWind4,
+  presetIcons,
   transformerDirectives,
   transformerVariantGroup
 } from "unocss"
@@ -23,6 +24,12 @@ export default definePreset(() => {
             "font-family": "var(--font-mono), monospace"
           }
         }
+      }),
+      presetIcons({
+        extraProperties: {
+          "display": "inline-block",
+          "vertical-align": "middle"
+        }
       })
     ],
     transformers: [transformerDirectives(), transformerVariantGroup()],

package/src/themes/icon.theme.ts

@@ -0,0 +1,18 @@
+export const iconTheme = {
+  slots: ["root"],
+  base: {
+    root: ["inline-block", "align-middle"]
+  },
+  variants: {
+    size: {
+      xs: { root: ["h-3", "w-3"] },
+      sm: { root: ["h-4", "w-4"] },
+      md: { root: ["h-5", "w-5"] },
+      lg: { root: ["h-6", "w-6"] },
+      xl: { root: ["h-8", "w-8"] }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+} as const

package/src/themes/index.ts

@@ -2,6 +2,9 @@ import { headerTheme } from "./header.theme"
 import { footerTheme } from "./footer.theme"
 import { scrollToTopTheme } from "./scroll-to-top.theme"
 import { buttonTheme } from "./button.theme"
+import { logoTheme } from "./logo.theme"
+import { iconTheme } from "./icon.theme"
+import { placeholderTheme } from "./placeholder.theme"
 
 /**
  * Default UI configuration for all components. This is the baseline that gets merged with
@@ -10,8 +13,11 @@ import { buttonTheme } from "./button.theme"
 export const defaultUIConfig = {
   "header": headerTheme,
   "footer": footerTheme,
+  "logo": logoTheme,
   "scroll-to-top": scrollToTopTheme,
-  "button": buttonTheme
+  "button": buttonTheme,
+  "icon": iconTheme,
+  "placeholder": placeholderTheme
 } as const
 
 export type DefaultUIConfig = typeof defaultUIConfig

package/src/themes/logo.theme.ts

@@ -0,0 +1,8 @@
+export const logoTheme = {
+  slots: ["root"],
+  base: {
+    root: "flex items-center justify-center transition-opacity hover:opacity-80 shrink-0 select-none overflow-hidden"
+  },
+  variants: {},
+  defaultVariants: {}
+} as const

package/src/themes/placeholder.theme.ts

@@ -0,0 +1,14 @@
+/**
+ * Theme configuration for the Placeholder component. Defines the slots, base styles for a
+ * placeholder container with a decorative SVG pattern overlay.
+ */
+export const placeholderTheme = {
+  slots: ["base", "svg"],
+  base: {
+    base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
+    svg: "absolute inset-0 h-full w-full stroke-primary/10"
+  },
+  variants: {},
+  compoundVariants: [],
+  defaultVariants: {}
+} as const