@rimelight/ui 0.0.31 → 0.0.33

package/src/components/astro/RLAAlert.astro

@@ -1,60 +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,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as AlertProps
-
-const isIcon = !!(icon || Astro.slots.has("icon"))
-
-const classes = resolveClasses(alert, {
-  variant,
-  color,
-  hasIcon: isIcon,
-}, 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

@@ -0,0 +1,23 @@
+---
+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/aspectRatio.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

@@ -0,0 +1,23 @@
+---
+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/avatarGroup.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,31 +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",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BadgeProps
-
-const classes = resolveClasses(badge, {
-  variant,
-  color,
-  size,
-  shape
-}, 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

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

package/src/components/astro/RLABreadcrumb.astro

@@ -1,44 +1,48 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BreadcrumbProps } from "../../types"
-import breadcrumbTheme from "../../themes/breadcrumb.theme"
-
-const breadcrumb = scv(breadcrumbTheme)
-
-const {
-  items,
-  separatorIcon = "i-lucide-chevron-right",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as BreadcrumbProps
-
-const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), className)
----
-<nav class={classes.root} data-slot="breadcrumb-root" {...rest}>
-  <ol class={classes.list} data-slot="list">
-    {items ? (
-      items.map((item, idx) => (
-        <li class={classes.item} data-slot="item">
-          {item.href ? (
-            <a href={item.href} class={classes.link} data-slot="link">
-              {item.label}
-            </a>
-          ) : (
-            <span class={classes.page} data-slot="page">
-              {item.label}
-            </span>
-          )}
-          {idx < items.length - 1 && (
-            <span class={classes.separator} data-slot="separator" aria-hidden="true">
-              <span class={separatorIcon} />
-            </span>
-          )}
-        </li>
-      ))
-    ) : (
-      <slot />
-    )}
-  </ol>
-</nav>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BreadcrumbProps } from "../../types"
+import breadcrumbThemeDefault, { createBreadcrumbTheme } from "../../themes/breadcrumb.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const breadcrumbTheme = uiConfig.colors ? createBreadcrumbTheme() : breadcrumbThemeDefault
+
+const breadcrumb = scv(breadcrumbTheme)
+
+const {
+  items,
+  separatorIcon = "i-lucide-chevron-right",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BreadcrumbProps
+
+const classes = resolveClasses(breadcrumb, {}, useUi("breadcrumb", uiProp), className)
+---
+<nav class={classes.root} data-slot="breadcrumb-root" {...rest}>
+  <ol class={classes.list} data-slot="list">
+    {items ? (
+      items.map((item, idx) => (
+        <li class={classes.item} data-slot="item">
+          {item.href ? (
+            <a href={item.href} class={classes.link} data-slot="link">
+              {item.label}
+            </a>
+          ) : (
+            <span class={classes.page} data-slot="page">
+              {item.label}
+            </span>
+          )}
+          {idx < items.length - 1 && (
+            <span class={classes.separator} data-slot="separator" aria-hidden="true">
+              <span class={separatorIcon} />
+            </span>
+          )}
+        </li>
+      ))
+    ) : (
+      <slot />
+    )}
+  </ol>
+</nav>

package/src/components/astro/RLABrowserMockup.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { BrowserMockupProps } from "../../types"
+import browserMockupThemeDefault, { createBrowserMockupTheme } from "../../themes/browser-mockup.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const browserMockupTheme = uiConfig.colors ? createBrowserMockupTheme() : browserMockupThemeDefault
+
+const browserMockup = scv(browserMockupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as BrowserMockupProps
+
+const classes = resolveClasses(browserMockup, {}, useUi("browserMockup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>