@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLAPagination.astro

@@ -1,94 +1,96 @@
----
-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:list={[classes.link, currentPage === 1 && "pointer-events-none opacity-50"]}
+        aria-label="Go to previous page"
+        aria-disabled={currentPage === 1}
+      >
+        <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:list={[classes.link, currentPage === totalPages && "pointer-events-none opacity-50"]}
+        aria-label="Go to next page"
+        aria-disabled={currentPage === totalPages}
+      >
+        <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/RLAPricingPlan.astro

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

package/src/components/astro/RLAPricingTable.astro

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

package/src/components/astro/RLAProgress.astro

@@ -27,6 +27,7 @@ const classes = resolveClasses(progress, {
 }, useUi("progress", uiProp), className)
 
 const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+const id = `progress-${Math.random().toString(36).substring(2, 9)}`
 ---
 <div
   class={classes.root}
@@ -38,8 +39,13 @@ const percentage = Math.min(100, Math.max(0, (value / max) * 100))
   {...rest}
 >
   <div
-    class={classes.indicator}
+    class:list={[classes.indicator, id]}
     data-slot="indicator"
-    style={{ transform: `translateX(-${100 - percentage}%)` }}
   />
 </div>
+
+<style is:inline set:html={`
+  .${id} {
+    transform: translateX(-${100 - percentage}%) !important;
+  }
+`} />