@rimelight/ui 0.0.33 → 0.0.35

package/src/themes/timeline.theme.ts

@@ -1,13 +1,18 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createTimelineTheme = () =>
-  defineTheme({
-    slots: ["root"],
-    base: {
-      root: ""
-    },
-    variants: {},
-    defaultVariants: {}
-  })
-
-export default createTimelineTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createTimelineTheme = () =>
+  defineTheme({
+    slots: ["root", "node", "dot", "dotInner", "header", "content"],
+    base: {
+      root: "relative flex flex-col pl-6 border-l-2 border-gray-800 ml-2 py-2",
+      node: "relative timeline-node",
+      dot: "absolute -left-[33px] top-[2px] flex h-4 w-4 items-center justify-center rounded-full bg-gray-950 ring-2 ring-gray-800",
+      dotInner: "h-2 w-2 rounded-full bg-primary-500",
+      header: "flex items-center justify-between gap-4 mb-3",
+      content: "space-y-2 text-sm text-gray-400"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createTimelineTheme()

package/src/themes/toast.theme.ts

@@ -1,31 +1,31 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createToastTheme = () =>
-  defineTheme({
-    slots: ["root", "title", "description", "action", "close"],
-    base: {
-      root: "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
-      title: "text-sm font-semibold",
-      description: "text-xs opacity-90",
-      action:
-        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
-      close:
-        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
-    },
-    variants: {
-      variant: {
-        default: { root: "bg-background border-border" },
-        destructive: {
-          root: "destructive group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
-        },
-        success: {
-          root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400"
-        }
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  })
-
-export default createToastTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createToastTheme = () =>
+  defineTheme({
+    slots: ["root", "title", "description", "action", "close"],
+    base: {
+      root: "group pointer-events-auto relative flex w-full items-start justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
+      title: "text-sm font-semibold",
+      description: "text-xs opacity-90",
+      action:
+        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      close:
+        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
+    },
+    variants: {
+      variant: {
+        default: { root: "bg-background border-border" },
+        destructive: {
+          root: "destructive group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
+        },
+        success: {
+          root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400"
+        }
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  })
+
+export default createToastTheme()

package/src/themes/tooltip.theme.ts

@@ -1,28 +1,28 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createTooltipTheme = () =>
-  defineTheme({
-    slots: ["root", "trigger", "content"],
-    base: {
-      root: "relative inline-block group/tooltip",
-      trigger: "",
-      content: [
-        "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95",
-        "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
-        "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
-      ]
-    },
-    variants: {
-      placement: {
-        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-1.5" },
-        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-1.5" },
-        left: { content: "right-full top-1/2 -translate-y-1/2 mr-1.5" },
-        right: { content: "left-full top-1/2 -translate-y-1/2 ml-1.5" }
-      }
-    },
-    defaultVariants: {
-      placement: "top"
-    }
-  })
-
-export default createTooltipTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createTooltipTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "content"],
+    base: {
+      root: "relative inline-block group/tooltip",
+      trigger: "",
+      content: [
+        "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95",
+        "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
+        "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
+      ]
+    },
+    variants: {
+      placement: {
+        top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-1.5" },
+        bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-1.5" },
+        left: { content: "right-full top-1/2 -translate-y-1/2 mr-1.5" },
+        right: { content: "left-full top-1/2 -translate-y-1/2 ml-1.5" }
+      }
+    },
+    defaultVariants: {
+      placement: "top"
+    }
+  })
+
+export default createTooltipTheme()

package/src/themes/tour.theme.ts

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

package/src/themes/tree.theme.ts

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

package/src/themes/user.theme.ts

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

package/src/themes/video.theme.ts

@@ -1,17 +1,17 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export const createVideoTheme = () =>
-  defineTheme({
-    slots: ["root", "trigger", "image", "icon"],
-    base: {
-      root: "relative aspect-video h-full w-full cursor-pointer overflow-hidden",
-      trigger: "group absolute inset-0 aspect-video h-full w-full overflow-hidden",
-      image: "h-full w-full object-cover",
-      icon: "absolute inset-0 m-auto h-24 w-24 text-white opacity-75 transition-opacity group-hover:opacity-100"
-    },
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {}
-  })
-
-export default createVideoTheme()
+import { defineTheme } from "../utils/defineTheme"
+
+export const createVideoTheme = () =>
+  defineTheme({
+    slots: ["root", "trigger", "image", "icon"],
+    base: {
+      root: "relative aspect-video h-full w-full cursor-pointer overflow-hidden",
+      trigger: "group absolute inset-0 aspect-video h-full w-full overflow-hidden",
+      image: "h-full w-full object-cover",
+      icon: "absolute inset-0 m-auto h-24 w-24 text-white opacity-75 transition-opacity group-hover:opacity-100"
+    },
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {}
+  })
+
+export default createVideoTheme()

package/src/themes/watermark.theme.ts

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

package/src/themes/window-mockup.theme.ts

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

package/src/types/components/3d-hover.ts

@@ -1,11 +1,11 @@
-export interface ThreeDHoverProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
-  ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
-  class?: any
-  [key: string]: unknown
-}
+export interface ThreeDHoverProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/accordion.ts

@@ -1,8 +1,37 @@
+export interface AccordionItem {
+  label?: string
+  icon?: string
+  trailingIcon?: string
+  content?: string
+  disabled?: boolean
+  slot?: string
+  class?: any
+  ui?: any
+  [key: string]: unknown
+}
+
 export interface AccordionProps {
   /**
-   * The summary text displayed when the accordion is collapsed.
+   * An array of accordion items to render.
+   */
+  items?: AccordionItem[]
+  /**
+   * The summary text displayed when the accordion is collapsed (for single-item usage).
+   */
+  summary?: string
+  /**
+   * Determines whether multiple items can be open at the same time. If false, uses HTML5 details
+   * 'name' attribute to group them. Defaults to false (single open at a time).
+   */
+  multiple?: boolean
+  /**
+   * The icon displayed on the right side of the trigger. Defaults to 'i-lucide-chevron-down'.
    */
-  summary: string
+  trailingIcon?: string
+  /**
+   * When true, prevents user interaction with all items.
+   */
+  disabled?: boolean
   /**
    * Slot-specific CSS class overrides.
    */
@@ -11,5 +40,9 @@ export interface AccordionProps {
    * Additional CSS classes to apply to the root element.
    */
   class?: any
+  /**
+   * A unique name to group accordion items when multiple is false.
+   */
+  name?: string
   [key: string]: unknown
 }

package/src/types/components/app.ts

@@ -1,11 +1,11 @@
-export interface AppProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
-  ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
-  class?: any
-  [key: string]: unknown
-}
+export interface AppProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/audio.ts

@@ -1,11 +1,11 @@
-export interface AudioProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
-  ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
-  class?: any
-  [key: string]: unknown
-}
+export interface AudioProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/avatar-group.ts

@@ -1,11 +1,11 @@
-export interface AvatarGroupProps {
-  /**
-   * Slot-specific CSS class overrides.
-   */
-  ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
-  class?: any
-  [key: string]: unknown
-}
+export interface AvatarGroupProps {
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/avatar.ts

@@ -1,60 +1,76 @@
-import type { ChipProps } from "./chip"
-
-export interface AvatarProps {
-  /**
-   * The component the root element should render as.
-   *
-   * @default "span"
-   */
-  as?: any
-  src?: string
-  alt?: string
-  icon?: any
-  text?: string
-  /**
-   * @default "md"
-   */
-  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
-  /**
-   * @default "neutral"
-   */
-  color?:
-    | "neutral"
-    | "primary"
-    | "secondary"
-    | "info"
-    | "success"
-    | "warning"
-    | "error"
-    | "commentary"
-    | "ideation"
-    | "source"
-  chip?: boolean | ChipProps
-  loading?: "lazy" | "eager"
-  referrerpolicy?:
-    | ""
-    | "no-referrer"
-    | "no-referrer-when-downgrade"
-    | "origin"
-    | "origin-when-cross-origin"
-    | "same-origin"
-    | "strict-origin"
-    | "strict-origin-when-cross-origin"
-    | "unsafe-url"
-  crossorigin?: "" | "anonymous" | "use-credentials"
-  decoding?: "async" | "auto" | "sync"
-  height?: string | number
-  width?: string | number
-  sizes?: string
-  srcset?: string
-  usemap?: string
-  /**
-   * Slot-specific CSS class overrides.
-   */
-  ui?: any
-  /**
-   * Additional CSS classes to apply to the root element.
-   */
-  class?: any
-  [key: string]: unknown
-}
+import type { ChipProps } from "./chip"
+
+export interface AvatarProps {
+  /**
+   * The component the root element should render as.
+   *
+   * @default "span"
+   */
+  as?: any
+  src?: string
+  alt?: string
+  icon?: any
+  text?: string
+  /**
+   * @default "md"
+   */
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
+  /**
+   * @default "neutral"
+   */
+  color?:
+    | "neutral"
+    | "primary"
+    | "secondary"
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "commentary"
+    | "ideation"
+    | "source"
+  chip?: boolean | ChipProps
+  loading?: "lazy" | "eager"
+  referrerpolicy?:
+    | ""
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "origin"
+    | "origin-when-cross-origin"
+    | "same-origin"
+    | "strict-origin"
+    | "strict-origin-when-cross-origin"
+    | "unsafe-url"
+  crossorigin?: "" | "anonymous" | "use-credentials"
+  decoding?: "async" | "auto" | "sync"
+  height?: string | number
+  width?: string | number
+  sizes?: string
+  srcset?: string
+  usemap?: string
+  /**
+   * Compact initials displayed inside the avatar circle (alias for fallback)
+   */
+  initials?: string
+  /**
+   * Display name rendered adjacent to the avatar (e.g. "Daniel Marchi")
+   */
+  title?: string
+  /**
+   * Secondary description rendered below the title (e.g. "Lead Developer")
+   */
+  subtitle?: string
+  /**
+   * Accessible aria-label fallback for screen readers when avatar is purely visual
+   */
+  label?: string
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root element.
+   */
+  class?: any
+  [key: string]: unknown
+}

package/src/types/components/badge.ts

@@ -1,4 +1,4 @@
-import type { Theme } from "../theme"
+import type { Theme, ThemeColor } from "../theme"
 
 export interface BadgeProps {
   /**
@@ -8,7 +8,7 @@ export interface BadgeProps {
   /**
    * Color scheme applied.
    */
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?: ThemeColor
   /**
    * The size scale of the badge.
    */