@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLAFileUpload.astro

@@ -1,148 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FileUploadProps } from "../../types"
-import fileUploadThemeDefault, { createFileUploadTheme } from "../../themes/file-upload.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const fileUploadTheme = uiConfig.colors ? createFileUploadTheme() : fileUploadThemeDefault
-const fileUpload = scv(fileUploadTheme)
-
-const {
-  accept,
-  multiple = false,
-  disabled = false,
-  title = "Drop files here or click to upload",
-  description = "Supports any file type",
-  icon = "i-lucide-upload-cloud",
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FileUploadProps
-
-const classes = resolveClasses(fileUpload, {
-  disabled
-}, useUi("fileUpload", uiProp), className)
-
-const inputId = `fileUpload-${Math.random().toString(36).slice(2, 9)}`
----
-
-<rla-file-upload {...rest}>
-  <div
-    class={classes.root}
-    data-slot="root"
-    data-fileUpload
-    data-disabled={disabled ? "true" : undefined}
-    role="button"
-    tabindex={disabled ? -1 : 0}
-    aria-label={title}
-  >
-    <input
-      id={inputId}
-      type="file"
-      class={classes.input}
-      accept={accept}
-      multiple={multiple}
-      disabled={disabled}
-      data-fileUpload-input
-      aria-hidden="true"
-      tabindex="-1"
-    />
-
-    <div class={classes.content} data-slot="content">
-      <slot name="icon">
-        <span class={classes.icon + " " + icon} aria-hidden="true" />
-      </slot>
-
-      <slot>
-        <p class={classes.title} data-slot="title">{title}</p>
-        {description && (
-          <p class={classes.description} data-slot="description">{description}</p>
-        )}
-        {accept && (
-          <p class="mt-1 text-[10px] text-muted-foreground/70">
-            Accepted: <span class="font-mono">{accept}</span>
-          </p>
-        )}
-      </slot>
-
-      <div
-        class="mt-3 hidden text-xs text-muted-foreground"
-        data-fileUpload-filelist
-        aria-live="polite"
-      />
-    </div>
-  </div>
-</rla-file-upload>
-
-<script>
-  class RLAFileUpload extends HTMLElement {
-    connectedCallback() {
-      this.style.display = 'contents';
-      const zone = this.querySelector("[data-fileUpload]") as HTMLElement | null;
-      if (!zone) return;
-
-      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";
-      if (isDisabled) return;
-
-      const showFiles = (files: FileList | null) => {
-        if (!fileList || !files || files.length === 0) return;
-        fileList.classList.remove("hidden");
-        fileList.textContent =
-          files.length === 1
-            ? files[0]!.name
-            : `${files.length} files selected`;
-      };
-
-      // Click anywhere on the zone to open file picker
-      zone.addEventListener("click", () => input.click());
-      zone.addEventListener("keydown", (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          input.click();
-        }
-      });
-
-      input.addEventListener("change", () => showFiles(input.files));
-
-      // Drag and drop
-      zone.addEventListener("dragover", (e) => {
-        e.preventDefault();
-        zone.classList.add("border-primary", "bg-primary/5");
-      });
-
-      zone.addEventListener("dragleave", () => {
-        zone.classList.remove("border-primary", "bg-primary/5");
-      });
-
-      zone.addEventListener("drop", (e) => {
-        e.preventDefault();
-        zone.classList.remove("border-primary", "bg-primary/5");
-        const dt = e.dataTransfer;
-        if (!dt) return;
-
-        // Transfer dropped files to the hidden input via DataTransfer trick
-        try {
-          const transfer = new DataTransfer();
-          Array.from(dt.files).forEach(f => transfer.items.add(f));
-          input.files = transfer.files;
-        } catch {
-          // Some browsers don't support assigning to input.files — graceful fallback
-        }
-
-        showFiles(dt.files);
-      });
-    }
-  }
-
-  if (!customElements.get('rla-file-upload')) {
-    customElements.define('rla-file-upload', RLAFileUpload);
-  }
-</script>

package/src/components/astro/RLAFloatingAction.astro

@@ -1,23 +0,0 @@
----
-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,40 +0,0 @@
----
-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"
-  data-contain={contain ? "true" : "false"}
-  {...rest}
->
-  <div class:list={[classes.container]} data-slot="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

@@ -1,23 +0,0 @@
----
-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/RLAFormField.astro

@@ -1,47 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { FormFieldProps } from "../../types"
-import formFieldThemeDefault, { createFormFieldTheme } from "../../themes/form-field.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const formFieldTheme = uiConfig.colors ? createFormFieldTheme() : formFieldThemeDefault
-const formField = scv(formFieldTheme)
-
-const {
-  id = `field-${Math.random().toString(36).substring(2, 9)}`,
-  label,
-  description,
-  error,
-  required = false,
-  size = "md",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as FormFieldProps & { id?: string }
-
-const classes = resolveClasses(formField, {
-  size
-}, useUi("formField", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  {label && (
-    <label for={id} class={classes.label} data-slot="label">
-      {label}
-      {required && <span class="text-error-500 ml-0.5" aria-hidden="true">*</span>}
-    </label>
-  )}
-  <slot />
-  {description && (
-    <p id={`${id}-description`} class={classes.description} data-slot="description">
-      {description}
-    </p>
-  )}
-  {error && (
-    <p id={`${id}-error`} class={classes.error} data-slot="error" aria-live="assertive">
-      {error}
-    </p>
-  )}
-</div>

package/src/components/astro/RLAGallery.astro

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

@@ -1,31 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { GridProps } from "../../types"
-import gridThemeDefault, { createGridTheme } from "../../themes/grid.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const gridTheme = uiConfig.colors ? createGridTheme() : gridThemeDefault
-
-const grid = scv(gridTheme)
-
-const {
-  cols = 2,
-  gap = "md",
-  stagger = false,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as GridProps
-
-const classes = resolveClasses(grid, {
-  cols: cols as any,
-  gap,
-  stagger
-}, useUi("grid", uiProp), className)
----
-
-<div class={classes.root} {...rest}>
-  <slot />
-</div>