@rimelight/ui 0.0.42 → 0.0.44

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

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

package/src/components/callout/RLACallout.astro

@@ -1,15 +1,9 @@
 ---
-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 { calloutTheme } from "./callout.theme"
 import RLAAvatar from "../avatar/RLAAvatar.astro"
 import RLAIcon from "../icon/RLAIcon.astro"
 
-const callout = scv(calloutTheme)
 
 const {
   variant = "solid",
@@ -21,16 +15,14 @@ const {
   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",
+  error: "i-rl-circleCheck",
+  warning: "i-rl-alertTriangle",
+  info: "i-rl-info",
+  success: "i-rl-circleCheck",
   primary: undefined,
   secondary: undefined,
   commentary: undefined,
@@ -44,16 +36,17 @@ const resolvedVariant = (variant === "solid" || variant === "outline" || variant
 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, {
+const classes = calloutTheme({
+  ...Astro.props,
   variant: resolvedVariant,
-  color: resolvedColor as any,
-  theme
-}, useUi("callout", uiProp), className)
+  color: resolvedColor as any
+})
 ---
 <div
   class={classes.root}
   data-slot="root"
   role="alert"
+  data-theme={theme}
   {...rest}
 >
   <slot name="icon">
@@ -90,7 +83,7 @@ const classes = resolveClasses(callout, {
         <slot name="close">
           {close && (
             <button class={classes.close} data-slot="close">
-              <RLAIcon name="close" class="size-4" />
+              <RLAIcon name="i-rl-close" class="size-4" />
             </button>
           )}
         </slot>

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

@@ -1,107 +1,61 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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"
+export const calloutTheme = defineTheme("callout", {
+  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: "bg-[var(--rl-bg)] text-white" },
+      outline: { root: "text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25" },
+      soft: { root: "bg-[var(--rl-bg)]/10 text-[var(--rl-text)]" },
+      subtle: {
+        root: "bg-[var(--rl-bg)]/10 text-[var(--rl-text)] ring ring-inset ring-[var(--rl-border)]/25"
+      }
+    },
+    color: "auto"
+  },
+  compoundVariants: [
+    {
+      color: "neutral",
+      variant: "solid",
+      classNames: {
+        root: "text-inverted bg-inverted"
+      }
     },
-    variants: {
-      variant: {
-        solid: { root: "" },
-        outline: { root: "" },
-        soft: { root: "" },
-        subtle: { root: "" }
-      },
-      color: colorVariants,
-      theme: {
-        light: { root: "rl-light" },
-        dark: { root: "rl-dark" }
+    {
+      color: "neutral",
+      variant: "outline",
+      classNames: {
+        root: "text-highlighted bg-default ring ring-inset ring-default"
       }
     },
-    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"
-        }
+    {
+      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()
+  ],
+  defaultVariants: {
+    color: "primary",
+    variant: "solid"
+  }
+})

package/src/components/callout/callout.ts

@@ -1,4 +1,4 @@
-import type { Theme, ThemeColor } from "../../types/component"
+import type { Theme, ThemeColor } from "../../types"
 
 export interface CalloutProps {
   /**

package/src/components/card/RLACard.astro

@@ -1,77 +1,71 @@
----
-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>
+---
+import type { CardProps } from "./card"
+import { cardTheme } from "./card.theme"
+
+
+
+const {
+  title,
+  description,
+  mediaSrc,
+  href,
+  overlay = false,
+  ...rest
+} = Astro.props as CardProps
+
+const classes = cardTheme({
+  ...Astro.props,
+  interactive: !!href
+})
+
+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/RLSCard.tsx

@@ -0,0 +1,116 @@
+import { createMemo, splitProps, type Component, type JSX } from "solid-js"
+import type { CardProps } from "./card"
+import { cardTheme } from "./card.theme"
+
+export interface RLSCardProps extends CardProps {
+  children?: JSX.Element
+  header?: JSX.Element
+  footer?: JSX.Element
+  media?: JSX.Element
+}
+
+const RLSCard: Component<RLSCardProps> = (allProps) => {
+  const [props, rest] = splitProps(allProps, [
+    "title",
+    "description",
+    "mediaSrc",
+    "href",
+    "overlay",
+    "ui",
+    "class",
+    "children",
+    "header",
+    "footer",
+    "media"
+  ])
+
+  const resolvedClasses = createMemo(() =>
+    cardTheme({
+      interactive: !!props.href,
+      overlay: !!props.overlay,
+      ui: props.ui,
+      class: props.class
+    })
+  )
+
+  const content = () => (
+    <>
+      {props.media ? (
+        props.media
+      ) : props.mediaSrc ? (
+        <div class={resolvedClasses().media} data-slot="media">
+          <img src={props.mediaSrc} alt={props.title || ""} class="h-full w-full object-cover" />
+        </div>
+      ) : null}
+
+      {props.overlay ? (
+        <div class={resolvedClasses().overlay} data-slot="overlay">
+          {props.title ? (
+            <div class={resolvedClasses().title} data-slot="title">
+              {props.title}
+            </div>
+          ) : null}
+          {props.description ? (
+            <div class={resolvedClasses().description} data-slot="description">
+              {props.description}
+            </div>
+          ) : null}
+          {props.children}
+        </div>
+      ) : (
+        <>
+          {props.header ? (
+            props.header
+          ) : props.title || props.description ? (
+            <div class={resolvedClasses().header} data-slot="header">
+              {props.title ? (
+                <div class={resolvedClasses().title} data-slot="title">
+                  {props.title}
+                </div>
+              ) : null}
+              {props.description ? (
+                <div class={resolvedClasses().description} data-slot="description">
+                  {props.description}
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+
+          {props.children ? (
+            <div class={resolvedClasses().body} data-slot="body">
+              {props.children}
+            </div>
+          ) : null}
+
+          {props.footer ? (
+            <div class={resolvedClasses().footer} data-slot="footer">
+              {props.footer}
+            </div>
+          ) : null}
+        </>
+      )}
+    </>
+  )
+
+  if (props.href) {
+    return (
+      <a
+        href={props.href}
+        class={resolvedClasses().root}
+        data-slot="card-root"
+        style={{ "text-decoration": "none" }}
+        {...rest}
+      >
+        {content()}
+      </a>
+    )
+  }
+
+  return (
+    <div class={resolvedClasses().root} data-slot="card-root" {...rest}>
+      {content()}
+    </div>
+  )
+}
+
+export default RLSCard

package/src/components/card/RLVCard.vue

@@ -1,31 +1,23 @@
 <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"
+import { cardTheme } 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
-  )
+  cardTheme({
+    interactive: !!props.href,
+    overlay: props.overlay,
+    class: props.class
+  })
 )
 
 const Tag = computed(() => (props.href ? "a" : "div"))

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

@@ -1,50 +1,47 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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"
-        }
+export const cardTheme = defineTheme("card", {
+  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 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-border"
       },
-      interactive: {
-        true: { root: "hover:shadow-md cursor-pointer" },
-        false: { root: "" }
+      soft: {
+        root: "bg-elevated/50 divide-y divide-border"
       },
-      overlay: {
-        true: { root: "relative" },
-        false: {}
+      subtle: {
+        root: "bg-elevated/50 border border-default divide-y divide-border"
       }
     },
-    defaultVariants: {
-      variant: "outline",
-      interactive: false,
-      overlay: false
+    interactive: {
+      true: { root: "hover:shadow-md cursor-pointer" },
+      false: { root: "" }
+    },
+    overlay: {
+      true: { root: "relative" },
+      false: {}
     }
-  })
-
-export default createCardTheme()
+  },
+  defaultVariants: {
+    variant: "outline",
+    interactive: false,
+    overlay: false
+  }
+})