@rimelight/ui 0.0.42 → 0.0.44

package/src/components/select/select.ts

@@ -1,44 +1,66 @@
-import type { ThemeColor } from "../../types/component"
+import type { ThemeColor } from "../../types"
+
+export type SelectItem =
+  | string
+  | number
+  | boolean
+  | {
+      label?: string
+      value?: any
+      description?: string
+      icon?: string
+      avatar?: { src?: string; alt?: string; loading?: "lazy" | "eager" }
+      chip?: { color?: string }
+      disabled?: boolean
+      type?: "item" | "label" | "separator"
+      class?: any
+      [key: string]: any
+    }
+  | SelectItem[]
+
 export interface SelectProps {
-  /**
-   * List of options.
-   */
-  items?: Array<{ label: string; value: string; [key: string]: any } | string>
-  /**
-   * Selected value.
-   */
-  value?: string | string[]
-  /**
-   * Placeholder text.
-   */
+  id?: string
+  name?: string
+  form?: string
   placeholder?: string
-  /**
-   * Disabled state.
-   */
+  items?: SelectItem[]
+  value?: any
+  defaultValue?: any
+  modelValue?: any
+  createItem?: boolean | "always" | { position?: "top" | "bottom"; when?: "always" | "empty" }
+  searchInput?: boolean | { placeholder?: string; icon?: string; variant?: string }
+  multiple?: boolean
+  clear?: boolean | object
+  clearIcon?: string
+  valueKey?: string
+  labelKey?: string
+  descriptionKey?: string
+  filterFields?: string[]
+  ignoreFilter?: boolean
   disabled?: boolean
-  /**
-   * Form control name.
-   */
-  name?: string
-  /**
-   * Form label.
-   */
+  required?: boolean
+  color?:
+    | ThemeColor
+    | "primary"
+    | "secondary"
+    | "success"
+    | "info"
+    | "warning"
+    | "error"
+    | "neutral"
+  variant?: "outline" | "soft" | "subtle" | "ghost" | "none"
+  theme?: "light" | "dark"
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  highlight?: boolean
+  icon?: string
+  leadingIcon?: string
+  trailingIcon?: string
+  selectedIcon?: string
+  loadingIcon?: string
+  loading?: boolean
+  avatar?: { src?: string; alt?: string; loading?: "lazy" | "eager" }
   label?: string
-  /**
-   * Size scale.
-   */
-  size?: "sm" | "md" | "lg"
-  /**
-   * 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/separator/RLASeparator.astro

@@ -1,83 +1,62 @@
----
-import { scv } from "css-variants"
-import { useUi } from "../../utils/useUi"
-import { resolveClasses } from "../../utils/resolveClasses"
-import type { SeparatorProps } from "./separator"
-import { resolveTheme } from "../../utils/resolveTheme"
-import separatorThemeDefault, { createSeparatorTheme } from "./separator.theme"
-const separatorTheme = resolveTheme(separatorThemeDefault, createSeparatorTheme)
-import RLAAvatar from "../avatar/RLAAvatar.astro"
-import { cx } from "css-variants"
-
-
-const separator = scv(separatorTheme)
-
-const {
-  orientation = "horizontal",
-  color = "neutral",
-  size = "xs",
-  type = "solid",
-  label,
-  icon,
-  avatar,
-  position = "center",
-  decorative = true,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as SeparatorProps & {
-  color?: string
-  size?: "xs" | "sm" | "md" | "lg" | "xl"
-  type?: "solid" | "dashed" | "dotted"
-  position?: "start" | "center" | "end"
-}
-
-const classes = resolveClasses(separator, {
-  orientation,
-  color: color as "neutral",
-  size: size as "xs",
-  type: type as "solid",
-  position: position as "center"
-}, useUi("separator", uiProp), className)
----
-<div
-  class={classes.root}
-  data-slot="root"
-  role={decorative ? "none" : "separator"}
-  aria-orientation={decorative ? undefined : orientation}
-  {...rest}
->
-  <div class={classes.border} />
-
-  {(label || icon || avatar || Astro.slots.has("default")) && (
-    <>
-      <div class={classes.container} data-slot="container">
-        <slot name="avatar">
-          {avatar && (
-            <RLAAvatar 
-              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
-              size={classes.avatarSize as any} 
-              class={classes.avatar} 
-              data-slot="avatar" 
-            />
-          )}
-        </slot>
-        
-        <slot name="icon">
-          {icon && (
-            <span class={classes.icon} data-slot="icon">
-              <span class={cx(icon)} aria-hidden="true" />
-            </span>
-          )}
-        </slot>
-
-        <span class={classes.label} data-slot="label">
-          {label}
-          <slot />
-        </span>
-      </div>
-
-      <div class={classes.border} />
-    </>
-  )}
-</div>
+---
+import type { SeparatorProps } from "./separator"
+import { separatorTheme } from "./separator.theme"
+import RLAAvatar from "../avatar/RLAAvatar.astro"
+
+
+
+const {
+  orientation = "horizontal",
+  size = "xs",
+  label,
+  icon,
+  avatar,
+  decorative = true,
+  ...rest
+} = Astro.props as SeparatorProps
+
+
+
+const classes = separatorTheme(Astro.props)
+---
+<div
+  class={classes.root}
+  data-slot="root"
+  role={decorative ? "none" : "separator"}
+  aria-orientation={decorative ? undefined : orientation}
+  {...rest}
+>
+  <div class={classes.border} />
+
+  {(label || icon || avatar || Astro.slots.has("default")) && (
+    <>
+      <div class={classes.container} data-slot="container">
+        <slot name="avatar">
+          {avatar && (
+            <RLAAvatar 
+              {...(typeof avatar === 'string' ? { src: avatar } : avatar)} 
+              size={classes.avatarSize as any} 
+              class={classes.avatar} 
+              data-slot="avatar" 
+            />
+          )}
+        </slot>
+        
+        <slot name="icon">
+          {icon && (
+            <span class={classes.icon} data-slot="icon">
+              <span class={icon as string} aria-hidden="true" />
+            </span>
+          )}
+        </slot>
+
+        <span class={classes.label} data-slot="label">
+          {label}
+          <slot />
+        </span>
+      </div>
+
+      <div class={classes.border} />
+    </>
+  )}
+</div>

package/src/components/separator/separator.theme.ts

@@ -1,147 +1,144 @@
-import { colorConfig } from "../../config/color.config"
-import { defineTheme } from "../../utils/defineTheme"
+import { defineTheme } from "../../resolver"
 
-export const createSeparatorTheme = (colors: readonly string[] = colorConfig.colors) =>
-  defineTheme({
-    slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
-    base: {
-      root: "flex items-center align-center text-center",
-      border: "",
-      container: "font-medium text-default flex",
-      icon: "shrink-0 size-5",
-      avatar: "shrink-0",
-      avatarSize: "2xs",
-      label: "text-sm"
-    },
-    variants: {
-      color: {
-        ...Object.fromEntries(colors.map((color) => [color, { border: `border-${color}` }])),
-        neutral: { border: "border-default" }
-      },
-      orientation: {
-        horizontal: {
-          root: "w-full flex-row",
-          border: "w-full",
-          container: "whitespace-nowrap"
-        },
-        vertical: {
-          root: "h-full flex-col",
-          border: "h-full",
-          container: ""
-        }
-      },
-      size: {
-        xs: {},
-        sm: {},
-        md: {},
-        lg: {},
-        xl: {}
-      },
-      position: {
-        start: {},
-        center: {},
-        end: {}
-      },
-      type: {
-        solid: {
-          border: "border-solid"
-        },
-        dashed: {
-          border: "border-dashed"
-        },
-        dotted: {
-          border: "border-dotted"
-        }
+export const separatorTheme = defineTheme("separator", {
+  slots: ["root", "border", "container", "icon", "avatar", "avatarSize", "label"],
+  base: {
+    root: "flex items-center align-center text-center",
+    border: "border-[var(--rl-border)]",
+    container: "font-medium text-default flex",
+    icon: "shrink-0 size-5",
+    avatar: "shrink-0",
+    avatarSize: "2xs",
+    label: "text-sm"
+  },
+  variants: {
+    color: "auto",
+    orientation: {
+      horizontal: {
+        root: "w-full flex-row",
+        border: "w-full",
+        container: "whitespace-nowrap"
+      },
+      vertical: {
+        root: "h-full flex-col",
+        border: "h-full",
+        container: ""
       }
     },
-    compoundVariants: [
-      {
-        orientation: "horizontal",
-        position: "start",
-        classNames: { container: "me-3" }
-      },
-      {
-        orientation: "horizontal",
-        position: "center",
-        classNames: { container: "mx-3" }
-      },
-      {
-        orientation: "horizontal",
-        position: "end",
-        classNames: { container: "ms-3" }
-      },
-      {
-        orientation: "vertical",
-        position: "start",
-        classNames: { container: "mb-2" }
-      },
-      {
-        orientation: "vertical",
-        position: "center",
-        classNames: { container: "my-2" }
-      },
-      {
-        orientation: "vertical",
-        position: "end",
-        classNames: { container: "mt-2" }
-      },
-      {
-        orientation: "horizontal",
-        size: "xs",
-        classNames: { border: "border-t" }
-      },
-      {
-        orientation: "horizontal",
-        size: "sm",
-        classNames: { border: "border-t-[2px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "md",
-        classNames: { border: "border-t-[3px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "lg",
-        classNames: { border: "border-t-[4px]" }
-      },
-      {
-        orientation: "horizontal",
-        size: "xl",
-        classNames: { border: "border-t-[5px]" }
-      },
-      {
-        orientation: "vertical",
-        size: "xs",
-        classNames: { border: "border-s" }
-      },
-      {
-        orientation: "vertical",
-        size: "sm",
-        classNames: { border: "border-s-[2px]" }
-      },
-      {
-        orientation: "vertical",
-        size: "md",
-        classNames: { border: "border-s-[3px]" }
+    size: {
+      xs: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {}
+    },
+    position: {
+      start: {},
+      center: {},
+      end: {}
+    },
+    type: {
+      solid: {
+        border: "border-solid"
       },
-      {
-        orientation: "vertical",
-        size: "lg",
-        classNames: { border: "border-s-[4px]" }
+      dashed: {
+        border: "border-dashed"
       },
-      {
-        orientation: "vertical",
-        size: "xl",
-        classNames: { border: "border-s-[5px]" }
+      dotted: {
+        border: "border-dotted"
       }
-    ],
-    defaultVariants: {
+    }
+  },
+  compoundVariants: [
+    {
       color: "neutral",
+      classNames: { border: "border-default" }
+    },
+    {
+      orientation: "horizontal",
+      position: "start",
+      classNames: { container: "me-3" }
+    },
+    {
+      orientation: "horizontal",
+      position: "center",
+      classNames: { container: "mx-3" }
+    },
+    {
+      orientation: "horizontal",
+      position: "end",
+      classNames: { container: "ms-3" }
+    },
+    {
+      orientation: "vertical",
+      position: "start",
+      classNames: { container: "mb-2" }
+    },
+    {
+      orientation: "vertical",
+      position: "center",
+      classNames: { container: "my-2" }
+    },
+    {
+      orientation: "vertical",
+      position: "end",
+      classNames: { container: "mt-2" }
+    },
+    {
+      orientation: "horizontal",
       size: "xs",
-      type: "solid",
-      orientation: "horizontal"
+      classNames: { border: "border-t" }
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      classNames: { border: "border-t-[2px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      classNames: { border: "border-t-[3px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      classNames: { border: "border-t-[4px]" }
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      classNames: { border: "border-t-[5px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "xs",
+      classNames: { border: "border-s" }
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      classNames: { border: "border-s-[2px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      classNames: { border: "border-s-[3px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      classNames: { border: "border-s-[4px]" }
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      classNames: { border: "border-s-[5px]" }
     }
-  })
-
-export default createSeparatorTheme()
+  ],
+  defaultVariants: {
+    color: "neutral",
+    size: "xs",
+    type: "solid",
+    orientation: "horizontal"
+  }
+})

package/src/components/separator/separator.ts

@@ -1,4 +1,8 @@
 export interface SeparatorProps {
+  color?: string
+  size?: "xs" | "sm" | "md" | "lg" | "xl"
+  type?: "solid" | "dashed" | "dotted"
+  position?: "start" | "center" | "end"
   /**
    * The visual layout orientation.
    */

package/src/components/shortcuts/RLAShortcuts.astro

@@ -1,6 +1,6 @@
 ---
 import RLAIcon from "../icon/RLAIcon.astro"
-import { getUIConfig } from "virtual:rimelight-ui"
+import uiConfig from "virtual:rimelight/ui"
 
 interface Props {
   categories?: Record<string, string>
@@ -11,7 +11,6 @@ const {
   ...rest
 } = Astro.props as Props
 
-const uiConfig = getUIConfig()
 const configCategories = uiConfig.shortcuts?.categories || {}
 
 // Resolve categories: prop overrides -> integration config -> fallback key
@@ -41,7 +40,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
       <div class="rla-shortcuts-header">
         <h3 id={`${modalId}-title`} class="rla-shortcuts-title">Keyboard Shortcuts</h3>
         <button class="rla-shortcuts-close" aria-label="Close shortcuts help">
-          <RLAIcon name="close" class="w-4 h-4" />
+          <RLAIcon name="i-rl-close" class="w-4 h-4" />
         </button>
       </div>
 
@@ -57,8 +56,8 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
 </rla-shortcuts>
 
 <script>
-  import { activeShortcutsStore, defineShortcuts } from "../../utils/shortcuts"
-  import type { RegisteredShortcut } from "../../utils/shortcuts"
+  import { activeShortcutsStore, defineShortcuts } from "../../shortcuts"
+  import type { RegisteredShortcut } from "../../shortcuts"
 
   class RLAShortcuts extends HTMLElement {
     private shortcutsCleanup: (() => void) | null = null;
@@ -301,7 +300,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
   .rla-shortcuts-close {
     background: transparent;
     border: none;
-    color: var(--color-neutral-400, #a3a3a3);
+    color: var(--rl-neutral-400, #a3a3a3);
     cursor: pointer;
     padding: 6px;
     border-radius: 6px;
@@ -313,7 +312,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
 
   .rla-shortcuts-close:hover {
     color: #fff;
-    background-color: var(--color-neutral-800, #262626);
+    background-color: var(--rl-neutral-800, #262626);
   }
 
   .rla-shortcuts-close:focus {
@@ -321,7 +320,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
   }
 
   .rla-shortcuts-close:focus-visible {
-    outline: 2px solid var(--color-primary-500, #3b82f6) !important;
+    outline: 2px solid var(--rl-primary-500, #3b82f6) !important;
   }
 
   .rla-shortcuts-body {
@@ -344,7 +343,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
     font-size: 0.75rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
-    color: var(--color-primary-500, #3b82f6);
+    color: var(--rl-primary-500, #3b82f6);
     font-weight: 700;
   }
 
@@ -377,7 +376,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
 
   .rla-shortcuts-desc {
     font-size: 0.75rem;
-    color: var(--color-neutral-400, #a3a3a3);
+    color: var(--rl-neutral-400, #a3a3a3);
   }
 
   .rla-shortcuts-keys {
@@ -404,7 +403,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
 
   .rla-shortcuts-empty {
     font-size: 0.875rem;
-    color: var(--color-neutral-500, #737373);
+    color: var(--rl-neutral-500, #737373);
     text-align: center;
     padding: 16px 0;
   }
@@ -414,7 +413,7 @@ const modalId = `rla-shortcuts-${Math.random().toString(36).substring(2, 9)}`
     background-color: #09090b !important;
     border-top: 1px solid #27272a;
     font-size: 0.75rem;
-    color: var(--color-neutral-400, #a3a3a3);
+    color: var(--rl-neutral-400, #a3a3a3);
     display: flex;
     justify-content: flex-end;
   }