@rimelight/ui 0.0.37 → 0.0.39

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

@@ -0,0 +1,24 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createFieldGroupTheme = () =>
+  defineTheme({
+    slots: ["root", "prepend", "append"],
+    base: {
+      root: "relative flex items-stretch w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 overflow-hidden",
+      prepend:
+        "flex items-center bg-muted px-3 text-sm text-muted-foreground border-r border-input",
+      append: "flex items-center bg-muted px-3 text-sm text-muted-foreground border-l border-input"
+    },
+    variants: {
+      size: {
+        sm: { prepend: "px-2 text-xs", append: "px-2 text-xs" },
+        md: { prepend: "px-3 text-sm", append: "px-3 text-sm" },
+        lg: { prepend: "px-4 text-base", append: "px-4 text-base" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createFieldGroupTheme()

package/src/components/fieldset/RLAFieldset.astro

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

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

package/src/components/file-upload/RLAFileUpload.astro

@@ -0,0 +1,147 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { FileUploadProps } from "./file-upload"
+import fileUploadTheme from "./file-upload.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const fileUpload = scv(fileUploadTheme)
+
+const {
+  accept,
+  multiple = false,
+  disabled = false,
+  title = "Drop files here or click to upload",
+  description = "Supports any file type",
+  icon = "uploadCloud",
+  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">
+        <RLAIcon name={icon} class={classes.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/file-upload/file-upload.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createFileUploadTheme = () =>
+  defineTheme({
+    slots: ["root", "input", "content", "icon", "title", "description"],
+    base: {
+      root: "flex flex-col items-center justify-center w-full min-h-[150px] border-2 border-dashed border-border rounded-lg bg-background/50 hover:bg-muted/30 transition-colors cursor-pointer select-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+      input: "absolute opacity-0 size-0 pointer-events-none",
+      content: "flex flex-col items-center justify-center p-6 text-center gap-1.5",
+      icon: "size-8 text-muted-foreground",
+      title: "text-sm font-semibold text-foreground",
+      description: "text-xs text-muted-foreground"
+    },
+    variants: {
+      disabled: {
+        true: { root: "opacity-50 cursor-not-allowed pointer-events-none" }
+      }
+    },
+    defaultVariants: {
+      disabled: false
+    }
+  })
+
+export default createFileUploadTheme()

package/src/components/file-upload/file-upload.ts

@@ -0,0 +1,40 @@
+import type { ThemeColor } from "../../types/component"
+export interface FileUploadProps {
+  /**
+   * Accepted file types (e.g. 'image/*', 'application/pdf').
+   */
+  accept?: string
+  /**
+   * Allow multiple file selection.
+   */
+  multiple?: boolean
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
+  /**
+   * Title text shown inside the file upload area.
+   */
+  title?: string
+  /**
+   * Description text shown inside.
+   */
+  description?: string
+  /**
+   * Icon shown inside.
+   */
+  icon?: string
+  /**
+   * Color theme.
+   */
+  color?: ThemeColor
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/components/floating-action/RLAFloatingAction.astro

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

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

package/src/components/footer/RLAFooter.astro

@@ -0,0 +1,38 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { FooterProps } from "./footer"
+import footerTheme from "./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"
+  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/footer/footer.theme.ts

@@ -0,0 +1,30 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createFooterTheme = () =>
+  defineTheme({
+    slots: ["root", "container", "left", "center", "right"],
+    base: {
+      root: "py-8 lg:py-12 overflow-hidden",
+      container:
+        "box-border flex flex-col justify-between gap-xl lg:flex-row lg:items-stretch px-xs sm:px-md md:px-xl lg:px-xl w-full",
+      left: "order-last flex flex-col items-center justify-between gap-xl lg:order-1 lg:flex-none lg:items-start",
+      center: "flex flex-col items-center justify-start lg:order-2 lg:flex-1",
+      right:
+        "order-first flex flex-col items-center justify-between gap-xl lg:order-3 lg:flex-none lg:items-end"
+    },
+    variants: {
+      contain: {
+        true: {
+          container: "mx-auto max-w-(--rl-container)"
+        },
+        false: {
+          container: "w-full"
+        }
+      }
+    },
+    defaultVariants: {
+      contain: false
+    }
+  })
+
+export default createFooterTheme()

package/src/components/form/RLAForm.astro

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

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

package/src/components/form-field/RLAFormField.astro

@@ -0,0 +1,45 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { FormFieldProps } from "./form-field"
+import formFieldTheme from "./form-field.theme"
+
+
+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/form-field/RLVFormField.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import type { FormFieldProps } from "./form-field"
+import formFieldTheme from "./form-field.theme"
+
+const formField = scv(formFieldTheme)
+
+const props = withDefaults(defineProps<FormFieldProps>(), {
+  size: "md"
+})
+
+const slots = useSlots()
+
+const resolvedClasses = computed(() =>
+  resolveClasses(
+    formField,
+    {
+      size: props.size
+    },
+    useUi("formField", props.ui),
+    props.class
+  )
+)
+</script>
+
+<template>
+  <div :class="resolvedClasses.root" data-slot="root">
+    <div v-if="label || slots.label" class="flex items-center justify-between gap-2">
+      <label v-if="label || slots.label" :class="resolvedClasses.label" data-slot="label">
+        <slot name="label">{{ label }}</slot>
+        <span v-if="required" class="text-error-500">*</span>
+      </label>
+      <slot name="hint" />
+    </div>
+
+    <p
+      v-if="description || slots.description"
+      :class="resolvedClasses.description"
+      data-slot="description"
+    >
+      <slot name="description">{{ description }}</slot>
+    </p>
+
+    <div class="relative">
+      <slot :ui="resolvedClasses" />
+    </div>
+
+    <p v-if="error || slots.error" :class="resolvedClasses.error" data-slot="error">
+      <slot name="error">{{ error }}</slot>
+    </p>
+
+    <div v-if="slots.help" class="mt-1">
+      <slot name="help" />
+    </div>
+  </div>
+</template>

package/src/components/form-field/form-field.theme.ts

@@ -0,0 +1,24 @@
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createFormFieldTheme = () =>
+  defineTheme({
+    slots: ["root", "label", "description", "error"],
+    base: {
+      root: "flex flex-col gap-1.5 w-full",
+      label: "text-sm font-medium text-foreground",
+      description: "text-xs text-muted-foreground leading-normal",
+      error: "text-xs font-medium text-error-500 leading-normal"
+    },
+    variants: {
+      size: {
+        sm: { label: "text-xs", description: "text-[10px]", error: "text-[10px]" },
+        md: { label: "text-sm", description: "text-xs", error: "text-xs" },
+        lg: { label: "text-base", description: "text-sm", error: "text-sm" }
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  })
+
+export default createFormFieldTheme()

package/src/components/gallery/RLAGallery.astro

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

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