@rimelight/ui 0.0.42 → 0.0.44

package/src/components/page-section/RLAPageSection.astro

@@ -1,20 +1,15 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { PageSectionProps } from "./page-section"
-import pageSectionTheme from "./page-section.theme"
+import { pageSectionTheme } from "./page-section.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 import RLAButton from "../button/RLAButton.astro"
 
 
-const pageSection = scv(pageSectionTheme)
 
 const {
   as = "section",
   variant = "default",
   orientation = "vertical",
-  reverse = false,
   ctaVariant = "solid",
   headline,
   title,
@@ -23,23 +18,21 @@ const {
   links,
   contentVisibility,
   containIntrinsicSize,
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as PageSectionProps;
 
 const resolvedVariant = (variant === "default" || variant === "hero" || variant === "cta") ? variant : "default"
 
-const classes = resolveClasses(pageSection, {
+const classes = pageSectionTheme({
+  ...Astro.props,
   variant: resolvedVariant,
-  orientation,
-  reverse,
-  ...(resolvedVariant === "cta" && { ctaVariant }),
+  ...(resolvedVariant === "cta" && { ctaVariant
+}),
   headline: !!(Astro.slots.has("headline") || headline),
   title: !!(Astro.slots.has("title") || title),
   description: !!(Astro.slots.has("description") || description),
-  body: Astro.slots.has("body")
-}, useUi("pageSection", uiProp), className);
+  body: Astro.slots.has("body"),
+});
 
 const hasDefaultSlot = Astro.slots.has("default");
 const hasContentSlot = Astro.slots.has("content");
@@ -50,7 +43,10 @@ const TitleTag = variant === "hero" ? "h1" : "h2";
 
 <Tag
   data-orientation={orientation}
-  class:list={[classes.root, contentVisibility === "auto" && "rla-visibility-aware"]}
+  class:list={[
+    classes.root,
+    contentVisibility === "auto" && "[content-visibility:auto] [contain-intrinsic-size:var(--rla-contain-intrinsic-size,auto_500px)]"
+  ]}
   style={containIntrinsicSize ? `--rla-contain-intrinsic-size: ${containIntrinsicSize};` : undefined}
   {...rest}
 >

package/src/components/page-section/page-section.theme.ts

@@ -1,189 +1,206 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createPageSectionTheme = () =>
-  defineTheme({
-    slots: [
-      "root",
-      "background",
-      "container",
-      "wrapper",
-      "header",
-      "leading",
-      "leadingIcon",
-      "headline",
-      "title",
-      "description",
-      "body",
-      "footer",
-      "links"
-    ],
-    base: {
-      root: "relative isolate",
-      background: "absolute inset-0 -z-1 overflow-hidden",
-      container:
-        "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl flex flex-col lg:grid",
-      wrapper: "",
-      header: "",
-      leading: "flex items-center mb-6",
-      leadingIcon: "size-10 shrink-0 text-primary",
-      headline: "",
-      title: "text-pretty tracking-tight font-bold",
-      description: "text-muted-foreground",
-      body: "",
-      footer: "",
-      links: "flex flex-wrap"
-    },
-    variants: {
-      variant: {
-        default: {
-          container: "py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
-          headline: "mb-3",
-          title: "text-3xl sm:text-4xl lg:text-5xl text-highlighted",
-          description: "text-base sm:text-lg",
-          body: "mt-8",
-          footer: "mt-8",
-          links: "gap-x-6 gap-y-3"
-        },
-        hero: {
-          container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
-          headline: "mb-4",
-          title: "text-5xl sm:text-7xl text-highlighted",
-          description: "text-lg sm:text-xl/8",
-          leading: "mb-6",
-          body: "mt-10",
-          footer: "mt-10",
-          links: "gap-x-6 gap-y-3"
-        },
-        cta: {
-          root: "rounded-xl overflow-hidden",
-          container:
-            "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl lg:grid py-12 sm:py-24 lg:py-24 gap-8 sm:gap-16",
-          title: "text-3xl sm:text-4xl",
-          description: "text-base sm:text-lg",
-          body: "mt-8",
-          footer: "mt-8",
-          links: "gap-x-6 gap-y-3"
-        }
+export const pageSectionTheme = defineTheme("page-section", {
+  slots: [
+    "root",
+    "background",
+    "container",
+    "wrapper",
+    "header",
+    "leading",
+    "leadingIcon",
+    "headline",
+    "title",
+    "description",
+    "body",
+    "footer",
+    "links"
+  ],
+  base: {
+    root: "relative",
+    background: "absolute inset-0 -z-1 overflow-hidden",
+    container:
+      "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl flex flex-col lg:grid",
+    wrapper: "",
+    header: "",
+    leading: "flex items-center mb-6",
+    leadingIcon: "size-10 shrink-0 text-primary",
+    headline: "",
+    title: "text-pretty tracking-tight font-bold",
+    description: "text-muted",
+    body: "",
+    footer: "",
+    links: "flex flex-wrap"
+  },
+  variants: {
+    variant: {
+      default: {
+        container: "py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16",
+        headline: "mb-3",
+        title: "text-3xl sm:text-4xl lg:text-5xl text-highlighted",
+        description: "text-base sm:text-lg",
+        body: "mt-8",
+        footer: "mt-8",
+        links: "gap-x-6 gap-y-3"
       },
-      ctaVariant: {
-        solid: {
-          root: "bg-inverted text-inverted",
-          description: "text-dimmed"
-        },
-        outline: {
-          root: "bg-default ring ring-default",
-          description: "text-muted"
-        },
-        soft: {
-          root: "bg-elevated/50",
-          description: "text-toned"
-        },
-        subtle: {
-          root: "bg-elevated/50 ring ring-default",
-          description: "text-toned"
-        },
-        naked: {
-          description: "text-muted"
-        }
+      hero: {
+        container: "py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24",
+        headline: "mb-4",
+        title: "text-5xl sm:text-7xl text-highlighted",
+        description: "text-lg sm:text-xl/8",
+        leading: "mb-6",
+        body: "mt-10",
+        footer: "mt-10",
+        links: "gap-x-6 gap-y-3",
+        wrapper: "order-1"
       },
-      orientation: {
-        horizontal: {
-          container: "lg:grid-cols-2 lg:items-center",
-          description: "text-pretty"
-        },
-        vertical: {
-          container: "",
-          headline: "justify-center",
-          leading: "justify-center",
-          title: "text-center",
-          description: "text-center text-balance",
-          links: "justify-center"
-        }
-      },
-      reverse: {
-        true: {
-          wrapper: "order-last"
-        }
-      },
-      headline: {
-        true: {
-          headline: "font-semibold text-primary flex items-center gap-1.5"
-        }
-      },
-      title: {
-        true: {
-          description: "mt-6"
-        }
-      },
-      description: {
-        true: {}
-      },
-      body: {
-        true: {}
+      cta: {
+        root: "rounded-xl overflow-hidden",
+        container:
+          "mx-auto w-full max-w-[1440px] px-xs sm:px-md md:px-xl lg:px-xl lg:grid py-12 sm:py-24 lg:py-24 gap-8 sm:gap-16",
+        title: "text-3xl sm:text-4xl",
+        description: "text-base sm:text-lg",
+        body: "mt-8",
+        footer: "mt-8",
+        links: "gap-x-6 gap-y-3"
       }
     },
-    compoundVariants: [
-      {
-        variant: "default",
-        orientation: "vertical",
-        title: true,
-        classNames: {
-          body: "mt-16"
-        }
+    ctaVariant: {
+      solid: {
+        root: "bg-inverted text-inverted",
+        description: "text-dimmed"
       },
-      {
-        variant: "default",
-        orientation: "vertical",
-        description: true,
-        classNames: {
-          body: "mt-16"
-        }
+      outline: {
+        root: "bg-default ring ring-default",
+        description: "text-muted"
       },
-      {
-        variant: "default",
-        orientation: "vertical",
-        body: true,
-        classNames: {
-          footer: "mt-16"
-        }
+      soft: {
+        root: "bg-elevated/50",
+        description: "text-toned"
       },
-      {
-        variant: "cta",
-        ctaVariant: "outline",
-        classNames: {
-          root: "bg-default ring ring-default"
-        }
+      subtle: {
+        root: "bg-elevated/50 ring ring-default",
+        description: "text-toned"
       },
-      {
-        variant: "cta",
-        ctaVariant: "solid",
-        classNames: {
-          root: "bg-inverted text-inverted",
-          title: "text-inverted",
-          description: "text-dimmed"
-        }
-      },
-      {
-        variant: "cta",
-        ctaVariant: "soft",
-        classNames: {
-          root: "bg-elevated/50",
-          description: "text-toned"
-        }
+      naked: {
+        description: "text-muted"
+      }
+    },
+    orientation: {
+      horizontal: {
+        container: "lg:grid-cols-2 lg:items-center",
+        description: "text-pretty"
       },
-      {
-        variant: "cta",
-        ctaVariant: "subtle",
-        classNames: {
-          root: "bg-elevated/50 ring ring-default",
-          description: "text-toned"
-        }
+      vertical: {
+        container: "",
+        headline: "justify-center",
+        leading: "justify-center",
+        title: "text-center",
+        description: "text-center text-balance",
+        links: "justify-center"
+      }
+    },
+    reverse: {
+      true: {}
+    },
+    headline: {
+      true: {
+        headline: "font-semibold text-primary flex items-center gap-1.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-6"
+      }
+    },
+    description: {
+      true: {}
+    },
+    body: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "hero",
+      reverse: true,
+      classNames: {
+        wrapper: "order-first"
       }
-    ],
-    defaultVariants: {
+    },
+    {
       variant: "default",
-      orientation: "vertical"
+      reverse: true,
+      classNames: {
+        wrapper: "order-last"
+      }
+    },
+    {
+      variant: "cta",
+      reverse: true,
+      classNames: {
+        wrapper: "order-last"
+      }
+    },
+    {
+      variant: "default",
+      orientation: "vertical",
+      title: true,
+      classNames: {
+        body: "mt-16"
+      }
+    },
+    {
+      variant: "default",
+      orientation: "vertical",
+      description: true,
+      classNames: {
+        body: "mt-16"
+      }
+    },
+    {
+      variant: "default",
+      orientation: "vertical",
+      body: true,
+      classNames: {
+        footer: "mt-16"
+      }
+    },
+    {
+      variant: "cta",
+      ctaVariant: "outline",
+      classNames: {
+        root: "bg-default ring ring-default"
+      }
+    },
+    {
+      variant: "cta",
+      ctaVariant: "solid",
+      classNames: {
+        root: "bg-inverted text-inverted",
+        title: "text-inverted",
+        description: "text-dimmed"
+      }
+    },
+    {
+      variant: "cta",
+      ctaVariant: "soft",
+      classNames: {
+        root: "bg-elevated/50",
+        description: "text-toned"
+      }
+    },
+    {
+      variant: "cta",
+      ctaVariant: "subtle",
+      classNames: {
+        root: "bg-elevated/50 ring ring-default",
+        description: "text-toned"
+      }
     }
-  })
-
-export default createPageSectionTheme()
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "vertical"
+  }
+})

package/src/components/pagination/RLAPagination.astro

@@ -1,97 +1,91 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { PaginationProps } from "./pagination"
-import { resolveTheme } from "../../utils/resolveTheme"
-import paginationThemeDefault, { createPaginationTheme } from "./pagination.theme"
-const paginationTheme = resolveTheme(paginationThemeDefault, createPaginationTheme)
-import RLAIcon from "../icon/RLAIcon.astro"
-
-
-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}
-      >
-        <RLAIcon name="chevronLeft" class="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}
-      >
-        <RLAIcon name="chevronRight" class="size-4" aria-hidden="true" />
-      </a>
-    </li>
-  </ul>
-</nav>
+---
+import type { PaginationProps } from "./pagination"
+import { paginationTheme } from "./pagination.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+
+const {
+  currentPage = 1,
+  totalPages = 1,
+  baseUrl = "?page=",
+  ...rest
+} = Astro.props as PaginationProps
+
+const classes = paginationTheme(Astro.props)
+
+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}
+      >
+        <RLAIcon name="i-rl-chevronLeft" class="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 = paginationTheme({
+  active: isActive,
+})
+
+      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}
+      >
+        <RLAIcon name="i-rl-chevronRight" class="size-4" aria-hidden="true" />
+      </a>
+    </li>
+  </ul>
+</nav>