@rimelight/ui 0.0.37 → 0.0.38

package/src/components/placeholder/placeholder.theme.ts

@@ -0,0 +1,15 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createPlaceholderTheme = () =>
+  defineTheme({
+    slots: ["base", "svg"],
+    base: {
+      base: "relative flex items-center justify-center overflow-hidden rounded-sm border-1 border-dashed border-primary px-4 opacity-75",
+      svg: "absolute inset-0 h-full w-full stroke-primary/10"
+    },
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {}
+  })
+
+export default createPlaceholderTheme()

package/src/components/popover/RLAPopover.astro

@@ -0,0 +1,130 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { PopoverProps } from "./popover"
+import { resolveTheme } from "../../utils/resolveTheme"
+import popoverThemeDefault, { createPopoverTheme } from "./popover.theme"
+const popoverTheme = resolveTheme(popoverThemeDefault, createPopoverTheme)
+
+
+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" data-placement={placement} {...rest}>
+  <div class={`${classes.trigger} popover-trigger`} data-slot="trigger">
+    <slot name="trigger">
+      {triggerLabel && <button type="button" class="cursor-pointer">{triggerLabel}</button>}
+    </slot>
+  </div>
+
+  <div class={`${classes.content} popover-content hidden`} data-slot="content">
+    <slot />
+  </div>
+</div>
+
+<script>
+  function initPopovers() {
+    document.querySelectorAll('[data-slot="popover-container"]').forEach(container => {
+      const el = container as any;
+      if (el.dataset && el.dataset.popoverInitialized) return;
+      if (el.dataset) el.dataset.popoverInitialized = "true";
+
+      const trigger = container.querySelector('.popover-trigger');
+      const content = container.querySelector('.popover-content') as HTMLElement;
+
+      if (!trigger || !content) return;
+
+      trigger.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const isOpen = !content.classList.contains('hidden');
+        
+        document.querySelectorAll('.popover-content').forEach(otherContent => {
+          const other = otherContent as HTMLElement;
+          if (other !== content && !other.classList.contains('hidden')) {
+            other.classList.add('hidden');
+            other.style.left = '';
+            other.style.right = '';
+            other.style.transform = '';
+            other.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+          }
+        });
+
+        if (isOpen) {
+          content.classList.add('hidden');
+          content.style.left = '';
+          content.style.right = '';
+          content.style.transform = '';
+          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+        } else {
+          content.classList.remove('hidden');
+
+          // Reset styles to measure original computed bounds
+          content.style.left = '';
+          content.style.right = '';
+          content.style.transform = '';
+
+          const rect = content.getBoundingClientRect();
+          const viewportWidth = window.innerWidth;
+          const placement = container.getAttribute('data-placement') || 'bottom';
+          
+          let shift = 0;
+          const safetyMargin = 24;
+          if (rect.right > viewportWidth - safetyMargin) {
+            shift = (viewportWidth - safetyMargin) - rect.right;
+          } else if (rect.left < safetyMargin) {
+            shift = safetyMargin - rect.left;
+          }
+
+          if (shift !== 0) {
+            const isCentered = (placement === 'top' || placement === 'bottom') && 
+                               !content.classList.contains('right-0') && 
+                               !content.classList.contains('left-0');
+            if (isCentered) {
+              content.style.transform = `translateX(calc(-50% + ${shift}px))`;
+            } else {
+              content.style.transform = `translateX(${shift}px)`;
+            }
+          }
+
+          content.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: true } }));
+        }
+      });
+
+      content.addEventListener('click', (e) => {
+        e.stopPropagation();
+      });
+    });
+  }
+
+  const win = window as any;
+  if (!win.hasGlobalPopoverListener) {
+    win.hasGlobalPopoverListener = true;
+    document.addEventListener('click', () => {
+      document.querySelectorAll('.popover-content').forEach(content => {
+        const c = content as HTMLElement;
+        if (!c.classList.contains('hidden')) {
+          c.classList.add('hidden');
+          c.style.left = '';
+          c.style.right = '';
+          c.style.transform = '';
+          c.dispatchEvent(new CustomEvent('popover-toggle', { detail: { open: false } }));
+        }
+      });
+    });
+  }
+
+  document.addEventListener('astro:page-load', initPopovers);
+  initPopovers();
+</script>

package/src/components/popover/popover.theme.ts

@@ -0,0 +1,27 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createPopoverTheme = (_colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "trigger", "content"],
+    base: {
+      root: "relative inline-block",
+      trigger: "",
+      content: [
+        "absolute z-50 w-72 rounded-xl border border-border bg-background p-4 text-foreground shadow-lg outline-none"
+      ]
+    },
+    variants: {
+      placement: {
+        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-2" },
+        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-2" },
+        left: { content: "right-full top-1/2 -translate-y-1/2 mr-2" },
+        right: { content: "left-full top-1/2 -translate-y-1/2 ml-2" }
+      }
+    },
+    defaultVariants: {
+      placement: "bottom"
+    }
+  })
+
+export default createPopoverTheme()

package/src/components/post/RLAPost.astro

@@ -0,0 +1,72 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { PostProps } from "./post"
+import postTheme from "./post.theme"
+import type { ImageMetadata } from "astro"
+import Image from "astro/components/Image.astro"
+import RLABadge from "../badge/RLABadge.astro"
+
+
+const post = scv(postTheme)
+
+const {
+  title,
+  description,
+  date,
+  image,
+  to,
+  badge,
+  badgeColor = "primary",
+  variant = "soft",
+  orientation = "vertical",
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PostProps
+
+const classes = resolveClasses(post, { variant, orientation }, 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 as ImageMetadata} 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="badge" {...{ ui: classes }}>
+      {badge && <RLABadge color={badgeColor as any} size="sm" shape="pill" class={classes.badge} data-slot="badge">{badge}</RLABadge>}
+    </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/post/post.theme.ts

@@ -0,0 +1,53 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createPostTheme = () =>
+  defineTheme({
+    slots: [
+      "root",
+      "imageWrapper",
+      "image",
+      "content",
+      "title",
+      "description",
+      "badge",
+      "date",
+      "footer"
+    ],
+    base: {
+      root: "group relative flex overflow-hidden transition-all duration-300",
+      imageWrapper: "relative overflow-hidden aspect-video",
+      image: "absolute inset-0 w-full h-full object-cover transition-transform duration-500",
+      content: "flex-1 p-4",
+      title: "font-bold text-xl line-clamp-2",
+      description: "text-neutral-500 text-sm mt-1 line-clamp-3",
+      date: "text-xs text-neutral-400 mt-2",
+      footer: "p-4 border-t border-neutral-100"
+    },
+    variants: {
+      orientation: {
+        vertical: {
+          root: "flex-col"
+        },
+        horizontal: {
+          root: "flex-col md:flex-row",
+          imageWrapper: "w-full md:w-80 md:shrink-0 md:aspect-auto"
+        }
+      },
+      variant: {
+        soft: {
+          root: "bg-white rounded-2xl shadow-xl hover:shadow-2xl border border-neutral-100",
+          image: "group-hover:scale-105"
+        },
+        ghost: {
+          root: "bg-transparent",
+          image: "rounded-xl group-hover:opacity-90"
+        }
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical",
+      variant: "soft"
+    }
+  })
+
+export default createPostTheme()

package/src/components/pricing-plan/RLAPricingPlan.astro

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

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

package/src/components/pricing-table/RLAPricingTable.astro

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

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

package/src/components/progress/RLAProgress.astro

@@ -0,0 +1,51 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ProgressProps } from "./progress"
+import { resolveTheme } from "../../utils/resolveTheme"
+import progressThemeDefault, { createProgressTheme } from "./progress.theme"
+const progressTheme = resolveTheme(progressThemeDefault, createProgressTheme)
+
+const progress = scv(progressTheme)
+
+const {
+  value = 0,
+  max = 100,
+  color = "primary",
+  size = "md",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ProgressProps
+
+const classes = resolveClasses(progress, {
+  color,
+  size,
+  theme
+}, 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}
+  data-slot="progress-root"
+  role="progressbar"
+  aria-valuemin={0}
+  aria-valuemax={max}
+  aria-valuenow={value}
+  {...rest}
+>
+  <div
+    class:list={[classes.indicator, id]}
+    data-slot="indicator"
+  />
+</div>
+
+<style is:inline set:html={`
+  .${id} {
+    transform: translateX(-${100 - percentage}%) !important;
+  }
+`} />

package/src/components/progress/progress.theme.ts

@@ -0,0 +1,37 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createProgressTheme = (colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "indicator"],
+    base: {
+      root: "relative w-full overflow-hidden rounded-full bg-muted shadow-inner",
+      indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            indicator: `bg-[var(--rl-bg)]`
+          }
+        ])
+      ),
+      size: {
+        sm: { root: "h-1.5" },
+        md: { root: "h-3" },
+        lg: { root: "h-5" }
+      },
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary",
+      size: "md"
+    }
+  })
+
+export default createProgressTheme()

package/src/components/progress/progress.ts

@@ -0,0 +1,33 @@
+import type { Theme, ThemeColor } from "../../types/component"
+
+export interface ProgressProps {
+  /**
+   * Current value of progress (0 to max).
+   */
+  value?: number
+  /**
+   * The maximum boundary (default 100).
+   */
+  max?: number
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * The height size category.
+   */
+  size?: "sm" | "md" | "lg"
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/prose/RLAProse.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { ProseProps } from "./prose"
+import proseTheme from "./prose.theme"
+
+
+const prose = scv(proseTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ProseProps
+
+const classes = resolveClasses(prose, {}, useUi("prose", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/prose/prose.theme.ts

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

package/src/components/qr-code/RLAQrCode.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { QrCodeProps } from "./qr-code"
+import qrCodeTheme from "./qr-code.theme"
+
+
+const qrCode = scv(qrCodeTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as QrCodeProps
+
+const classes = resolveClasses(qrCode, {}, useUi("qrCode", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/qr-code/qr-code.theme.ts

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

package/src/components/quote/RLAQuote.astro

@@ -0,0 +1,15 @@
+---
+import RLAIcon from "../icon/RLAIcon.astro"
+---
+
+<figure class="relative my-8 border-y-[3px] border-astro-gray-500 py-4">
+    <RLAIcon name="quote" class="mb-2 s-10 md:absolute md:right-[calc(100%+1rem)] md:top-6" />
+    <blockquote
+            class="font-heading heading-3 text-xl font-medium text-white md:text-[32px] md:leading-[40px]"
+    >
+        <slot name="quote" />
+    </blockquote>
+    <figcaption class="font-mono mt-4 text-right text-astro-pink-light">
+        <slot name="caption" />
+    </figcaption>
+</figure>

package/src/components/quote/quote.theme.ts

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

package/src/components/radio-group/RLARadioGroup.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { RadioGroupProps } from "./radio-group"
+import radioGroupTheme from "./radio-group.theme"
+
+
+const radioGroup = scv(radioGroupTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RadioGroupProps
+
+const classes = resolveClasses(radioGroup, {}, useUi("radioGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/radio-group/radio-group.theme.ts

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

package/src/components/rating/RLARating.astro

@@ -0,0 +1,21 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { RatingProps } from "./rating"
+import ratingTheme from "./rating.theme"
+
+
+const rating = scv(ratingTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RatingProps
+
+const classes = resolveClasses(rating, {}, useUi("rating", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/rating/rating.theme.ts

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