@rimelight/ui 0.0.36 → 0.0.38

package/src/components/button/button.ts

@@ -0,0 +1,74 @@
+import type { Theme, ThemeColor } from "../../types/component"
+import type { LinkProps } from "../link/link"
+
+export interface ButtonProps extends LinkProps {
+  /**
+   * The visual style variant of the button
+   */
+  variant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"
+  /**
+   * The color scheme applied to the button
+   */
+  color?: ThemeColor
+  /**
+   * The size scale of the button
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  /**
+   * When provided, renders the button as an anchor link
+   */
+  href?: string
+  /**
+   * The text label displayed inside the button
+   */
+  label?: string
+  /**
+   * Icon name displayed before the label
+   */
+  leadingIcon?: string
+  /**
+   * Icon name displayed after the label
+   */
+  trailingIcon?: string
+  /**
+   * Shows a loading spinner animation
+   */
+  loading?: boolean
+  /**
+   * Automatically toggles loading state when an async onClick handler is executed
+   */
+  loadingAuto?: boolean
+  /**
+   * Renders a square button with equal padding
+   */
+  square?: boolean
+  /**
+   * Makes the button stretch to full width
+   */
+  block?: boolean
+  /**
+   * Applies active state styling
+   */
+  active?: boolean
+  /**
+   * Color used when button is in active state
+   */
+  activeColor?: ThemeColor
+  /**
+   * Variant used when button is in active state
+   */
+  activeVariant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/calendar/RLACalendar.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { CalendarProps } from "./calendar"
+import calendarTheme from "./calendar.theme"
+
+
+const calendar = scv(calendarTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CalendarProps
+
+const classes = resolveClasses(calendar, {}, useUi("calendar", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/calendar/calendar.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createCalendarTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createCalendarTheme()

package/src/components/callout/RLACallout.astro

@@ -0,0 +1,113 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { CalloutProps } from "./callout"
+import { resolveTheme } from "../../utils/resolveTheme"
+import calloutThemeDefault, { createCalloutTheme } from "./callout.theme"
+const calloutTheme = resolveTheme(calloutThemeDefault, createCalloutTheme)
+import RLAAvatar from "../avatar/RLAAvatar.astro"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+const callout = scv(calloutTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  title,
+  description,
+  icon,
+  avatar,
+  actions,
+  close,
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CalloutProps
+
+const colorToIcon: Record<string, string | undefined> = {
+  error: "circleX",
+  warning: "alertTriangle",
+  info: "info",
+  success: "circleCheck",
+  primary: undefined,
+  secondary: undefined,
+  commentary: undefined,
+  ideation: undefined,
+  source: undefined,
+  neutral: undefined
+}
+
+const resolvedColor = (variant === "destructive") ? "error" : color
+const resolvedVariant = (variant === "solid" || variant === "outline" || variant === "soft" || variant === "subtle") ? variant : "solid"
+const resolvedIcon = icon ?? colorToIcon[resolvedColor]
+const hasTitleRow = !!(title || Astro.slots.has("title") || Astro.slots.has("header") || avatar || close || Astro.slots.has("close"))
+
+const classes = resolveClasses(callout, {
+  variant: resolvedVariant,
+  color: resolvedColor as any,
+  theme
+}, useUi("callout", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role="alert"
+  {...rest}
+>
+  <slot name="icon">
+    {resolvedIcon && (
+      <span class={classes.icon} data-slot="icon">
+        <RLAIcon name={resolvedIcon} />
+      </span>
+    )}
+  </slot>
+
+  <div class={classes.body} data-slot="body">
+    {hasTitleRow && (
+      <div class="flex items-center gap-2.5">
+        <slot name="avatar" {...{ ui: classes }}>
+          {avatar && (
+            <RLAAvatar
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)}
+              size={classes.avatarSize as any}
+              class={classes.avatar}
+              data-slot="avatar"
+            />
+          )}
+        </slot>
+
+        {(title || Astro.slots.has("title")) && (
+          <h5 class={classes.title} data-slot="title">
+            {title}
+            <slot name="title" />
+          </h5>
+        )}
+
+        <slot name="header" />
+
+        <slot name="close">
+          {close && (
+            <button class={classes.close} data-slot="close">
+              <RLAIcon name="close" class="size-4" />
+            </button>
+          )}
+        </slot>
+      </div>
+    )}
+
+    {(description || Astro.slots.has("default")) && (
+      <div class={classes.content} data-slot="content">
+        {description}
+        <slot />
+      </div>
+    )}
+
+    {(actions || Astro.slots.has("actions")) && (
+      <div class={classes.actions} data-slot="actions">
+        <slot name="actions" />
+      </div>
+    )}
+  </div>
+</div>

package/src/components/callout/callout.theme.ts

@@ -0,0 +1,107 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createCalloutTheme = (colors: readonly string[] = colorConfig.colors) => {
+  const colorVariants: Record<string, { root: string }> = { neutral: { root: "" } }
+  for (const c of colors) {
+    colorVariants[c] = { root: "" }
+  }
+
+  return defineTheme({
+    slots: ["root", "body", "icon", "title", "content", "avatar", "avatarSize", "actions", "close"],
+    base: {
+      root: "relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start",
+      body: "flex flex-col gap-2.5 flex-1 min-w-0",
+      icon: "shrink-0 size-6 inline-flex items-center justify-center",
+      title: "text-sm font-bold",
+      content: "text-sm opacity-90 leading-relaxed [&>:first-child]:mt-0 [&>:last-child]:mb-0",
+      avatar: "shrink-0",
+      avatarSize: "2xl",
+      actions: "flex flex-wrap gap-1.5",
+      close: "p-0 ml-auto"
+    },
+    variants: {
+      variant: {
+        solid: { root: "" },
+        outline: { root: "" },
+        soft: { root: "" },
+        subtle: { root: "" }
+      },
+      color: colorVariants,
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)] text-white"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: "rl-color-" + color + " bg-[var(--rl-bg)]/10 text-[var(--rl-text)]"
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root:
+            "rl-color-" +
+            color +
+            " bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+        }
+      })),
+      {
+        color: "neutral",
+        variant: "solid",
+        classNames: {
+          root: "text-inverted bg-inverted"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "outline",
+        classNames: {
+          root: "text-highlighted bg-default ring ring-inset ring-default"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "soft",
+        classNames: {
+          root: "text-highlighted bg-elevated/50"
+        }
+      },
+      {
+        color: "neutral",
+        variant: "subtle",
+        classNames: {
+          root: "text-highlighted bg-elevated/50 ring ring-inset ring-accented"
+        }
+      }
+    ],
+    defaultVariants: {
+      color: "primary",
+      variant: "solid"
+    }
+  })
+}
+
+export default createCalloutTheme()

package/src/components/callout/callout.ts

@@ -0,0 +1,37 @@
+import type { Theme, ThemeColor } from "../../types/component"
+
+export interface CalloutProps {
+  /**
+   * The visual variant of the callout.
+   */
+  variant?: "default" | "destructive" | "outline" | "solid" | "soft" | "subtle"
+  /**
+   * The color scheme of the callout.
+   */
+  color?: ThemeColor
+  /**
+   * The main title text of the callout.
+   */
+  title?: string
+  /**
+   * The secondary description text of the callout.
+   */
+  description?: string
+  /**
+   * An optional leading icon.
+   */
+  icon?: string
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/card/RLACard.astro

@@ -0,0 +1,77 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { CardProps } from "./card"
+import cardTheme from "./card.theme"
+
+
+const card = scv(cardTheme)
+
+const {
+  title,
+  description,
+  mediaSrc,
+  href,
+  overlay = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as CardProps
+
+const classes = resolveClasses(card, {
+  interactive: !!href,
+  overlay
+}, useUi("card", uiProp), className)
+
+const Tag = href ? "a" : "div"
+---
+<Tag
+  class={classes.root}
+  data-slot="card-root"
+  {...(Tag === "a" ? { href } : {})}
+  {...(Tag === "a" ? { style: "text-decoration: none" } : {})}
+  {...rest}
+>
+  <slot name="media">
+    {mediaSrc && (
+      <div class={classes.media} data-slot="media">
+        <img src={mediaSrc} alt={title || ""} class="h-full w-full object-cover" />
+      </div>
+    )}
+  </slot>
+
+  {overlay ? (
+    <div class={classes.overlay} data-slot="overlay">
+      {title && <div class={classes.title} data-slot="title">{title}</div>}
+      {description && <div class={classes.description} data-slot="description">{description}</div>}
+      <slot />
+    </div>
+  ) : (
+    <>
+      <slot name="header">
+        {(title || description || Astro.slots.has("title") || Astro.slots.has("description")) && (
+          <div class={classes.header} data-slot="header">
+            {title && <div class={classes.title} data-slot="title">{title}</div>}
+            <slot name="title" />
+            
+            {description && <div class={classes.description} data-slot="description">{description}</div>}
+            <slot name="description" />
+          </div>
+        )}
+      </slot>
+
+      {Astro.slots.has("default") && (
+        <div class={classes.body} data-slot="body">
+          <slot />
+        </div>
+      )}
+
+      {Astro.slots.has("footer") && (
+        <div class={classes.footer} data-slot="footer">
+          <slot name="footer" />
+        </div>
+      )}
+    </>
+  )}
+</Tag>

package/src/components/card/RLVCard.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed, useSlots, useAttrs } from "vue"
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { CardProps } from "./card"
+import cardThemeDefault from "./card.theme"
+
+defineOptions({ name: "RLVCard" })
+
+const attrs = useAttrs()
+const slots = useSlots()
+const cardScv = scv(cardThemeDefault)
+
+const props = withDefaults(defineProps<CardProps>(), {
+  overlay: false
+})
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    cardScv,
+    {
+      interactive: !!props.href,
+      overlay: props.overlay
+    },
+    useUi("card", props.ui),
+    props.class
+  )
+)
+
+const Tag = computed(() => (props.href ? "a" : "div"))
+</script>
+
+<template>
+  <component
+    :is="Tag"
+    v-bind="attrs"
+    :href="href"
+    :class="resolvedClasses.root"
+    data-slot="card-root"
+    :style="href ? { textDecoration: 'none' } : undefined"
+  >
+    <slot name="media">
+      <div v-if="mediaSrc" :class="resolvedClasses.media" data-slot="media">
+        <img :src="mediaSrc" :alt="title || ''" class="h-full w-full object-cover" />
+      </div>
+    </slot>
+
+    <template v-if="overlay">
+      <div :class="resolvedClasses.overlay" data-slot="overlay">
+        <div v-if="title" :class="resolvedClasses.title" data-slot="title">{{ title }}</div>
+        <div v-if="description" :class="resolvedClasses.description" data-slot="description">
+          {{ description }}
+        </div>
+        <slot />
+      </div>
+    </template>
+
+    <template v-else>
+      <slot name="header">
+        <div
+          v-if="title || description || slots.title || slots.description"
+          :class="resolvedClasses.header"
+          data-slot="header"
+        >
+          <div v-if="title" :class="resolvedClasses.title" data-slot="title">{{ title }}</div>
+          <slot name="title" />
+
+          <div v-if="description" :class="resolvedClasses.description" data-slot="description">
+            {{ description }}
+          </div>
+          <slot name="description" />
+        </div>
+      </slot>
+
+      <div v-if="slots.default" :class="resolvedClasses.body" data-slot="body">
+        <slot />
+      </div>
+
+      <div v-if="slots.footer" :class="resolvedClasses.footer" data-slot="footer">
+        <slot name="footer" />
+      </div>
+    </template>
+  </component>
+</template>

package/src/components/card/card.theme.ts

@@ -0,0 +1,50 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createCardTheme = () =>
+  defineTheme({
+    slots: ["root", "header", "title", "description", "body", "footer", "overlay", "media"],
+    base: {
+      root: "rounded-lg overflow-hidden",
+      header: "p-4 sm:px-6 border-default",
+      title: "text-highlighted font-semibold",
+      description: "mt-1 text-muted-foreground text-sm",
+      body: "p-4 sm:p-6 border-default",
+      footer: "p-4 sm:px-6 border-default",
+      overlay:
+        "absolute inset-0 z-10 flex flex-col justify-end p-4 bg-gradient-to-t from-black/80 to-transparent text-white",
+      media: "relative border-default"
+    },
+    variants: {
+      variant: {
+        solid: {
+          root: "bg-inverted text-inverted",
+          title: "text-inverted",
+          description: "text-dimmed"
+        },
+        outline: {
+          root: "bg-default border border-default divide-y divide-default"
+        },
+        soft: {
+          root: "bg-elevated/50 divide-y divide-default"
+        },
+        subtle: {
+          root: "bg-elevated/50 border border-default divide-y divide-default"
+        }
+      },
+      interactive: {
+        true: { root: "hover:shadow-md cursor-pointer" },
+        false: { root: "" }
+      },
+      overlay: {
+        true: { root: "relative" },
+        false: {}
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      interactive: false,
+      overlay: false
+    }
+  })
+
+export default createCardTheme()