@rimelight/ui 0.0.32 → 0.0.34

package/src/themes/spoiler.theme.ts

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

package/src/themes/stepper.theme.ts

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

package/src/themes/sticky-surface.theme.ts

@@ -1,10 +1,12 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-export const stickySurfaceTheme = defineTheme({
-  slots: ["root"],
-  base: {
-    root: "sticky top-0 self-start transition-all duration-300"
-  }
-})
+export const createStickySurfaceTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: "sticky top-0 self-start transition-all duration-300"
+    }
+  })
 
-export default stickySurfaceTheme
+export default createStickySurfaceTheme()

package/src/themes/switch.theme.ts

@@ -1,7 +1,6 @@
+import { defaultColors } from "../presets/defaults"
 import { defineTheme } from "../utils/defineTheme"
 
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error"]
-
 export const createSwitchTheme = (colors: string[] = defaultColors) =>
   defineTheme({
     slots: ["root", "input", "track", "thumb", "label"],
@@ -12,17 +11,20 @@ export const createSwitchTheme = (colors: string[] = defaultColors) =>
         "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
         "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
       ],
-      thumb: "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
+      thumb:
+        "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
       label: "text-sm text-foreground leading-none"
     },
     variants: {
-      color: Object.fromEntries(colors.map((color) => [
-        color,
-        {
-          root: `rl-color-${color}`,
-          track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
-        }
-      ])),
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
       size: {
         sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
         md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },

package/src/themes/table-of-contents.theme.ts

@@ -1,10 +1,48 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const createTableOfContentsTheme = () =>
+  defineTheme({
+    slots: ["root", "media", "header", "title", "description", "content", "footer", "overlay"],
+    base: {
+      root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
+      container:
+        "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
+      top: "",
+      bottom: "hidden lg:flex lg:flex-col gap-6",
+      trigger:
+        "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
+      title: "truncate",
+      trailing: "ms-auto inline-flex gap-1.5 items-center",
+      trailingIcon:
+        "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
+      content:
+        "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
+      list: "min-w-0",
+      listWithChildren: "ms-3",
+      item: "min-w-0",
+      itemWithChildren: "",
+      link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
+      linkText: "truncate",
+      indicator: "",
+      indicatorLine: "",
+      indicatorActive: ""
+    },
+    variants: {
+      interactive: {
+        true: {
+          root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
+        },
+        false: { root: "" }
+      },
+      overlay: {
+        true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
+        false: { root: "" }
+      }
+    },
+    defaultVariants: {
+      interactive: false,
+      overlay: false
+    }
+  })
+
+export default createTableOfContentsTheme()

package/src/themes/tabs.theme.ts

@@ -6,27 +6,35 @@ export const createTabsTheme = () =>
     base: {
       root: "w-full flex flex-col gap-4",
       list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
-      trigger: "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
-      content: "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+      trigger:
+        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
+      content:
+        "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
     },
     variants: {
       variant: {
         solid: {
           list: "bg-muted p-1 rounded-lg",
-          trigger: "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+          trigger:
+            "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
         },
         underline: {
           list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
-          trigger: "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
+          trigger:
+            "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
         },
         pills: {
           list: "bg-transparent p-0 gap-2",
-          trigger: "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
+          trigger:
+            "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
         }
       },
       orientation: {
         horizontal: { root: "flex-col", list: "w-full" },
-        vertical: { root: "flex-row gap-6", list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent" }
+        vertical: {
+          root: "flex-row gap-6",
+          list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent"
+        }
       },
       size: {
         sm: { trigger: "text-xs px-2.5 py-1" },

package/src/themes/textarea.theme.ts

@@ -5,7 +5,8 @@ export const createTextareaTheme = () =>
     slots: ["root", "textarea"],
     base: {
       root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-      textarea: "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
+      textarea:
+        "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
     },
     variants: {
       size: {

package/src/themes/theme-selector.theme.ts

@@ -1,16 +1,15 @@
-import { defineTheme } from "../utils/defineTheme"
-
-export default defineTheme({
-    slots: [
-        "root",
-        "sun",
-        "moon"
-    ],
-    base: {
-        root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
-        sun: "hidden dark:block i-lucide-sun w-5 h-5 text-current",
-        moon: "dark:hidden i-lucide-moon w-5 h-5 text-current"
-    },
-    variants: {},
-    defaultVariants: {}
-})
+import { defineTheme } from "../utils/defineTheme"
+
+export const createThemeSelectorTheme = () =>
+  defineTheme({
+    slots: ["root", "sun", "moon"],
+    base: {
+      root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
+      sun: "hidden dark:block i-lucide-sun w-5 h-5 text-current",
+      moon: "dark:hidden i-lucide-moon w-5 h-5 text-current"
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createThemeSelectorTheme()

package/src/themes/timeline.theme.ts

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

package/src/themes/toast.theme.ts

@@ -7,14 +7,20 @@ export const createToastTheme = () =>
       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"
+      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" }
+        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: {

package/src/themes/tooltip.theme.ts

@@ -1,27 +1,28 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export const tooltipTheme = 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" }
+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"
     }
-  },
-  defaultVariants: {
-    placement: "top"
-  }
-})
+  })
 
-export default tooltipTheme
+export default createTooltipTheme()

package/src/themes/tour.theme.ts

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

package/src/themes/tree.theme.ts

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

package/src/themes/user.theme.ts

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

package/src/themes/video.theme.ts

@@ -1,14 +1,17 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default 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 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,10 +1,13 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root"],
-  base: {
-    root: ""
-  },
-  variants: {},
-  defaultVariants: {}
-})
+export const createWatermarkTheme = () =>
+  defineTheme({
+    slots: ["root"],
+    base: {
+      root: ""
+    },
+    variants: {},
+    defaultVariants: {}
+  })
+
+export default createWatermarkTheme()

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

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

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

@@ -8,4 +8,4 @@ export interface ThreeDHoverProps {
    */
   class?: any
   [key: string]: unknown
-}
+}

package/src/types/components/alert.ts

@@ -1,4 +1,4 @@
-import type { Theme } from "../theme"
+import type { Theme, ThemeColor } from "../theme"
 
 export interface AlertProps {
   /**
@@ -8,7 +8,7 @@ export interface AlertProps {
   /**
    * The color scheme of the alert.
    */
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?: ThemeColor
   /**
    * The main title text of the alert.
    */

package/src/types/components/app.ts

@@ -8,4 +8,4 @@ export interface AppProps {
    */
   class?: any
   [key: string]: unknown
-}
+}

package/src/types/components/audio.ts

@@ -8,4 +8,4 @@ export interface AudioProps {
    */
   class?: any
   [key: string]: unknown
-}
+}

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

@@ -1,12 +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,28 +1,53 @@
+import type { ChipProps } from "./chip"
+
 export interface AvatarProps {
   /**
-   * The source URL of the avatar image.
+   * The component the root element should render as.
+   *
+   * @default "span"
    */
+  as?: any
   src?: string
-  /**
-   * Alt description for screen readers.
-   */
   alt?: string
-  /**
-   * Two-letter fallback initials when src fails to load.
-   */
-  fallback?: string
-  /**
-   * The avatar dimensions scale.
-   */
-  size?: "sm" | "md" | "lg"
-  /**
-   * Displays a status badge circle on the avatar.
-   */
-  badge?: boolean
-  /**
-   * The color of the status badge.
-   */
-  badgeColor?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  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.
    */
@@ -32,4 +57,4 @@ export interface AvatarProps {
    */
   class?: any
   [key: string]: unknown
-}
+}