@rimelight/ui 0.0.32 → 0.0.33

package/src/components/astro/RLAAlert.astro

@@ -1,62 +1,93 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AlertProps } from "../../types"
-import alertThemeDefault, { createAlertTheme } from "../../themes/alert.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const alertTheme = uiConfig.colors ? createAlertTheme(uiConfig.colors) : alertThemeDefault
-const alert = scv(alertTheme)
-
-const {
-  variant = "default",
-  color = "primary",
-  title,
-  description,
-  icon,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AlertProps
-
-const isIcon = !!(icon || Astro.slots.has("icon"))
-
-const classes = resolveClasses(alert, {
-  variant,
-  color,
-  hasIcon: isIcon,
-  theme
-}, useUi("alert", uiProp), className)
----
-<div
-  class={classes.root}
-  data-slot="root"
-  role="alert"
-  {...rest}
->
-  <slot name="icon">
-    {icon && (
-      <span class={classes.icon} data-slot="icon">
-        <span class={cx(icon)} aria-hidden="true" />
-      </span>
-    )}
-  </slot>
-
-  <div class={classes.content} data-slot="content">
-    {title && (
-      <h5 class={classes.title} data-slot="title">
-        {title}
-      </h5>
-    )}
-    <slot name="title" />
-
-    {description && (
-      <div class={classes.description} data-slot="description">
-        {description}
-      </div>
-    )}
-    <slot />
-  </div>
-</div>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AlertProps } from "../../types"
+import alertThemeDefault, { createAlertTheme } from "../../themes/alert.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import RLAAvatar from "./RLAAvatar.astro"
+
+const uiConfig = getUIConfig()
+const alertTheme = uiConfig.colors ? createAlertTheme(uiConfig.colors) : alertThemeDefault
+const alert = scv(alertTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  title,
+  description,
+  icon,
+  avatar,
+  actions,
+  close,
+  orientation = "horizontal",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AlertProps
+
+const isIcon = !!(icon || Astro.slots.has("icon"))
+
+const classes = resolveClasses(alert, {
+  variant,
+  color,
+  orientation,
+  title: !!(title || Astro.slots.has("title")),
+  theme
+}, useUi("alert", uiProp), className)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role="alert"
+  {...rest}
+>
+  <slot name="icon">
+    {icon && (
+      <span class={classes.icon} data-slot="icon">
+        <span class={cx(icon)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  <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>
+
+  <div class={classes.wrapper} data-slot="wrapper">
+    {(title || Astro.slots.has("title")) && (
+      <h5 class={classes.title} data-slot="title">
+        {title}
+        <slot name="title" />
+      </h5>
+    )}
+
+    {(description || Astro.slots.has("default")) && (
+      <div class={classes.description} data-slot="description">
+        {description}
+        <slot />
+      </div>
+    )}
+
+    {(actions || Astro.slots.has("actions")) && (
+      <div class={classes.actions} data-slot="actions">
+        <slot name="actions" />
+      </div>
+    )}
+  </div>
+
+  <slot name="close" {...{ ui: classes }}>
+    {close && (
+      <button class={classes.close} data-slot="close">
+        <span class="i-lucide-x size-4" />
+      </button>
+    )}
+  </slot>
+</div>

package/src/components/astro/RLAApp.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AppProps } from "../../types"
-import appThemeDefault from "../../themes/app.theme"
-
-const app = scv(appThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AppProps
-
-const classes = resolveClasses(app, {}, useUi("app", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AppProps } from "../../types"
+import appThemeDefault, { createAppTheme } from "../../themes/app.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const appTheme = uiConfig.colors ? createAppTheme() : appThemeDefault
+
+const app = scv(appTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AppProps
+
+const classes = resolveClasses(app, {}, useUi("app", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAAspectRatio.astro

@@ -1,23 +1,27 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AspectRatioProps } from "../../types"
-import aspectRatioTheme from "../../themes/aspect-ratio.theme"
-
-const aspectRatio = scv(aspectRatioTheme)
-
-const {
-  ratio = 1,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AspectRatioProps
-
-const classes = resolveClasses(aspectRatio, {}, useUi("aspectRatio", uiProp), className)
-const paddingBottom = `${(1 / ratio) * 100}%`
----
-<div class={classes.root} data-slot="root" style={{ paddingBottom }} {...rest}>
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AspectRatioProps } from "../../types"
+import aspectRatioThemeDefault, { createAspectRatioTheme } from "../../themes/aspect-ratio.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const aspectRatioTheme = uiConfig.colors ? createAspectRatioTheme() : aspectRatioThemeDefault
+
+const aspectRatio = scv(aspectRatioTheme)
+
+const {
+  ratio = 1,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AspectRatioProps
+
+const classes = resolveClasses(aspectRatio, {}, useUi("aspectRatio", uiProp), className)
+const paddingBottom = `${(1 / ratio) * 100}%`
+---
+<div class={classes.root} data-slot="root" style={{ paddingBottom }} {...rest}>
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAAudio.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AudioProps } from "../../types"
-import audioThemeDefault from "../../themes/audio.theme"
-
-const audio = scv(audioThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AudioProps
-
-const classes = resolveClasses(audio, {}, useUi("audio", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AudioProps } from "../../types"
+import audioThemeDefault, { createAudioTheme } from "../../themes/audio.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const audioTheme = uiConfig.colors ? createAudioTheme() : audioThemeDefault
+
+const audio = scv(audioTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AudioProps
+
+const classes = resolveClasses(audio, {}, useUi("audio", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLAAvatar.astro

@@ -1,56 +1,68 @@
----
-import { scv, cx } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AvatarProps } from "../../types"
-import avatarThemeDefault from "../../themes/avatar.theme"
-
-const avatar = scv(avatarThemeDefault)
-
-const {
-  src,
-  alt = "",
-  fallback,
-  size = "md",
-  badge = false,
-  badgeColor = "success",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarProps
-
-const classes = resolveClasses(avatar, {
-  size,
-  hasBadge: !!badge
-}, useUi("avatar", uiProp), className)
----
-<span
-  class={classes.root}
-  data-slot="root"
-  {...rest}
->
-  <slot>
-    {src ? (
-      <img
-        src={src}
-        alt={alt}
-        class={classes.image}
-        data-slot="image"
-      />
-    ) : (
-      <span class={classes.fallback} data-slot="fallback">
-        <slot name="fallback">
-          {fallback}
-        </slot>
-      </span>
-    )}
-  </slot>
-
-  <slot name="badge">
-    {badge && (
-      <span
-        class={cx(classes.badge, badgeColor && `bg-${badgeColor}-500`)}
-        data-slot="badge"
-      />
-    )}
-  </slot>
-</span>
+---
+import { scv, cx } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AvatarProps } from "../../types"
+import avatarThemeDefault, { createAvatarTheme } from "../../themes/avatar.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const avatarTheme = uiConfig.colors ? createAvatarTheme(uiConfig.colors) : avatarThemeDefault
+
+const avatar = scv(avatarTheme)
+
+const {
+  src,
+  alt = "",
+  fallback,
+  size = "md",
+  badge = false,
+  badgeColor = "success",
+  badgePosition = "bottom-right",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AvatarProps
+
+const classes = resolveClasses(avatar, {
+  size,
+  color: Astro.props.color || "neutral",
+  badgePosition,
+  hasBadge: !!badge
+}, useUi("avatar", uiProp), className)
+---
+<span
+  class={classes.root}
+  data-slot="root"
+  {...rest}
+>
+  <slot>
+    {src ? (
+      <img
+        src={src}
+        alt={alt}
+        class={classes.image}
+        data-slot="image"
+      />
+    ) : (
+      <span class={classes.fallback} data-slot="fallback">
+        <slot name="fallback">
+          {fallback}
+        </slot>
+        {!fallback && !Astro.slots.has("fallback") && (
+          <span class={cx(classes.icon, "i-lucide-user")} aria-hidden="true" />
+        )}
+      </span>
+    )}
+  </slot>
+
+  <slot name="badge">
+    {badge && (
+      <span
+        class={cx(classes.badge, badgeColor && (badgeColor.startsWith('bg-') ? badgeColor : `bg-${badgeColor}-500`))}
+        data-slot="badge"
+      >
+        {typeof badge === 'string' || typeof badge === 'number' ? badge : null}
+      </span>
+    )}
+  </slot>
+</span>

package/src/components/astro/RLAAvatarGroup.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { AvatarGroupProps } from "../../types"
-import avatarGroupTheme from "../../themes/avatar-group.theme"
-
-const avatarGroup = scv(avatarGroupTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AvatarGroupProps
-
-const classes = resolveClasses(avatarGroup, {}, useUi("avatarGroup", uiProp), className)
----
-<div class={classes.root} data-slot="avatar-group" {...rest}>
-  <slot />
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { AvatarGroupProps } from "../../types"
+import avatarGroupThemeDefault, { createAvatarGroupTheme } from "../../themes/avatar-group.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const avatarGroupTheme = uiConfig.colors ? createAvatarGroupTheme() : avatarGroupThemeDefault
+
+const avatarGroup = scv(avatarGroupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as AvatarGroupProps
+
+const classes = resolveClasses(avatarGroup, {}, useUi("avatarGroup", uiProp), className)
+---
+<div class={classes.root} data-slot="avatar-group" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLABadge.astro

@@ -1,33 +1,34 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BadgeProps } from "../../types"
-import badgeThemeDefault, { createBadgeTheme } from "../../themes/badge.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const badgeTheme = uiConfig.colors ? createBadgeTheme(uiConfig.colors) : badgeThemeDefault
-const badge = scv(badgeTheme)
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  shape = "pill",
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BadgeProps
-
-const classes = resolveClasses(badge, {
-  variant,
-  color,
-  size,
-  shape,
-  theme
-}, useUi("badge", uiProp), className)
----
-<span class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</span>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BadgeProps } from "../../types"
+import badgeThemeDefault, { createBadgeTheme } from "../../themes/badge.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const badgeTheme = uiConfig.colors ? createBadgeTheme(uiConfig.colors) : badgeThemeDefault
+const badge = scv(badgeTheme)
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  shape = "pill",
+  label,
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BadgeProps & { label?: string }
+
+const classes = resolveClasses(badge, {
+  variant,
+  color,
+  size,
+  shape,
+  theme
+}, useUi("badge", uiProp), className)
+---
+<span class={classes.root} data-slot="root" {...rest}>
+  <slot>{label}</slot>
+</span>

package/src/components/astro/RLABanner.astro

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BannerProps } from "../../types"
-import bannerThemeDefault from "../../themes/banner.theme"
-
-const banner = scv(bannerThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BannerProps
-
-const classes = resolveClasses(banner, {}, useUi("banner", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BannerProps } from "../../types"
+import bannerThemeDefault, { createBannerTheme } from "../../themes/banner.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const bannerTheme = uiConfig.colors ? createBannerTheme() : bannerThemeDefault
+
+const banner = scv(bannerTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BannerProps
+
+const classes = resolveClasses(banner, {}, useUi("banner", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
 </div>

package/src/components/astro/RLABlogPost.astro

@@ -0,0 +1,7 @@
+---
+import RLAPost from "./RLAPost.astro"
+import type { PostProps } from "../../types"
+
+const props = Astro.props as PostProps
+---
+<RLAPost {...props} />

package/src/components/astro/RLABlogPosts.astro

@@ -0,0 +1,9 @@
+---
+import RLAPosts from "./RLAPosts.astro"
+import type { PostsProps } from "../../types"
+
+const props = Astro.props as PostsProps
+---
+<RLAPosts {...props}>
+  <slot />
+</RLAPosts>