@rimelight/ui 0.0.24 → 0.0.26

package/src/themes/button.theme.ts

@@ -1,8 +1,6 @@
-/**
- * Theme configuration for the Button component. Defines the slots, base styles, and an extensive
- * set of variants including color logic.
- */
-export const buttonTheme = {
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
   slots: ["root", "label", "leadingIcon", "trailingIcon"],
   base: {
     root: [
@@ -37,11 +35,31 @@ export const buttonTheme = {
       source: { root: "" }
     },
     size: {
-      xs: { root: "h-7 px-2xs text-xs [&_svg]:size-3.5", leadingIcon: "[&_svg]:size-3.5", trailingIcon: "[&_svg]:size-3.5" },
-      sm: { root: "h-8 px-xs text-sm [&_svg]:size-4", leadingIcon: "[&_svg]:size-4", trailingIcon: "[&_svg]:size-4" },
-      md: { root: "h-9 px-sm text-sm [&_svg]:size-4", leadingIcon: "[&_svg]:size-4", trailingIcon: "[&_svg]:size-4" },
-      lg: { root: "h-10 px-md text-base [&_svg]:size-4.5", leadingIcon: "[&_svg]:size-4.5", trailingIcon: "[&_svg]:size-4.5" },
-      xl: { root: "h-11 px-lg text-base [&_svg]:size-5", leadingIcon: "[&_svg]:size-5", trailingIcon: "[&_svg]:size-5" }
+      xs: {
+        root: "h-7 px-2xs text-xs [&_svg]:size-3.5",
+        leadingIcon: "[&_svg]:size-3.5",
+        trailingIcon: "[&_svg]:size-3.5"
+      },
+      sm: {
+        root: "h-8 px-xs text-sm [&_svg]:size-4",
+        leadingIcon: "[&_svg]:size-4",
+        trailingIcon: "[&_svg]:size-4"
+      },
+      md: {
+        root: "h-9 px-sm text-sm [&_svg]:size-4",
+        leadingIcon: "[&_svg]:size-4",
+        trailingIcon: "[&_svg]:size-4"
+      },
+      lg: {
+        root: "h-10 px-md text-base [&_svg]:size-4.5",
+        leadingIcon: "[&_svg]:size-4.5",
+        trailingIcon: "[&_svg]:size-4.5"
+      },
+      xl: {
+        root: "h-11 px-lg text-base [&_svg]:size-5",
+        leadingIcon: "[&_svg]:size-5",
+        trailingIcon: "[&_svg]:size-5"
+      }
     },
     block: {
       true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
@@ -373,7 +391,6 @@ export const buttonTheme = {
         root: "text-source-600 hover:underline hover:decoration-source/30"
       }
     },
-    // soft variant compound variants
     {
       variant: "soft",
       color: "primary",
@@ -437,7 +454,6 @@ export const buttonTheme = {
         root: "text-source-600 bg-source/10 hover:bg-source/20 focus-visible:ring-source/40"
       }
     },
-    // square + size compound variants (explicit width to match height)
     {
       square: true,
       size: "xs",
@@ -473,7 +489,6 @@ export const buttonTheme = {
         root: "p-2 w-11"
       }
     },
-    // loading compound variants
     {
       loading: true,
       leading: true,
@@ -503,4 +518,4 @@ export const buttonTheme = {
     color: "primary",
     size: "md"
   }
-} as const
+})

package/src/themes/footer.theme.ts

@@ -1,8 +1,6 @@
-/**
- * Theme configuration for the Footer component. Defines the slots, base styles, and variants for
- * layout management.
- */
-export const footerTheme = {
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
   slots: ["root", "container", "left", "center", "right"],
   base: {
     root: "py-8 lg:py-12",
@@ -26,4 +24,4 @@ export const footerTheme = {
   defaultVariants: {
     contain: false
   }
-} as const
+})

package/src/themes/header.theme.ts

@@ -1,25 +1,6 @@
-/**
- * Theme configuration for the Header component. Defines the slots, base styles, and variants for
- * layout management.
- *
- * Slots:
- *
- * - `root` — the `<header>` element
- * - `content` — inner wrapper div used for height measurement (fixed/hideOnScroll mode)
- * - `container` — max-width flex row
- * - `left` — left region
- * - `center` — center region
- * - `right` — right region
- *
- * Variants:
- *
- * - `contain` — constrains container to max-w-7xl
- * - `sticky` — sticky positioning (ignored when `fixed` variant is true)
- * - `fixed` — position: fixed with left/right 0 and smooth top/opacity transition; used for stacked
- *   header layers. Top offset and z-index are applied via inline style (top prop + stackIndex prop)
- *   rather than theme classes.
- */
-export const headerTheme = {
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
   slots: ["root", "content", "container", "left", "center", "right"],
   base: {
     root: "w-full",
@@ -47,11 +28,6 @@ export const headerTheme = {
         root: "relative"
       }
     },
-    /**
-     * Fixed-layer mode. When true, overrides sticky/relative positioning with `position: fixed` and
-     * enables smooth transitions. `top` and `z-index` are applied via inline `:style` on the
-     * component.
-     */
     fixed: {
       true: {
         root: "fixed left-0 right-0 transition-[top,opacity] duration-200 ease-in-out"
@@ -64,4 +40,4 @@ export const headerTheme = {
     sticky: true,
     fixed: false
   }
-} as const
+})

package/src/themes/icon.theme.ts

@@ -1,4 +1,6 @@
-export const iconTheme = {
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
   slots: ["root"],
   base: {
     root: ["inline-block", "align-middle"]
@@ -15,4 +17,4 @@ export const iconTheme = {
   defaultVariants: {
     size: "md"
   }
-} as const
+})

package/src/themes/index.ts

@@ -1,23 +1,18 @@
-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"
+import type { ComponentTheme } from "../utils/defineTheme"
 
-/**
- * Default UI configuration for all components. This is the baseline that gets merged with
- * user-provided overrides via the Astro integration options.
- */
-export const defaultUIConfig = {
-  "header": headerTheme,
-  "footer": footerTheme,
-  "logo": logoTheme,
-  "scroll-to-top": scrollToTopTheme,
-  "button": buttonTheme,
-  "icon": iconTheme,
-  "placeholder": placeholderTheme
-} as const
+const themeModules = import.meta.glob<{ default: ComponentTheme }>("./*.theme.ts", { eager: true })
+
+function kebabToCamel(str: string): string {
+  return str.replace(/-([a-z])/g, (_, char) => char.toUpperCase())
+}
+
+function themeNameFromFile(path: string): string {
+  const fileName = path.replace(/^\.\/|\.theme\.ts$/g, "")
+  return kebabToCamel(fileName)
+}
+
+export const defaultUIConfig: Record<string, ComponentTheme> = Object.fromEntries(
+  Object.entries(themeModules).map(([path, module]) => [themeNameFromFile(path), module.default])
+)
 
 export type DefaultUIConfig = typeof defaultUIConfig

package/src/themes/logo.theme.ts

@@ -1,8 +1,10 @@
-export const logoTheme = {
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
   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

@@ -1,8 +1,6 @@
-/**
- * Theme configuration for the Placeholder component. Defines the slots, base styles for a
- * placeholder container with a decorative SVG pattern overlay.
- */
-export const placeholderTheme = {
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
   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",
@@ -11,4 +9,4 @@ export const placeholderTheme = {
   variants: {},
   compoundVariants: [],
   defaultVariants: {}
-} as const
+})

package/src/themes/scroll-to-top.theme.ts

@@ -1,8 +1,6 @@
-/**
- * Theme configuration for the ScrollToTop component. Defines the slots, base styles, and variants
- * for the scroll-to-top button with progress indicator.
- */
-export const scrollToTopTheme = {
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
   slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
   base: {
     root: "fixed bottom-6 right-6 z-50",
@@ -45,4 +43,4 @@ export const scrollToTopTheme = {
   defaultVariants: {
     color: "primary"
   }
-} as const
+})

package/src/themes/section.theme.ts

@@ -0,0 +1,187 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: [
+    "root",
+    "background",
+    "container",
+    "wrapper",
+    "header",
+    "leading",
+    "leadingIcon",
+    "headline",
+    "title",
+    "description",
+    "body",
+    "footer",
+    "links"
+  ],
+  base: {
+    root: "relative isolate",
+    background: "absolute inset-0 -z-1 overflow-hidden",
+    container: "flex flex-col lg:grid",
+    wrapper: "",
+    header: "",
+    leading: "flex items-center mb-6",
+    leadingIcon: "size-10 shrink-0 text-primary",
+    headline: "",
+    title: "text-pretty tracking-tight font-bold text-highlighted",
+    description: "text-muted",
+    body: "",
+    footer: "",
+    links: "flex flex-wrap"
+  },
+  variants: {
+    variant: {
+      default: {
+        container: "py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+        headline: "mb-3",
+        title: "text-3xl sm:text-4xl lg:text-5xl",
+        description: "text-base sm:text-lg",
+        body: "mt-8",
+        footer: "mt-8",
+        links: "gap-x-6 gap-y-3"
+      },
+      hero: {
+        container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
+        headline: "mb-4",
+        title: "text-5xl sm:text-7xl",
+        description: "text-lg sm:text-xl/8",
+        leading: "mb-6",
+        body: "mt-10",
+        footer: "mt-10",
+        links: "gap-x-6 gap-y-3"
+      },
+      cta: {
+        root: "rounded-xl overflow-hidden",
+        container: "lg:grid px-6 py-12 sm:px-12 sm:py-24 lg:px-16 lg:py-24 gap-8 sm:gap-16",
+        title: "text-3xl sm:text-4xl",
+        description: "text-base sm:text-lg text-muted",
+        body: "mt-8",
+        footer: "mt-8",
+        links: "gap-x-6 gap-y-3"
+      }
+    },
+    ctaVariant: {
+      solid: {
+        root: "bg-inverted text-inverted",
+        title: "text-inverted",
+        description: "text-dimmed"
+      },
+      outline: {
+        root: "bg-default ring ring-default",
+        description: "text-muted"
+      },
+      soft: {
+        root: "bg-elevated/50",
+        description: "text-toned"
+      },
+      subtle: {
+        root: "bg-elevated/50 ring ring-default",
+        description: "text-toned"
+      },
+      naked: {
+        description: "text-muted"
+      }
+    },
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center",
+        description: "text-pretty"
+      },
+      vertical: {
+        container: "",
+        headline: "justify-center",
+        leading: "justify-center",
+        title: "text-center",
+        description: "text-center text-balance",
+        links: "justify-center"
+      }
+    },
+    reverse: {
+      true: {
+        wrapper: "order-last"
+      }
+    },
+    headline: {
+      true: {
+        headline: "font-semibold text-primary flex items-center gap-1.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-6"
+      }
+    },
+    description: {
+      true: {}
+    },
+    body: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "default",
+      orientation: "vertical",
+      title: true,
+      classNames: {
+        body: "mt-16"
+      }
+    },
+    {
+      variant: "default",
+      orientation: "vertical",
+      description: true,
+      classNames: {
+        body: "mt-16"
+      }
+    },
+    {
+      variant: "default",
+      orientation: "vertical",
+      body: true,
+      classNames: {
+        footer: "mt-16"
+      }
+    },
+    {
+      variant: "cta",
+      ctaVariant: "outline",
+      classNames: {
+        root: "bg-default ring ring-default",
+        description: "text-muted"
+      }
+    },
+    {
+      variant: "cta",
+      ctaVariant: "solid",
+      classNames: {
+        root: "bg-inverted text-inverted",
+        title: "text-inverted",
+        description: "text-dimmed"
+      }
+    },
+    {
+      variant: "cta",
+      ctaVariant: "soft",
+      classNames: {
+        root: "bg-elevated/50",
+        description: "text-toned"
+      }
+    },
+    {
+      variant: "cta",
+      ctaVariant: "subtle",
+      classNames: {
+        root: "bg-elevated/50 ring ring-default",
+        description: "text-toned"
+      }
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "vertical",
+    ctaVariant: "solid"
+  }
+})

package/src/types/componentVariant.ts

@@ -0,0 +1,14 @@
+export type ComponentVariants<T extends { variants?: Record<string, Record<string, unknown>> }> =
+  T["variants"] extends Record<string, Record<string, unknown>>
+    ? {
+        [K in keyof T["variants"]]?: T["variants"][K] extends { true: unknown; false: unknown }
+          ? boolean
+          : T["variants"][K] extends { true: unknown }
+            ? boolean
+            : keyof T["variants"][K]
+      }
+    : never
+
+export type ComponentSlots<T extends { slots: readonly string[] }> = Partial<
+  Record<T["slots"][number], string>
+>

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from "./componentVariant"

package/src/utils/defineTheme.ts

@@ -0,0 +1,11 @@
+export interface ComponentTheme {
+  slots: string[]
+  base: Record<string, string | string[]>
+  variants?: Record<string, Record<string, Record<string, string | string[]>>>
+  compoundVariants?: Record<string, unknown>[]
+  defaultVariants?: Record<string, unknown>
+}
+
+export function defineTheme<const T extends ComponentTheme>(theme: T): T {
+  return theme
+}

package/src/utils/index.ts

@@ -1 +1,4 @@
+export * from "./defineTheme"
+export * from "./resolveClasses"
+export * from "./useUi.ts"
 export * from "./embed"

package/src/utils/resolveClasses.ts

@@ -0,0 +1,21 @@
+import { cx } from "css-variants"
+
+export function resolveClasses<T extends (...args: never[]) => Record<string, string>>(
+  themeFn: T,
+  variants: Parameters<T>[0],
+  mergedUI: Record<string, string | undefined>,
+  rootClass?: string
+): Record<string, string> {
+  const resolved = themeFn(variants)
+  const result: Record<string, string> = {}
+
+  for (const [slot, value] of Object.entries(resolved)) {
+    result[slot] = cx(value, mergedUI[slot])
+  }
+
+  if (rootClass) {
+    result.root = cx(result.root ?? "", rootClass)
+  }
+
+  return result
+}

package/src/utils/useUi.ts

@@ -0,0 +1,19 @@
+import defu from "defu"
+import { getUIConfig } from "virtual:rimelight-ui"
+import type { DefaultUIConfig } from "../themes"
+
+export function useUi(
+  componentName: keyof DefaultUIConfig,
+  uiProp?: Record<string, string | undefined>
+): Record<string, string | undefined> {
+  const globalConfig = getUIConfig()
+  const defaults = globalConfig[componentName] ?? {}
+  const merged = defu(uiProp ?? {}, defaults)
+
+  return Object.fromEntries(
+    Object.entries(merged).map(([key, value]) => [
+      key,
+      typeof value === "string" ? value : undefined
+    ])
+  )
+}

package/src/composables/useUi.ts

@@ -1,27 +0,0 @@
-import { computed, type ComputedRef } from "vue"
-import defu from "defu"
-import { getUIConfig } from "virtual:rimelight-ui"
-import type { DefaultUIConfig } from "@/themes"
-
-/**
- * Reactive UI config merge composable for Vue components.
- *
- * Merges (highest priority first): 1. Local `ui` prop override 2. Global config from integration
- * (virtual:rimelight-ui)
- *
- * @param componentName - The component key in the config (e.g. 'button')
- * @param uiProp - The local `ui` prop from defineProps
- * @returns ComputedRef of merged UI overrides
- */
-export function useUi(
-  componentName: keyof DefaultUIConfig,
-  uiProp: Record<string, unknown> | undefined
-): ComputedRef<Record<string, unknown>> {
-  const globalConfig = getUIConfig()
-
-  return computed(() => {
-    const componentConfig = globalConfig[componentName]
-
-    return defu(uiProp ?? {}, componentConfig ?? {})
-  })
-}

package/src/plugins/starlightAddons/Sidebar.astro

@@ -1,89 +0,0 @@
----
-import { Badge, Icon } from '@astrojs/starlight/components'
-
-const { hasSidebar } = Astro.locals.starlightRoute
-const { isPageWithTopic, topics } = Astro.locals.starlightSidebarTopics
----
-
-{hasSidebar && isPageWithTopic && (
-  <ul class="starlight-sidebar-topics">
-    {topics.map((topic, index) => (
-      <li key={index}>
-        <a href={topic.link} class:list={{ 'starlight-sidebar-topics-current': topic.isCurrent }}>
-          {topic.icon && (
-            <div class="starlight-sidebar-topics-icon">
-              <Icon name={topic.icon} />
-            </div>
-          )}
-          <div>
-            {topic.label}
-            {topic.badge && (
-              <Badge class="starlight-sidebar-topics-badge" text={topic.badge.text} variant={topic.badge.variant} />
-            )}
-          </div>
-        </a>
-      </li>
-    ))}
-  </ul>
-)}
-<style>
-  ul {
-    list-style: none;
-    padding: 0;
-  }
-
-  ul::after {
-    content: '';
-    display: block;
-    margin-top: 1rem;
-    height: 1px;
-    border-top: 1px solid var(--sl-color-hairline-light);
-  }
-
-  li {
-    overflow-wrap: anywhere;
-  }
-
-  li + li {
-    margin-top: 0.25rem;
-  }
-
-  a {
-    align-items: center;
-    color: var(--sl-color-white);
-    display: flex;
-    font-size: var(--sl-text-base);
-    font-weight: 600;
-    gap: 0.5rem;
-    line-height: 1.5;
-    padding: 0.3em 0.5rem;
-    text-decoration: none;
-  }
-
-  a:is(.starlight-sidebar-topics-current, :hover, :focus-visible) {
-    color: var(--sl-color-accent-high);
-  }
-
-  :global([data-theme='light']) a.starlight-sidebar-topics-current {
-    color: var(--sl-color-accent);
-  }
-
-  .starlight-sidebar-topics-icon {
-    align-items: center;
-    border-radius: 0.25rem;
-    border: 1px solid var(--sl-color-gray-4);
-    display: flex;
-    justify-content: center;
-    padding: 0.25rem;
-  }
-
-  a:is(.starlight-sidebar-topics-current, :hover, :focus-visible) .starlight-sidebar-topics-icon {
-    background-color: var(--sl-color-text-accent);
-    border-color: var(--sl-color-text-accent);
-    color: var(--sl-color-text-invert);
-  }
-
-  .starlight-sidebar-topics-badge {
-    margin-inline-start: 0.25em;
-  }
-</style>

package/src/plugins/starlightAddons/data.ts

@@ -1,39 +0,0 @@
-import type { StarlightIcon } from "@astrojs/starlight/types"
-
-import type { SidebarTopicBadge } from "./libs/config"
-
-export interface StarlightSidebarTopicsRouteData {
-  /**
-   * Indicates if the current page is associated with a topic or not.
-   */
-  isPageWithTopic: boolean
-  /**
-   * A list of all configured topics.
-   */
-  topics: {
-    /**
-     * The optional badge associated with the topic.
-     */
-    badge?: {
-      text: string
-      variant: SidebarTopicBadge["variant"]
-    }
-    /**
-     * The name of an optional icon associated with the topic set to one of Starlight’s built-in
-     * icons.
-     */
-    icon?: StarlightIcon
-    /**
-     * Indicates if the current page is part of the topic.
-     */
-    isCurrent: boolean
-    /**
-     * The label of the topic.
-     */
-    label: string
-    /**
-     * The link to the topic’s content.
-     */
-    link: string
-  }[]
-}