@rimelight/ui 0.0.32 → 0.0.33

package/src/components/astro/RLAPageHeader.astro

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

package/src/components/astro/RLAPageSection.astro

@@ -2,10 +2,14 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { PageSectionProps } from "../../types"
-import pageSectionTheme from "../../themes/page-section.theme"
+import pageSectionThemeDefault, { createPageSectionTheme } from "../../themes/page-section.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
 import RLAIcon from "./RLAIcon.astro"
 import RLAButton from "./RLAButton.astro"
 
+const uiConfig = getUIConfig()
+const pageSectionTheme = uiConfig.colors ? createPageSectionTheme() : pageSectionThemeDefault
+
 const pageSection = scv(pageSectionTheme)
 
 const {

package/src/components/astro/RLAPagination.astro

@@ -1,94 +1,98 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PaginationProps } from "../../types"
-import paginationTheme from "../../themes/pagination.theme"
-
-const pagination = scv(paginationTheme)
-
-const {
-  currentPage = 1,
-  totalPages = 1,
-  baseUrl = "?page=",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PaginationProps
-
-const classes = resolveClasses(pagination, {}, useUi("pagination", uiProp), className)
-
-const getPageNumbers = () => {
-  const pages: (number | "ellipsis")[] = []
-  const maxVisible = 5
-  if (totalPages <= maxVisible) {
-    for (let i = 1; i <= totalPages; i++) pages.push(i)
-  } else {
-    pages.push(1)
-    if (currentPage > 3) pages.push("ellipsis")
-    const start = Math.max(2, currentPage - 1)
-    const end = Math.min(totalPages - 1, currentPage + 1)
-    for (let i = start; i <= end; i++) {
-      if (!pages.includes(i)) pages.push(i)
-    }
-    if (currentPage < totalPages - 2) pages.push("ellipsis")
-    if (!pages.includes(totalPages)) pages.push(totalPages)
-  }
-  return pages
-}
-
-const pages = getPageNumbers()
----
-<nav class={classes.root} data-slot="pagination-root" aria-label="pagination" {...rest}>
-  <ul class={classes.list} data-slot="list">
-    <li class={classes.item}>
-      <a
-        href={currentPage > 1 ? `${baseUrl}${currentPage - 1}` : undefined}
-        class={classes.link}
-        aria-label="Go to previous page"
-        aria-disabled={currentPage === 1}
-        style={currentPage === 1 ? "pointer-events: none; opacity: 0.5;" : ""}
-      >
-        <span class="i-lucide-chevron-left size-4" aria-hidden="true" />
-      </a>
-    </li>
-
-    {pages.map((p) => {
-      if (p === "ellipsis") {
-        return (
-          <li class={classes.item}>
-            <span class={classes.ellipsis} aria-hidden="true">
-              &hellip;
-            </span>
-          </li>
-        )
-      }
-
-      const isActive = p === currentPage
-      const itemClasses = resolveClasses(pagination, { active: isActive }, useUi("pagination", uiProp))
-
-      return (
-        <li class={classes.item}>
-          <a
-            href={`${baseUrl}${p}`}
-            class={itemClasses.link}
-            aria-current={isActive ? "page" : undefined}
-          >
-            {p}
-          </a>
-        </li>
-      )
-    })}
-
-    <li class={classes.item}>
-      <a
-        href={currentPage < totalPages ? `${baseUrl}${currentPage + 1}` : undefined}
-        class={classes.link}
-        aria-label="Go to next page"
-        aria-disabled={currentPage === totalPages}
-        style={currentPage === totalPages ? "pointer-events: none; opacity: 0.5;" : ""}
-      >
-        <span class="i-lucide-chevron-right size-4" aria-hidden="true" />
-      </a>
-    </li>
-  </ul>
-</nav>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PaginationProps } from "../../types"
+import paginationThemeDefault, { createPaginationTheme } from "../../themes/pagination.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const paginationTheme = uiConfig.colors ? createPaginationTheme() : paginationThemeDefault
+
+const pagination = scv(paginationTheme)
+
+const {
+  currentPage = 1,
+  totalPages = 1,
+  baseUrl = "?page=",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PaginationProps
+
+const classes = resolveClasses(pagination, {}, useUi("pagination", uiProp), className)
+
+const getPageNumbers = () => {
+  const pages: (number | "ellipsis")[] = []
+  const maxVisible = 5
+  if (totalPages <= maxVisible) {
+    for (let i = 1; i <= totalPages; i++) pages.push(i)
+  } else {
+    pages.push(1)
+    if (currentPage > 3) pages.push("ellipsis")
+    const start = Math.max(2, currentPage - 1)
+    const end = Math.min(totalPages - 1, currentPage + 1)
+    for (let i = start; i <= end; i++) {
+      if (!pages.includes(i)) pages.push(i)
+    }
+    if (currentPage < totalPages - 2) pages.push("ellipsis")
+    if (!pages.includes(totalPages)) pages.push(totalPages)
+  }
+  return pages
+}
+
+const pages = getPageNumbers()
+---
+<nav class={classes.root} data-slot="pagination-root" aria-label="pagination" {...rest}>
+  <ul class={classes.list} data-slot="list">
+    <li class={classes.item}>
+      <a
+        href={currentPage > 1 ? `${baseUrl}${currentPage - 1}` : undefined}
+        class={classes.link}
+        aria-label="Go to previous page"
+        aria-disabled={currentPage === 1}
+        style={currentPage === 1 ? "pointer-events: none; opacity: 0.5;" : ""}
+      >
+        <span class="i-lucide-chevron-left size-4" aria-hidden="true" />
+      </a>
+    </li>
+
+    {pages.map((p) => {
+      if (p === "ellipsis") {
+        return (
+          <li class={classes.item}>
+            <span class={classes.ellipsis} aria-hidden="true">
+              &hellip;
+            </span>
+          </li>
+        )
+      }
+
+      const isActive = p === currentPage
+      const itemClasses = resolveClasses(pagination, { active: isActive }, useUi("pagination", uiProp))
+
+      return (
+        <li class={classes.item}>
+          <a
+            href={`${baseUrl}${p}`}
+            class={itemClasses.link}
+            aria-current={isActive ? "page" : undefined}
+          >
+            {p}
+          </a>
+        </li>
+      )
+    })}
+
+    <li class={classes.item}>
+      <a
+        href={currentPage < totalPages ? `${baseUrl}${currentPage + 1}` : undefined}
+        class={classes.link}
+        aria-label="Go to next page"
+        aria-disabled={currentPage === totalPages}
+        style={currentPage === totalPages ? "pointer-events: none; opacity: 0.5;" : ""}
+      >
+        <span class="i-lucide-chevron-right size-4" aria-hidden="true" />
+      </a>
+    </li>
+  </ul>
+</nav>

package/src/components/astro/RLAPassword.astro

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

package/src/components/astro/RLAPhoneMockup.astro

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

package/src/components/astro/RLAPinInput.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PinInputProps } from "../../types"
+import pinInputThemeDefault, { createPinInputTheme } from "../../themes/pin-input.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const pinInputTheme = uiConfig.colors ? createPinInputTheme() : pinInputThemeDefault
+
+const pinInput = scv(pinInputTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PinInputProps
+
+const classes = resolveClasses(pinInput, {}, useUi("pinInput", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAPlaceholder.astro

@@ -1,41 +1,45 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PlaceholderProps } from "../../types"
-import placeholderTheme from "../../themes/placeholder.theme"
-
-const placeholder = scv(placeholderTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PlaceholderProps
-
-const classes = resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
----
-
-<div class={classes.base} {...rest}>
-  <svg class={classes.svg}>
-    <defs>
-      <pattern
-        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
-        x="0"
-        y="0"
-        width="10"
-        height="10"
-        patternUnits="userSpaceOnUse"
-      >
-        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
-      </pattern>
-    </defs>
-    <rect
-      stroke="none"
-      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
-      width="100%"
-      height="100%"
-    />
-  </svg>
-
-  <slot />
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PlaceholderProps } from "../../types"
+import placeholderThemeDefault, { createPlaceholderTheme } from "../../themes/placeholder.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const placeholderTheme = uiConfig.colors ? createPlaceholderTheme() : placeholderThemeDefault
+
+const placeholder = scv(placeholderTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PlaceholderProps
+
+const classes = resolveClasses(placeholder, {}, useUi("placeholder", uiProp), className)
+---
+
+<div class={classes.base} {...rest}>
+  <svg class={classes.svg}>
+    <defs>
+      <pattern
+        id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+        x="0"
+        y="0"
+        width="10"
+        height="10"
+        patternUnits="userSpaceOnUse"
+      >
+        <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
+      </pattern>
+    </defs>
+    <rect
+      stroke="none"
+      fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+      width="100%"
+      height="100%"
+    />
+  </svg>
+
+  <slot />
+</div>

package/src/components/astro/RLAPopover.astro

@@ -1,31 +1,35 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PopoverProps } from "../../types"
-import popoverTheme from "../../themes/popover.theme"
-
-const popover = scv(popoverTheme)
-
-const {
-  triggerLabel,
-  placement = "bottom",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PopoverProps
-
-const classes = resolveClasses(popover, {
-  placement
-}, useUi("popover", uiProp), className)
----
-<div class={classes.root} data-slot="popover-container" {...rest}>
-  <div class={classes.trigger} data-slot="trigger" tabindex="0">
-    <slot name="trigger">
-      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
-    </slot>
-  </div>
-
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PopoverProps } from "../../types"
+import popoverThemeDefault, { createPopoverTheme } from "../../themes/popover.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const popoverTheme = uiConfig.colors ? createPopoverTheme() : popoverThemeDefault
+
+const popover = scv(popoverTheme)
+
+const {
+  triggerLabel,
+  placement = "bottom",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PopoverProps
+
+const classes = resolveClasses(popover, {
+  placement
+}, useUi("popover", uiProp), className)
+---
+<div class={classes.root} data-slot="popover-container" {...rest}>
+  <div class={classes.trigger} data-slot="trigger" tabindex="0">
+    <slot name="trigger">
+      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
+    </slot>
+  </div>
+
+  <div class={classes.content} data-slot="content">
+    <slot />
+  </div>
+</div>

package/src/components/astro/RLAPost.astro

@@ -1,19 +1,65 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { PostProps } from "../../types"
-import postThemeDefault from "../../themes/post.theme"
-
-const post = scv(postThemeDefault)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as PostProps
-
-const classes = resolveClasses(post, {}, useUi("post", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PostProps } from "../../types"
+import postThemeDefault, { createPostTheme } from "../../themes/post.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+import Image from "astro/components/Image.astro"
+
+const uiConfig = getUIConfig()
+const postTheme = uiConfig.colors ? createPostTheme() : postThemeDefault
+
+const post = scv(postTheme)
+
+const {
+  title,
+  description,
+  date,
+  image,
+  to,
+  variant = "soft",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PostProps
+
+const classes = resolveClasses(post, { variant }, useUi("post", uiProp), className);
+
+const Tag = to ? "a" : "div";
+const formattedDate = date ? (date instanceof Date ? date.toLocaleDateString() : date) : null;
+---
+<Tag class={classes.root} data-slot="root" {...(to ? { href: to } : {})} {...rest}>
+  <slot name="image" {...{ ui: classes }}>
+    {image && (
+      <div class={classes.imageWrapper} data-slot="image-wrapper">
+        {typeof image === 'string' ? (
+           <img src={image} alt={title} class={classes.image} data-slot="image" />
+        ) : (
+           <Image src={image} alt={title || ""} class={classes.image} data-slot="image" />
+        )}
+      </div>
+    )}
+  </slot>
+
+  <div class={classes.content} data-slot="content">
+    <slot name="title" {...{ ui: classes }}>
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+    </slot>
+
+    <slot name="description" {...{ ui: classes }}>
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+    </slot>
+
+    <slot name="date" {...{ ui: classes }}>
+      {formattedDate && <time class={classes.date} data-slot="date">{formattedDate}</time>}
+    </slot>
+
+    <slot />
+  </div>
+
+  {Astro.slots.has("footer") && (
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" {...{ ui: classes }} />
+    </div>
+  )}
+</Tag>

package/src/components/astro/RLAPosts.astro

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