@rimelight/ui 0.0.31 → 0.0.32

package/src/components/astro/{RLACombobox.astro → RLAInputMenu.astro}

@@ -1,11 +1,11 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComboboxProps } from "../../types"
-import comboboxThemeDefault, { createComboboxTheme } from "../../themes/combobox.theme"
+import type { InputMenuProps } from "../../types"
+import inputMenuThemeDefault, { createInputMenuTheme } from "../../themes/input-menu.theme"
 
-const comboboxTheme = comboboxThemeDefault
-const combobox = scv(comboboxTheme)
+const inputMenuTheme = inputMenuThemeDefault
+const inputMenu = scv(inputMenuTheme)
 
 const {
   items = [],
@@ -19,11 +19,11 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as ComboboxProps
+} = Astro.props as InputMenuProps
 
-const classes = resolveClasses(combobox, {
+const classes = resolveClasses(inputMenu, {
   size
-}, useUi("combobox", uiProp), className);
+}, useUi("inputMenu", uiProp), className);
 
 const normalizedItems = items.map(item => {
   if (typeof item === "string") {
@@ -38,34 +38,34 @@ const initialLabel = selectedItem ? selectedItem.label : ""
 <div class={classes.root} data-slot="root" data-disabled={disabled ? "" : undefined}>
   {label && <label class={classes.label} data-slot="label">{label}</label>}
   
-  <div class="relative w-full" data-combobox-wrapper>
+  <div class="relative w-full" data-inputMenu-wrapper>
     <button
       type="button"
       class={classes.trigger}
       data-slot="trigger"
       disabled={disabled}
-      data-combobox-trigger
+      data-inputMenu-trigger
       {...rest}
     >
-      <span data-combobox-value>{initialLabel || placeholder}</span>
+      <span data-inputMenu-value>{initialLabel || placeholder}</span>
       <span class="i-lucide-chevrons-up-down opacity-50" />
     </button>
 
-    <div class={classes.content + " hidden"} data-combobox-dropdown data-slot="content">
+    <div class={classes.content + " hidden"} data-inputMenu-dropdown data-slot="content">
       <input
         type="text"
         class={classes.input}
         placeholder="Search..."
-        data-combobox-search
+        data-inputMenu-search
       />
-      <div class="py-1" data-combobox-items>
+      <div class="py-1" data-inputMenu-items>
         {normalizedItems.map(item => (
           <div
             class={classes.item}
             data-slot="item"
             data-value={item.value}
             data-label={item.label}
-            data-combobox-item
+            data-inputMenu-item
           >
             <span class={classes.itemText}>{item.label}</span>
             <span class={classes.itemIcon + " hidden i-lucide-check"} data-check-icon />
@@ -74,17 +74,17 @@ const initialLabel = selectedItem ? selectedItem.label : ""
       </div>
     </div>
   </div>
-  <input type="hidden" name={name} value={value} data-combobox-hidden-input />
+  <input type="hidden" name={name} value={value} data-inputMenu-hidden-input />
 </div>
 
 <script>
-  document.querySelectorAll("[data-combobox-wrapper]").forEach(wrapper => {
-    const trigger = wrapper.querySelector("[data-combobox-trigger]") as HTMLButtonElement;
-    const dropdown = wrapper.querySelector("[data-combobox-dropdown]") as HTMLDivElement;
-    const search = wrapper.querySelector("[data-combobox-search]") as HTMLInputElement;
-    const items = wrapper.querySelectorAll("[data-combobox-item]");
-    const valueSpan = wrapper.querySelector("[data-combobox-value]");
-    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-combobox-hidden-input]") as HTMLInputElement;
+  document.querySelectorAll("[data-inputMenu-wrapper]").forEach(wrapper => {
+    const trigger = wrapper.querySelector("[data-inputMenu-trigger]") as HTMLButtonElement;
+    const dropdown = wrapper.querySelector("[data-inputMenu-dropdown]") as HTMLDivElement;
+    const search = wrapper.querySelector("[data-inputMenu-search]") as HTMLInputElement;
+    const items = wrapper.querySelectorAll("[data-inputMenu-item]");
+    const valueSpan = wrapper.querySelector("[data-inputMenu-value]");
+    const hiddenInput = wrapper.closest("[data-slot=root]")?.querySelector("[data-inputMenu-hidden-input]") as HTMLInputElement;
 
     if (!trigger || !dropdown) return;
 

package/src/components/astro/RLAInputNumber.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputNumberProps } from "../../types"
+import inputNumberThemeDefault from "../../themes/input-number.theme"
+
+const inputNumber = scv(inputNumberThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputNumberProps
+
+const classes = resolveClasses(inputNumber, {}, useUi("inputNumber", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAInputPin.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputPinProps } from "../../types"
+import inputPinThemeDefault from "../../themes/input-pin.theme"
+
+const inputPin = scv(inputPinThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputPinProps
+
+const classes = resolveClasses(inputPin, {}, useUi("inputPin", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAInputTags.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputTagsProps } from "../../types"
+import inputTagsThemeDefault from "../../themes/input-tags.theme"
+
+const inputTags = scv(inputTagsThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputTagsProps
+
+const classes = resolveClasses(inputTags, {}, useUi("inputTags", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAInputTime.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { InputTimeProps } from "../../types"
+import inputTimeThemeDefault from "../../themes/input-time.theme"
+
+const inputTime = scv(inputTimeThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as InputTimeProps
+
+const classes = resolveClasses(inputTime, {}, useUi("inputTime", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAKnob.astro

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

package/src/components/astro/RLALink.astro

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

package/src/components/astro/RLALinkGroup.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { LinkGroupProps } from "../../types"
+import linkGroupThemeDefault from "../../themes/link-group.theme"
+
+const linkGroup = scv(linkGroupThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as LinkGroupProps
+
+const classes = resolveClasses(linkGroup, {}, useUi("linkGroup", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAListbox.astro

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

package/src/components/astro/RLALocaleSelector.astro

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { LocaleSelectorProps } from "../../types"
-import localeSelectorTheme from "../../themes/localeSelector.theme"
+import localeSelectorTheme from "../../themes/locale-selector.theme"
 import { getRelativeLocaleUrlList, getRelativeLocaleUrl } from "astro:i18n";
 
 const localeSelector = scv(localeSelectorTheme)

package/src/components/astro/RLAMegamenu.astro

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

package/src/components/astro/RLAMeter.astro

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

package/src/components/astro/{RLADialog.astro → RLAModal.astro}

@@ -1,10 +1,10 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { DialogProps } from "../../types"
-import dialogTheme from "../../themes/dialog.theme"
+import type { ModalProps } from "../../types"
+import modalTheme from "../../themes/modal.theme"
 
-const dialog = scv(dialogTheme)
+const modal = scv(modalTheme)
 
 const {
   open = false,
@@ -18,32 +18,32 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as DialogProps
+} = Astro.props as ModalProps
 
-const classes = resolveClasses(dialog, {
+const classes = resolveClasses(modal, {
   size
-}, useUi("dialog", uiProp), className)
+}, useUi("modal", uiProp), className)
 
-const dialogId = `rla-dialog-${Math.random().toString(36).substring(2, 9)}`
+const modalId = `rla-modal-${Math.random().toString(36).substring(2, 9)}`
 ---
-<div class={classes.root} data-slot="dialog-container">
+<div class={classes.root} data-slot="modal-container">
   {triggerLabel ? (
     <button
       class={classes.trigger}
       data-slot="trigger"
       type="button"
-      onclick={`document.getElementById('${dialogId}').showModal()`}
+      onclick={`document.getElementById('${modalId}').showmodal()`}
     >
       {triggerLabel}
     </button>
   ) : (
-    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+    <span onclick={`document.getElementById('${modalId}').showmodal()`}>
       <slot name="trigger" />
     </span>
   )}
 
   <dialog
-    id={dialogId}
+    id={modalId}
     class={classes.content}
     data-slot="content"
     data-lock-scroll={lockScroll ? "true" : "false"}
@@ -55,8 +55,8 @@ const dialogId = `rla-dialog-${Math.random().toString(36).substring(2, 9)}`
       class={classes.closeButton}
       data-slot="close-button"
       type="button"
-      onclick={`document.getElementById('${dialogId}').close()`}
-      aria-label="Close dialog"
+      onclick={`document.getElementById('${modalId}').close()`}
+      aria-label="Close modal"
     >
       <span class="i-lucide-x size-4" aria-hidden="true" />
     </button>
@@ -81,13 +81,13 @@ const dialogId = `rla-dialog-${Math.random().toString(36).substring(2, 9)}`
   document.addEventListener('click', (e) => {
     if (e.target && e.target.tagName === 'DIALOG' && e.target.getAttribute('data-close-on-click-outside') === 'true') {
       const rect = e.target.getBoundingClientRect();
-      const isInDialog = (
+      const isInModal = (
         rect.top <= e.clientY &&
         e.clientY <= rect.top + rect.height &&
         rect.left <= e.clientX &&
         e.clientX <= rect.left + rect.width
       );
-      if (!isInDialog) {
+      if (!isInModal) {
         e.target.close();
       }
     }

package/src/components/astro/RLANavigationMenu.astro

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { NavigationMenuProps } from "../../types"
-import navigationMenuThemeDefault, { createNavigationMenuTheme } from "../../themes/navigationMenu.theme"
+import navigationMenuThemeDefault, { createNavigationMenuTheme } from "../../themes/navigation-menu.theme"
 
 const navigationMenuTheme = navigationMenuThemeDefault
 const navigationMenu = scv(navigationMenuTheme)

package/src/components/astro/RLAPage.astro

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

package/src/components/astro/RLAPageAside.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PageAsideProps } from "../../types"
+import pageAsideThemeDefault from "../../themes/page-aside.theme"
+
+const pageAside = scv(pageAsideThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PageAsideProps
+
+const classes = resolveClasses(pageAside, {}, useUi("pageAside", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAPageBody.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { PageBodyProps } from "../../types"
+import pageBodyThemeDefault from "../../themes/page-body.theme"
+
+const pageBody = scv(pageBodyThemeDefault)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as PageBodyProps
+
+const classes = resolveClasses(pageBody, {}, useUi("pageBody", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAPageHeader.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/{RLASection.astro → RLAPageSection.astro}

@@ -1,12 +1,12 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { SectionProps } from "../../types"
-import sectionTheme from "../../themes/section.theme"
+import type { PageSectionProps } from "../../types"
+import pageSectionTheme from "../../themes/page-section.theme"
 import RLAIcon from "./RLAIcon.astro"
 import RLAButton from "./RLAButton.astro"
 
-const section = scv(sectionTheme)
+const pageSection = scv(pageSectionTheme)
 
 const {
   as = "section",
@@ -22,9 +22,9 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as SectionProps;
+} = Astro.props as PageSectionProps;
 
-const classes = resolveClasses(section, {
+const classes = resolveClasses(pageSection, {
   variant,
   orientation,
   reverse,
@@ -33,7 +33,7 @@ const classes = resolveClasses(section, {
   title: !!(Astro.slots.has("title") || title),
   description: !!(Astro.slots.has("description") || description),
   body: Astro.slots.has("body")
-}, useUi("section", uiProp), className);
+}, useUi("pageSection", uiProp), className);
 
 const hasDefaultSlot = Astro.slots.has("default");
 

package/src/components/astro/RLAPassword.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAPhoneMockup.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAPost.astro

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

package/src/components/astro/RLAPricingPlan.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAPricingTable.astro

@@ -0,0 +1,19 @@
+---
+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 />
+</div>

package/src/components/astro/RLAProgress.astro

@@ -14,6 +14,7 @@ const {
   max = 100,
   color = "primary",
   size = "md",
+  theme,
   ui: uiProp,
   class: className,
   ...rest
@@ -21,7 +22,8 @@ const {
 
 const classes = resolveClasses(progress, {
   color,
-  size
+  size,
+  theme
 }, useUi("progress", uiProp), className)
 
 const percentage = Math.min(100, Math.max(0, (value / max) * 100))

package/src/components/astro/RLAProse.astro

@@ -0,0 +1,19 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ProseProps } from "../../types"
+import proseThemeDefault from "../../themes/prose.theme"
+
+const prose = scv(proseThemeDefault)
+
+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>