@rimelight/ui 0.0.32 → 0.0.34

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)
+---
+<div class:list={[classes.root]} data-slot="root" {...rest}>
+  <svg viewBox={`0 0 100 ${(1 / ratio) * 100}`} class="w-full h-auto pointer-events-none block" aria-hidden="true"></svg>
+  <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/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

@@ -1,19 +1,23 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { BrowserMockupProps } from "../../types"
-import browserMockupThemeDefault from "../../themes/browser-mockup.theme"
-
-const browserMockup = scv(browserMockupThemeDefault)
-
-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 />
+---
+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>