@rimelight/ui 0.0.42 → 0.0.44

package/src/components/dropdown-menu/dropdown-menu.ts

@@ -1,20 +1,42 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
+
 export interface DropdownMenuItem {
-  label: string
-  value?: string
+  label?: string
   icon?: string
+  avatar?: {
+    src: string
+    loading?: "lazy" | "eager"
+    alt?: string
+  }
   shortcut?: string
-  disabled?: boolean
-  type?: "item" | "checkbox" | "radio" | "separator" | "label"
+  kbds?: string[]
+  type?: "link" | "label" | "separator" | "checkbox" | "item"
+  color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral"
   checked?: boolean
-  group?: string
+  disabled?: boolean
+  slot?: string
+  onSelect?: (e: Event) => void
+  onUpdateChecked?: (checked: boolean) => void
+  children?: DropdownMenuItem[] | DropdownMenuItem[][]
+  to?: string
+  target?: string
+  class?: any
+  ui?: any
+  [key: string]: any
+}
+
+export interface DropdownMenuContentProps {
+  align?: "start" | "center" | "end"
+  side?: "top" | "right" | "bottom" | "left"
+  sideOffset?: number
+  [key: string]: any
 }
 
 export interface DropdownMenuProps {
   /**
-   * The menu items array.
+   * The menu items array (single level or grouped array).
    */
-  items?: DropdownMenuItem[]
+  items?: DropdownMenuItem[] | DropdownMenuItem[][]
   /**
    * The trigger button label.
    */
@@ -26,11 +48,27 @@ export interface DropdownMenuProps {
   /**
    * Size scale.
    */
-  size?: "sm" | "md" | "lg"
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
   /**
    * Color theme of the trigger.
    */
   color?: ThemeColor
+  /**
+   * Display an arrow alongside the menu.
+   */
+  arrow?: boolean
+  /**
+   * Content options like align and sideOffset.
+   */
+  content?: DropdownMenuContentProps
+  /**
+   * Modal interaction lock.
+   */
+  modal?: boolean
+  /**
+   * Disabled state.
+   */
+  disabled?: boolean
   /**
    * Slot-specific CSS class overrides.
    */

package/src/components/editor/RLAEditor.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { EditorProps } from "./editor"
-import editorTheme from "./editor.theme"
-
-
-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 />
+---
+import { editorTheme } from "./editor.theme"
+
+
+
+const classes = editorTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/editor/editor.theme.ts

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

package/src/components/empty/RLAEmpty.astro

@@ -1,21 +1,87 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { EmptyProps } from "./empty"
-import emptyTheme from "./empty.theme"
-
-
-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 />
+---
+import type { EmptyProps } from "./empty"
+import { emptyTheme } from "./empty.theme"
+import RLAButton from "../button/RLAButton.astro"
+import RLAAvatar from "../avatar/RLAAvatar.astro"
+import RLAIcon from "../icon/RLAIcon.astro"
+
+
+const {
+  icon,
+  avatar: avatarProp,
+  loading = false,
+  loadingIcon = "i-lucide-loader-circle",
+  title,
+  description,
+  actions = [],
+  variant = "outline",
+  size = "md",
+  ...rest
+} = Astro.props as EmptyProps
+
+const classes = emptyTheme(Astro.props)
+
+const activeIcon = loading ? loadingIcon : icon
+---
+
+<div class={classes.root} data-slot="root" {...rest}>
+  <slot name="header">
+    <div class={classes.header} data-slot="header">
+      <slot name="leading">
+        {activeIcon ? (
+          <div class={classes.avatar} data-slot="avatar">
+            <RLAIcon name={activeIcon} class={`size-full ${loading ? 'animate-spin' : ''}`} aria-hidden="true" />
+          </div>
+        ) : avatarProp ? (
+          <div class={classes.avatar} data-slot="avatar">
+            <RLAAvatar {...avatarProp} />
+          </div>
+        ) : null}
+      </slot>
+
+      {(title || Astro.slots.has("title")) && (
+        <div class={classes.title} data-slot="title">
+          <slot name="title">{title}</slot>
+        </div>
+      )}
+
+      {(description || Astro.slots.has("description")) && (
+        <div class={classes.description} data-slot="description">
+          <slot name="description">{description}</slot>
+        </div>
+      )}
+    </div>
+  </slot>
+
+  {(Astro.slots.has("body") || Astro.slots.has("default")) && (
+    <div class={classes.body} data-slot="body">
+      <slot name="body">
+        <slot />
+      </slot>
+    </div>
+  )}
+
+  {(actions.length > 0 || Astro.slots.has("actions")) && (
+    <div class={classes.actions} data-slot="actions">
+      <slot name="actions">
+        {actions.map((action) => (
+          <RLAButton
+            size={size === "xs" ? "xs" : size === "sm" ? "xs" : "sm"}
+            color={action.color || "primary"}
+            variant={action.variant || "solid"}
+            leadingIcon={action.icon}
+            {...action}
+          >
+            {action.label}
+          </RLAButton>
+        ))}
+      </slot>
+    </div>
+  )}
+
+  {Astro.slots.has("footer") && (
+    <div class={classes.footer} data-slot="footer">
+      <slot name="footer" />
+    </div>
+  )}
 </div>

package/src/components/empty/empty.theme.ts

@@ -1,13 +1,81 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createEmptyTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
+export const emptyTheme = defineTheme("empty", {
+  slots: ["root", "header", "avatar", "title", "description", "body", "actions", "footer"],
+  base: {
+    root: "relative flex flex-col items-center justify-center gap-4 rounded-lg p-4 sm:p-6 lg:p-8 min-w-0 text-center",
+    header: "flex flex-col items-center gap-2 max-w-sm text-center",
+    avatar: "shrink-0 mb-2 flex items-center justify-center",
+    title: "text-gray-100 font-medium text-pretty",
+    description: "text-gray-400 text-balance text-center text-sm",
+    body: "flex flex-col items-center gap-4 max-w-sm w-full",
+    actions: "flex flex-wrap justify-center gap-2 shrink-0 mt-1",
+    footer: "flex flex-col items-center gap-2 max-w-sm w-full"
+  },
+  variants: {
+    size: {
+      xs: {
+        root: "p-3 gap-2",
+        avatar: "size-8 text-base",
+        title: "text-sm font-semibold",
+        description: "text-xs"
+      },
+      sm: {
+        root: "p-4 gap-3",
+        avatar: "size-9 text-lg",
+        title: "text-sm font-semibold",
+        description: "text-xs"
+      },
+      md: {
+        root: "p-6 gap-4",
+        avatar: "size-10 text-xl",
+        title: "text-base font-semibold",
+        description: "text-sm"
+      },
+      lg: {
+        root: "p-8 gap-5",
+        avatar: "size-11 text-[22px]",
+        title: "text-base font-semibold",
+        description: "text-sm"
+      },
+      xl: {
+        root: "p-10 gap-6",
+        avatar: "size-12 text-2xl",
+        title: "text-lg font-bold",
+        description: "text-base"
+      }
     },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createEmptyTheme()
+    variant: {
+      solid: {
+        root: "bg-gray-900 border border-gray-800 text-gray-100",
+        title: "text-white",
+        description: "text-gray-400"
+      },
+      outline: {
+        root: "bg-gray-900/50 border border-gray-800/80 rounded-lg",
+        description: "text-gray-400"
+      },
+      soft: {
+        root: "bg-gray-800/40 border border-transparent",
+        description: "text-gray-400"
+      },
+      subtle: {
+        root: "bg-gray-800/30 border border-gray-700/50",
+        description: "text-gray-400"
+      },
+      naked: {
+        root: "bg-transparent border border-transparent p-0",
+        description: "text-gray-400"
+      }
+    },
+    loading: {
+      true: {
+        avatar: "[&>[data-slot=icon]]:animate-spin [&>i]:animate-spin"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outline",
+    size: "md"
+  }
+})

package/src/components/empty/empty.ts

@@ -1,8 +1,65 @@
 export interface EmptyProps {
   /**
-   * Slot-specific CSS class overrides.
+   * Element or tag to render as (default: "div")
    */
-  ui?: any
+  as?: string
+  /**
+   * Icon displayed above the title.
+   */
+  icon?: string
+  /**
+   * Avatar properties object
+   */
+  avatar?: Record<string, any>
+  /**
+   * When true, the loading icon will be displayed.
+   */
+  loading?: boolean
+  /**
+   * The icon when the loading prop is true (default: "i-lucide-loader-circle")
+   */
+  loadingIcon?: string
+  /**
+   * Title text
+   */
+  title?: string
+  /**
+   * Description text
+   */
+  description?: string
+  /**
+   * Display a list of Button actions in the body.
+   */
+  actions?: Array<{
+    label: string
+    icon?: string
+    color?: string
+    variant?: string
+    href?: string
+    class?: string
+    [key: string]: any
+  }>
+  /**
+   * Variant styling: outline (default), solid, soft, subtle, naked
+   */
+  variant?: "outline" | "solid" | "soft" | "subtle" | "naked"
+  /**
+   * Size variant: md (default), xs, sm, lg, xl
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  /**
+   * Slot-specific CSS class overrides
+   */
+  ui?: {
+    root?: string
+    header?: string
+    avatar?: string
+    title?: string
+    description?: string
+    body?: string
+    actions?: string
+    footer?: string
+  }
   /**
    * Additional CSS classes to apply to the root element.
    */

package/src/components/error/RLAError.astro

@@ -1,21 +1,10 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { ErrorProps } from "./error"
-import errorTheme from "./error.theme"
-
-
-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 />
+---
+import { errorTheme } from "./error.theme"
+
+
+
+const classes = errorTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/error/error.theme.ts

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

package/src/components/field-group/RLAFieldGroup.astro

@@ -1,25 +1,16 @@
 ---
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
 import type { FieldGroupProps } from "./field-group"
-import fieldGroupTheme from "./field-group.theme"
+import { fieldGroupTheme } from "./field-group.theme"
 
 
-const fieldGroup = scv(fieldGroupTheme)
 
 const {
   prepend,
   append,
-  size = "md",
-  ui: uiProp,
-  class: className,
   ...rest
 } = Astro.props as FieldGroupProps
 
-const classes = resolveClasses(fieldGroup, {
-  size
-}, useUi("fieldGroup", uiProp), className);
+const classes = fieldGroupTheme(Astro.props);
 ---
 <div class={classes.root} data-slot="root" {...rest}>
   {prepend && (

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

@@ -1,24 +1,20 @@
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-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 const fieldGroupTheme = defineTheme("field-group", {
+  slots: ["root", "prepend", "append"],
+  base: {
+    root: "relative flex items-stretch w-full rounded-md border border-default bg-default 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 border-r border-default",
+    append: "flex items-center bg-muted px-3 text-sm text-muted border-l border-default"
+  },
+  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" }
     }
-  })
-
-export default createFieldGroupTheme()
+  },
+  defaultVariants: {
+    size: "md"
+  }
+})

package/src/components/fieldset/RLAFieldset.astro

@@ -1,21 +1,10 @@
----
-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 />
+---
+import { fieldsetTheme } from "./fieldset.theme"
+
+
+
+const classes = fieldsetTheme(Astro.props)
+---
+<div class={classes.root} data-slot="root" {...Astro.props}>
+  <slot />
 </div>

package/src/components/fieldset/fieldset.theme.ts

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

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

@@ -1,13 +1,9 @@
 ---
-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 { fileUploadTheme } from "./file-upload.theme"
 import RLAIcon from "../icon/RLAIcon.astro"
 
 
-const fileUpload = scv(fileUploadTheme)
 
 const {
   accept,
@@ -16,15 +12,10 @@ const {
   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 classes = fileUploadTheme(Astro.props)
 
 const inputId = `fileUpload-${Math.random().toString(36).slice(2, 9)}`
 ---
@@ -62,14 +53,14 @@ const inputId = `fileUpload-${Math.random().toString(36).slice(2, 9)}`
           <p class={classes.description} data-slot="description">{description}</p>
         )}
         {accept && (
-          <p class="mt-1 text-[10px] text-muted-foreground/70">
+          <p class="mt-1 text-[10px] text-muted/70">
             Accepted: <span class="font-mono">{accept}</span>
           </p>
         )}
       </slot>
 
       <div
-        class="mt-3 hidden text-xs text-muted-foreground"
+        class="mt-3 hidden text-xs text-muted"
         data-fileUpload-filelist
         aria-live="polite"
       />