@rimelight/ui 0.0.37 → 0.0.39

package/src/components/page-header/RLAPageHeader.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { PageHeaderProps } from "./page-header"
+import pageHeaderTheme from "./page-header.theme"
+
+
+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/page-header/page-header.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createPageHeaderTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createPageHeaderTheme()

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

@@ -0,0 +1,166 @@
+---
+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 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,
+  description,
+  icon,
+  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, {
+  variant: resolvedVariant,
+  orientation,
+  reverse,
+  ...(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);
+
+const hasDefaultSlot = Astro.slots.has("default");
+const hasContentSlot = Astro.slots.has("content");
+
+const Tag = as;
+const TitleTag = variant === "hero" ? "h1" : "h2";
+---
+
+<Tag
+  data-orientation={orientation}
+  class:list={[classes.root, contentVisibility === "auto" && "rla-visibility-aware"]}
+  style={containIntrinsicSize ? `--rla-contain-intrinsic-size: ${containIntrinsicSize};` : undefined}
+  {...rest}
+>
+  {Astro.slots.has("background") && (
+    <div class:list={[classes.background]} data-slot="background">
+      <slot name="background" />
+    </div>
+  )}
+
+  <slot name="top" />
+
+  <div
+    class:list={[classes.container]}
+  >
+    {(Astro.slots.has("header") || icon || headline || title || description || Astro.slots.has("body") || Astro.slots.has("footer") || Astro.slots.has("links") || links?.length) && (
+      <div
+        class:list={[classes.wrapper]}
+      >
+        {(Astro.slots.has("header") || icon || headline || title || description) && (
+          <div
+            class:list={[classes.header]}
+          >
+            <slot name="header">
+              {(icon || Astro.slots.has("leading")) && (
+                <div
+                  class:list={[classes.leading]}
+                >
+                  <slot name="leading" {...{ ui: classes }}>
+                    {icon && (
+                      <RLAIcon name={icon} size="md" ui={{ root: classes.leadingIcon }} />
+                    )}
+                  </slot>
+                </div>
+              )}
+
+              {(headline || Astro.slots.has("headline")) && (
+                <div
+                  class:list={[classes.headline]}
+                >
+                  <slot name="headline">
+                    {headline}
+                  </slot>
+                </div>
+              )}
+
+              {(title || Astro.slots.has("title")) && (
+                <TitleTag
+                  class:list={[classes.title]}
+                >
+                  <slot name="title">
+                    {title}
+                  </slot>
+                </TitleTag>
+              )}
+
+              {(description || Astro.slots.has("description")) && (
+                <div
+                  class:list={[classes.description]}
+                >
+                  <slot name="description">
+                    {description}
+                  </slot>
+                </div>
+              )}
+            </slot>
+          </div>
+        )}
+
+        {Astro.slots.has("body") && (
+          <div
+            class:list={[classes.body]}
+          >
+            <slot name="body" />
+          </div>
+        )}
+
+        {(Astro.slots.has("footer") || Astro.slots.has("links") || links?.length) && (
+          <div
+            class:list={[classes.footer]}
+          >
+            <slot name="footer">
+              {(links?.length || Astro.slots.has("links")) && (
+                <div
+                  class:list={[classes.links]}
+                >
+                  {links?.map((link) => (
+                    <RLAButton size="lg" {...link} />
+                  ))}
+                  <slot name="links" />
+                </div>
+              )}
+            </slot>
+          </div>
+        )}
+      </div>
+    )}
+
+    {hasDefaultSlot ? (
+      <slot />
+    ) : orientation === "horizontal" ? (
+      <div class="hidden lg:block" />
+    ) : null}
+
+    {hasContentSlot && (
+      <div class="col-span-full w-full">
+        <slot name="content" />
+      </div>
+    )}
+  </div>
+
+  <slot name="bottom" />
+</Tag>
+

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

@@ -0,0 +1,189 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+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"
+        }
+      },
+      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"
+        }
+      },
+      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: {}
+      }
+    },
+    compoundVariants: [
+      {
+        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"
+        }
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      orientation: "vertical"
+    }
+  })
+
+export default createPageSectionTheme()

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

@@ -0,0 +1,71 @@
+import type { ButtonProps } from "../button/button"
+
+export interface PageSectionProps {
+  /**
+   * The element or component this component should render as.
+   *
+   * @default "section"
+   */
+  as?: any
+  /**
+   * The variant of the section.
+   *
+   * @default "default"
+   */
+  variant?: "default" | "hero" | "cta" | "none"
+  /**
+   * The variant of the section when it's a CTA.
+   *
+   * @default "solid"
+   */
+  ctaVariant?: "solid" | "outline" | "soft" | "subtle" | "naked"
+  /**
+   * The headline displayed above the title.
+   */
+  headline?: string
+  /**
+   * The icon displayed above the title.
+   */
+  icon?: string
+  /**
+   * The section's title, displayed as a <h1> for the hero variant or <h2> otherwise.
+   */
+  title?: string
+  /**
+   * The section's description, displayed under the title.
+   */
+  description?: string
+  /**
+   * Display a list of buttons under the description.
+   */
+  links?: ButtonProps[]
+  /**
+   * The orientation of the section.
+   *
+   * @default "vertical"
+   */
+  orientation?: "vertical" | "horizontal"
+  /**
+   * Reverse the order of the default slot.
+   *
+   * @default false
+   */
+  reverse?: boolean
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  /**
+   * Set content-visibility for offscreen render painting optimization.
+   */
+  contentVisibility?: "auto" | "visible"
+  /**
+   * Dynamic intrinsic size fallback for content-visibility layout stability.
+   */
+  containIntrinsicSize?: string
+  [key: string]: unknown
+}

package/src/components/pagination/RLAPagination.astro

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

package/src/components/pagination/pagination.theme.ts

@@ -0,0 +1,28 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createPaginationTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "list", "item", "link", "ellipsis"],
+    base: {
+      root: "mx-auto flex w-full justify-center",
+      list: "flex flex-row items-center gap-1",
+      item: "",
+      link: [
+        "inline-flex items-center justify-center rounded-md text-sm font-medium transition-all size-9 cursor-pointer border border-border bg-background hover:bg-muted text-foreground decoration-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+      ],
+      ellipsis: "flex size-9 items-center justify-center text-muted-foreground"
+    },
+    variants: {
+      active: {
+        true: { link: "border-primary bg-primary text-primary-foreground hover:bg-primary/95" },
+        false: { link: "" }
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  })
+
+export default createPaginationTheme()

package/src/components/password/RLAPassword.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { PasswordProps } from "./password"
+import passwordTheme from "./password.theme"
+
+
+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/password/password.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createPasswordTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createPasswordTheme()

package/src/components/phone-mockup/RLAPhoneMockup.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { PhoneMockupProps } from "./phone-mockup"
+import phoneMockupTheme from "./phone-mockup.theme"
+
+
+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/phone-mockup/phone-mockup.theme.ts

@@ -0,0 +1,13 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createPhoneMockupTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createPhoneMockupTheme()