@rimelight/ui 0.0.23 → 0.0.25

package/src/themes/button.theme.ts

@@ -1,9 +1,7 @@
-/**
- * Theme configuration for the Button component. Defines the slots, base styles, and an extensive
- * set of variants including color logic.
- */
-export const buttonTheme = {
-  slots: ["root"],
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: ["root", "label", "leadingIcon", "trailingIcon"],
   base: {
     root: [
       "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
@@ -11,12 +9,16 @@ export const buttonTheme = {
       "transition-all outline-none focus-visible:ring-3",
       "disabled:pointer-events-none disabled:op-50",
       "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
-    ]
+    ],
+    label: "truncate",
+    leadingIcon: "shrink-0",
+    trailingIcon: "shrink-0"
   },
   variants: {
     variant: {
       solid: { root: "b shadow-xs" },
-      outlined: { root: "b shadow-xs border" },
+      outline: { root: "b shadow-xs border" },
+      soft: { root: "" },
       subtle: { root: "" },
       ghost: { root: "" },
       link: { root: "p-0 h-auto" }
@@ -33,11 +35,44 @@ export const buttonTheme = {
       source: { root: "" }
     },
     size: {
-      xs: { root: "h-7 px-2xs text-xs [&_svg]:size-3.5" },
-      sm: { root: "h-8 px-xs text-sm [&_svg]:size-4" },
-      md: { root: "h-9 px-sm text-sm [&_svg]:size-4" },
-      lg: { root: "h-10 px-md text-base [&_svg]:size-4.5" },
-      xl: { root: "h-11 px-lg text-base [&_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" }
+    },
+    square: {
+      true: { root: "" }
+    },
+    leading: { true: {} },
+    trailing: { true: {} },
+    loading: { true: {} },
+    active: {
+      true: { root: "" },
+      false: { root: "" }
     }
   },
   compoundVariants: [
@@ -105,63 +140,63 @@ export const buttonTheme = {
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "primary",
       classNames: {
         root: "border-primary/20 text-primary-600 bg-primary/5 hover:bg-primary/10 hover:border-primary/30 focus-visible:ring-primary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "secondary",
       classNames: {
         root: "border-secondary/20 text-secondary-600 bg-secondary/5 hover:bg-secondary/10 hover:border-secondary/30 focus-visible:ring-secondary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "info",
       classNames: {
         root: "border-info/20 text-info-600 bg-info/5 hover:bg-info/10 hover:border-info/30 focus-visible:ring-info/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "success",
       classNames: {
         root: "border-success/20 text-success-600 bg-success/5 hover:bg-success/10 hover:border-success/30 focus-visible:ring-success/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "warning",
       classNames: {
         root: "border-warning/20 text-warning-600 bg-warning/5 hover:bg-warning/10 hover:border-warning/30 focus-visible:ring-warning/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "error",
       classNames: {
         root: "border-error/20 text-error-600 bg-error/5 hover:bg-error/10 hover:border-error/30 focus-visible:ring-error/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "commentary",
       classNames: {
         root: "border-commentary/20 text-commentary-600 bg-commentary/5 hover:bg-commentary/10 hover:border-commentary/30 focus-visible:ring-commentary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "ideation",
       classNames: {
         root: "border-ideation/20 text-ideation-600 bg-ideation/5 hover:bg-ideation/10 hover:border-ideation/30 focus-visible:ring-ideation/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "source",
       classNames: {
         root: "border-source/20 text-source-600 bg-source/5 hover:bg-source/10 hover:border-source/30 focus-visible:ring-source/40"
@@ -355,6 +390,127 @@ export const buttonTheme = {
       classNames: {
         root: "text-source-600 hover:underline hover:decoration-source/30"
       }
+    },
+    {
+      variant: "soft",
+      color: "primary",
+      classNames: {
+        root: "text-primary-600 bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "secondary",
+      classNames: {
+        root: "text-secondary-600 bg-secondary/10 hover:bg-secondary/20 focus-visible:ring-secondary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "info",
+      classNames: {
+        root: "text-info-600 bg-info/10 hover:bg-info/20 focus-visible:ring-info/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "success",
+      classNames: {
+        root: "text-success-600 bg-success/10 hover:bg-success/20 focus-visible:ring-success/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "warning",
+      classNames: {
+        root: "text-warning-600 bg-warning/10 hover:bg-warning/20 focus-visible:ring-warning/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "error",
+      classNames: {
+        root: "text-error-600 bg-error/10 hover:bg-error/20 focus-visible:ring-error/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "commentary",
+      classNames: {
+        root: "text-commentary-600 bg-commentary/10 hover:bg-commentary/20 focus-visible:ring-commentary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "ideation",
+      classNames: {
+        root: "text-ideation-600 bg-ideation/10 hover:bg-ideation/20 focus-visible:ring-ideation/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "source",
+      classNames: {
+        root: "text-source-600 bg-source/10 hover:bg-source/20 focus-visible:ring-source/40"
+      }
+    },
+    {
+      square: true,
+      size: "xs",
+      classNames: {
+        root: "p-1 w-7"
+      }
+    },
+    {
+      square: true,
+      size: "sm",
+      classNames: {
+        root: "p-1.5 w-8"
+      }
+    },
+    {
+      square: true,
+      size: "md",
+      classNames: {
+        root: "p-1.5 w-9"
+      }
+    },
+    {
+      square: true,
+      size: "lg",
+      classNames: {
+        root: "p-2 w-10"
+      }
+    },
+    {
+      square: true,
+      size: "xl",
+      classNames: {
+        root: "p-2 w-11"
+      }
+    },
+    {
+      loading: true,
+      leading: true,
+      classNames: {
+        leadingIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      classNames: {
+        trailingIcon: "animate-spin"
+      }
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: false,
+      classNames: {
+        trailingIcon: "animate-spin"
+      }
     }
   ],
   defaultVariants: {
@@ -362,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,185 @@
+import { defineTheme } from "../utils/defineTheme"
+
+export default defineTheme({
+  slots: [
+    "root",
+    "background",
+    "container",
+    "wrapper",
+    "header",
+    "leading",
+    "leadingIcon",
+    "headline",
+    "title",
+    "description",
+    "body",
+    "features",
+    "footer",
+    "links"
+  ],
+  base: {
+    root: "relative isolate",
+    background: "absolute inset-0 -z-1 overflow-hidden",
+    container: "flex flex-col lg:grid gap-8 sm:gap-16",
+    wrapper: "",
+    header: "",
+    leading: "flex items-center mb-6",
+    leadingIcon: "size-10 shrink-0 text-primary",
+    headline: "mb-3",
+    title: "text-pretty tracking-tight font-bold text-highlighted",
+    description: "text-muted",
+    body: "mt-8",
+    features: "grid gap-8",
+    footer: "mt-8",
+    links: "flex flex-wrap gap-x-6 gap-y-3"
+  },
+  variants: {
+    variant: {
+      default: {
+        container: "py-16 sm:py-24 lg:py-32",
+        title: "text-3xl sm:text-4xl lg:text-5xl",
+        description: "text-base sm:text-lg",
+        features: "sm:grid-cols-2 lg:grid-cols-3"
+      },
+      hero: {
+        container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
+        title: "text-5xl sm:text-7xl",
+        description: "text-lg sm:text-xl/8",
+        headline: "mb-4",
+        leading: "mb-6",
+        body: "mt-10",
+        footer: "mt-10",
+        links: "mt-10"
+      },
+      cta: {
+        root: "rounded-xl overflow-hidden",
+        container: "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"
+      }
+    },
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center",
+        description: "text-pretty",
+        features: "gap-4"
+      },
+      vertical: {
+        container: "",
+        headline: "justify-center",
+        leading: "justify-center",
+        title: "text-center",
+        description: "text-center text-balance",
+        links: "justify-center",
+        features: ""
+      }
+    },
+    reverse: {
+      true: {
+        wrapper: "order-last"
+      }
+    },
+    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"
+      }
+    },
+    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: "outline"
+  }
+})

package/src/types/componentVariant.ts

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

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"