@rimelight/ui 0.0.31 → 0.0.33

package/src/components/astro/RLADrawer.astro

@@ -1,74 +1,78 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { DrawerProps } from "../../types"
-import drawerTheme from "../../themes/drawer.theme"
-
-const drawer = scv(drawerTheme)
-
-const {
-  direction = "bottom",
-  title,
-  description,
-  triggerLabel,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as DrawerProps
-
-const classes = resolveClasses(drawer, {
-  direction
-}, useUi("drawer", uiProp), className)
-
-const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
----
-<div class={classes.root} data-slot="drawer-container">
-  {triggerLabel ? (
-    <button
-      class={classes.trigger}
-      data-slot="trigger"
-      type="button"
-      onclick={`document.getElementById('${dialogId}').showModal()`}
-    >
-      {triggerLabel}
-    </button>
-  ) : (
-    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
-      <slot name="trigger" />
-    </span>
-  )}
-
-  <dialog
-    id={dialogId}
-    class={classes.content}
-    data-slot="content"
-    data-close-on-click-outside="true"
-    {...rest}
-  >
-    <div class={classes.handle} data-slot="handle" />
-
-    <button
-      class={classes.closeButton}
-      data-slot="close-button"
-      type="button"
-      onclick={`document.getElementById('${dialogId}').close()`}
-      aria-label="Close drawer"
-    >
-      <span class="i-lucide-x size-4" aria-hidden="true" />
-    </button>
-
-    <div class={classes.header} data-slot="header">
-      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
-      <slot name="title" />
-      
-      {description && <p class={classes.description} data-slot="description">{description}</p>}
-      <slot name="description" />
-    </div>
-
-    <slot />
-
-    <div class={classes.footer} data-slot="footer">
-      <slot name="footer" />
-    </div>
-  </dialog>
-</div>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { DrawerProps } from "../../types"
+import drawerThemeDefault, { createDrawerTheme } from "../../themes/drawer.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const drawerTheme = uiConfig.colors ? createDrawerTheme() : drawerThemeDefault
+
+const drawer = scv(drawerTheme)
+
+const {
+  direction = "bottom",
+  title,
+  description,
+  triggerLabel,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as DrawerProps
+
+const classes = resolveClasses(drawer, {
+  direction
+}, useUi("drawer", uiProp), className)
+
+const dialogId = `rla-drawer-${Math.random().toString(36).substring(2, 9)}`
+---
+<div class={classes.root} data-slot="drawer-container">
+  {triggerLabel ? (
+    <button
+      class={classes.trigger}
+      data-slot="trigger"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').showModal()`}
+    >
+      {triggerLabel}
+    </button>
+  ) : (
+    <span onclick={`document.getElementById('${dialogId}').showModal()`}>
+      <slot name="trigger" />
+    </span>
+  )}
+
+  <dialog
+    id={dialogId}
+    class={classes.content}
+    data-slot="content"
+    data-close-on-click-outside="true"
+    {...rest}
+  >
+    <div class={classes.handle} data-slot="handle" />
+
+    <button
+      class={classes.closeButton}
+      data-slot="close-button"
+      type="button"
+      onclick={`document.getElementById('${dialogId}').close()`}
+      aria-label="Close drawer"
+    >
+      <span class="i-lucide-x size-4" aria-hidden="true" />
+    </button>
+
+    <div class={classes.header} data-slot="header">
+      {title && <h3 class={classes.title} data-slot="title">{title}</h3>}
+      <slot name="title" />
+      
+      {description && <p class={classes.description} data-slot="description">{description}</p>}
+      <slot name="description" />
+    </div>
+
+    <slot />
+
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</div>

package/src/components/astro/RLADropdownMenu.astro

@@ -2,7 +2,7 @@
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { DropdownMenuProps } from "../../types"
-import dropdownMenuThemeDefault, { createDropdownMenuTheme } from "../../themes/dropdownMenu.theme"
+import dropdownMenuThemeDefault, { createDropdownMenuTheme } from "../../themes/dropdown-menu.theme"
 
 const dropdownMenuTheme = dropdownMenuThemeDefault
 const dropdownMenu = scv(dropdownMenuTheme)

package/src/components/astro/RLAEditor.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { EditorProps } from "../../types"
+import editorThemeDefault, { createEditorTheme } from "../../themes/editor.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const editorTheme = uiConfig.colors ? createEditorTheme() : editorThemeDefault
+
+const editor = scv(editorTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as EditorProps
+
+const classes = resolveClasses(editor, {}, useUi("editor", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAEmpty.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { EmptyProps } from "../../types"
+import emptyThemeDefault, { createEmptyTheme } from "../../themes/empty.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const emptyTheme = uiConfig.colors ? createEmptyTheme() : emptyThemeDefault
+
+const empty = scv(emptyTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as EmptyProps
+
+const classes = resolveClasses(empty, {}, useUi("empty", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAError.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { ErrorProps } from "../../types"
+import errorThemeDefault, { createErrorTheme } from "../../themes/error.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const errorTheme = uiConfig.colors ? createErrorTheme() : errorThemeDefault
+
+const error = scv(errorTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as ErrorProps
+
+const classes = resolveClasses(error, {}, useUi("error", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/{RLAInputGroup.astro → RLAFieldGroup.astro}

@@ -1,11 +1,11 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { InputGroupProps } from "../../types"
-import inputGroupThemeDefault, { createInputGroupTheme } from "../../themes/inputGroup.theme"
+import type { FieldGroupProps } from "../../types"
+import fieldGroupThemeDefault, { createFieldGroupTheme } from "../../themes/field-group.theme"
 
-const inputGroupTheme = inputGroupThemeDefault
-const inputGroup = scv(inputGroupTheme)
+const fieldGroupTheme = fieldGroupThemeDefault
+const fieldGroup = scv(fieldGroupTheme)
 
 const {
   prepend,
@@ -14,11 +14,11 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as InputGroupProps
+} = Astro.props as FieldGroupProps
 
-const classes = resolveClasses(inputGroup, {
+const classes = resolveClasses(fieldGroup, {
   size
-}, useUi("inputGroup", uiProp), className);
+}, useUi("fieldGroup", uiProp), className);
 ---
 <div class={classes.root} data-slot="root" {...rest}>
   {prepend && (

package/src/components/astro/RLAFieldset.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FieldsetProps } from "../../types"
+import fieldsetThemeDefault, { createFieldsetTheme } from "../../themes/fieldset.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const fieldsetTheme = uiConfig.colors ? createFieldsetTheme() : fieldsetThemeDefault
+
+const fieldset = scv(fieldsetTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FieldsetProps
+
+const classes = resolveClasses(fieldset, {}, useUi("fieldset", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/{RLADropzone.astro → RLAFileUpload.astro}

@@ -1,11 +1,11 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { DropzoneProps } from "../../types"
-import dropzoneThemeDefault, { createDropzoneTheme } from "../../themes/dropzone.theme"
+import type { FileUploadProps } from "../../types"
+import fileUploadThemeDefault, { createFileUploadTheme } from "../../themes/file-upload.theme"
 
-const dropzoneTheme = dropzoneThemeDefault
-const dropzone = scv(dropzoneTheme)
+const fileUploadTheme = fileUploadThemeDefault
+const fileUpload = scv(fileUploadTheme)
 
 const {
   accept,
@@ -18,19 +18,19 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as DropzoneProps
+} = Astro.props as FileUploadProps
 
-const classes = resolveClasses(dropzone, {
+const classes = resolveClasses(fileUpload, {
   disabled
-}, useUi("dropzone", uiProp), className)
+}, useUi("fileUpload", uiProp), className)
 
-const inputId = `dropzone-${Math.random().toString(36).slice(2, 9)}`
+const inputId = `fileUpload-${Math.random().toString(36).slice(2, 9)}`
 ---
 
 <div
   class={classes.root}
   data-slot="root"
-  data-dropzone
+  data-fileUpload
   data-disabled={disabled ? "true" : undefined}
   role="button"
   tabindex={disabled ? -1 : 0}
@@ -44,7 +44,7 @@ const inputId = `dropzone-${Math.random().toString(36).slice(2, 9)}`
     accept={accept}
     multiple={multiple}
     disabled={disabled}
-    data-dropzone-input
+    data-fileUpload-input
     aria-hidden="true"
     tabindex="-1"
   />
@@ -68,16 +68,16 @@ const inputId = `dropzone-${Math.random().toString(36).slice(2, 9)}`
 
     <div
       class="mt-3 hidden text-xs text-muted-foreground"
-      data-dropzone-filelist
+      data-fileUpload-filelist
       aria-live="polite"
     />
   </div>
 </div>
 
 <script>
-  document.querySelectorAll("[data-dropzone]").forEach(zone => {
-    const input = zone.querySelector("[data-dropzone-input]") as HTMLInputElement | null;
-    const fileList = zone.querySelector("[data-dropzone-filelist]") as HTMLElement | null;
+  document.querySelectorAll("[data-fileUpload]").forEach(zone => {
+    const input = zone.querySelector("[data-fileUpload-input]") as HTMLInputElement | null;
+    const fileList = zone.querySelector("[data-fileUpload-filelist]") as HTMLElement | null;
     if (!input) return;
 
     const isDisabled = zone.dataset.disabled === "true";

package/src/components/astro/RLAFloatingAction.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FloatingActionProps } from "../../types"
+import floatingActionThemeDefault, { createFloatingActionTheme } from "../../themes/floating-action.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const floatingActionTheme = uiConfig.colors ? createFloatingActionTheme() : floatingActionThemeDefault
+
+const floatingAction = scv(floatingActionTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FloatingActionProps
+
+const classes = resolveClasses(floatingAction, {}, useUi("floatingAction", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAFooter.astro

@@ -1,35 +1,39 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FooterProps } from "../../types"
-import footerTheme from "../../themes/footer.theme"
-
-const footer = scv(footerTheme)
-
-const {
-  contain = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FooterProps
-
-const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
----
-
-<footer
-  class:list={[classes.root]}
-  data-slot="root"
-  {...rest}
->
-  <div class:list={[classes.container]}>
-    <div class:list={[classes.left]} data-slot="left">
-      <slot name="left" />
-    </div>
-    <div class:list={[classes.center]} data-slot="center">
-      <slot name="center" />
-    </div>
-    <div class:list={[classes.right]} data-slot="right">
-      <slot name="right" />
-    </div>
-  </div>
-</footer>
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FooterProps } from "../../types"
+import footerThemeDefault, { createFooterTheme } from "../../themes/footer.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const footerTheme = uiConfig.colors ? createFooterTheme() : footerThemeDefault
+
+const footer = scv(footerTheme)
+
+const {
+  contain = false,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FooterProps
+
+const classes = resolveClasses(footer, { contain }, useUi("footer", uiProp), className)
+---
+
+<footer
+  class:list={[classes.root]}
+  data-slot="root"
+  {...rest}
+>
+  <div class:list={[classes.container]}>
+    <div class:list={[classes.left]} data-slot="left">
+      <slot name="left" />
+    </div>
+    <div class:list={[classes.center]} data-slot="center">
+      <slot name="center" />
+    </div>
+    <div class:list={[classes.right]} data-slot="right">
+      <slot name="right" />
+    </div>
+  </div>
+</footer>

package/src/components/astro/RLAForm.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { FormProps } from "../../types"
+import formThemeDefault, { createFormTheme } from "../../themes/form.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const formTheme = uiConfig.colors ? createFormTheme() : formThemeDefault
+
+const form = scv(formTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as FormProps
+
+const classes = resolveClasses(form, {}, useUi("form", uiProp), className);
+---
+<form class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</form>

package/src/components/astro/{RLAField.astro → RLAFormField.astro}

@@ -1,11 +1,11 @@
 ---
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { FieldProps } from "../../types"
-import fieldThemeDefault, { createFieldTheme } from "../../themes/field.theme"
+import type { FormFieldProps } from "../../types"
+import formFieldThemeDefault, { createFormFieldTheme } from "../../themes/form-field.theme"
 
-const fieldTheme = fieldThemeDefault
-const field = scv(fieldTheme)
+const formFieldTheme = formFieldThemeDefault
+const formField = scv(formFieldTheme)
 
 const {
   label,
@@ -16,11 +16,11 @@ const {
   ui: uiProp,
   class: className,
   ...rest
-} = Astro.props as FieldProps
+} = Astro.props as FormFieldProps
 
-const classes = resolveClasses(field, {
+const classes = resolveClasses(formField, {
   size
-}, useUi("field", uiProp), className);
+}, useUi("formField", uiProp), className);
 ---
 <div class={classes.root} data-slot="root" {...rest}>
   {label && (

package/src/components/astro/RLAGallery.astro

@@ -0,0 +1,23 @@
+---
+import { scv } from "css-variants"
+import { useUi, resolveClasses } from "../../utils"
+import type { GalleryProps } from "../../types"
+import galleryThemeDefault, { createGalleryTheme } from "../../themes/gallery.theme"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const uiConfig = getUIConfig()
+const galleryTheme = uiConfig.colors ? createGalleryTheme() : galleryThemeDefault
+
+const gallery = scv(galleryTheme)
+
+const {
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as GalleryProps
+
+const classes = resolveClasses(gallery, {}, useUi("gallery", uiProp), className);
+---
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot />
+</div>

package/src/components/astro/RLAGrid.astro

@@ -0,0 +1,39 @@
+---
+interface Props {
+  stagger?: boolean
+  class?: string
+}
+
+const { stagger = false, class: className = "", ...rest } = Astro.props
+---
+
+<div class:list={["rl-grid", { stagger }, className]} {...rest}>
+  <slot />
+</div>
+
+<style>
+  .rl-grid {
+    display: grid;
+    grid-template-columns: 100%;
+    gap: 1rem;
+  }
+
+  .rl-grid > :global(*) {
+    margin-top: 0 !important;
+  }
+
+  @media (min-width: 50rem) {
+    .rl-grid {
+      grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+    }
+    .stagger {
+      --stagger-height: 5rem;
+      padding-bottom: var(--stagger-height);
+    }
+
+    .stagger > :global(*):nth-child(2n) {
+      transform: translateY(var(--stagger-height));
+    }
+  }
+</style>

package/src/components/astro/RLAHead.astro

@@ -163,18 +163,34 @@ const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : '
 
 <script is:inline>
   (function() {
-    const stored = localStorage.getItem('theme');
-    if (stored) {
-      if (stored === 'dark') {
-        document.documentElement.classList.add('dark');
+    function getThemeClass() {
+      var stored = localStorage.getItem('theme');
+      if (stored === 'dark') return 'dark';
+      if (stored === 'light') return '';
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '';
+    }
+
+    function applyTheme(doc) {
+      var cls = getThemeClass();
+      if (cls) {
+        doc.documentElement.classList.add('dark');
       } else {
-        document.documentElement.classList.remove('dark');
-      }
-    } else {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.classList.add('dark');
+        doc.documentElement.classList.remove('dark');
       }
     }
+
+    // Apply immediately on initial load
+    applyTheme(document);
+
+    // Apply to incoming document BEFORE the swap — eliminates the flash
+    document.addEventListener('astro:before-swap', function(e) {
+      applyTheme(e.newDocument);
+    });
+
+    // Safety net: re-apply after swap in case anything overrides it
+    document.addEventListener('astro:after-swap', function() {
+      applyTheme(document);
+    });
   })();
 </script>