@rimelight/ui 0.0.31 → 0.0.32

package/src/themes/pricing-table.theme.ts

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

package/src/themes/progress.theme.ts

@@ -10,11 +10,22 @@ export const createProgressTheme = (colors: string[] = defaultColors) =>
       indicator: "h-full w-full flex-1 transition-all duration-300 ease-in-out"
     },
     variants: {
-      color: Object.fromEntries(colors.map((color) => [color, { indicator: `bg-${color}-500` }])),
+      color: Object.fromEntries(colors.map((color) => [
+        color,
+        {
+          root: `rl-color-${color}`,
+          indicator: `bg-[var(--rl-bg)]`
+        }
+      ])),
       size: {
         sm: { root: "h-1.5" },
         md: { root: "h-3" },
         lg: { root: "h-5" }
+      },
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
       }
     },
     defaultVariants: {

package/src/themes/prose.theme.ts

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

package/src/themes/qr-code.theme.ts

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

package/src/themes/quote.theme.ts

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

package/src/themes/radio-group.theme.ts

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

package/src/themes/rating.theme.ts

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

package/src/themes/scroll-to-top.theme.ts

@@ -1,46 +1,50 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export default defineTheme({
-  slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
-  base: {
-    root: "fixed bottom-6 right-6 z-50",
-    button: "size-14 lg:size-12 p-0 rounded-full",
-    progressBase: "progress-circle-base size-full",
-    svg: "size-full",
-    iconContainer: "absolute inset-0 flex items-center justify-center text-center",
-    icon: "size-6 text-white"
-  },
-  variants: {
-    color: {
-      primary: {
-        progressBase: "",
-        svg: "",
-        iconContainer: "",
-        icon: ""
-      },
-      secondary: {
-        progressBase: "",
-        svg: "",
-        iconContainer: "",
-        icon: ""
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      color: "primary",
-      classNames: {
-        icon: "text-primary-foreground"
+export const createScrollToTopTheme = (colors: string[] = ["primary", "secondary"]) =>
+  defineTheme({
+    slots: ["root", "button", "progressBase", "svg", "iconContainer", "icon"],
+    base: {
+      root: "fixed bottom-6 right-6 z-50",
+      button: "size-14 lg:size-12 p-0 rounded-full",
+      progressBase: "progress-circle-base size-full",
+      svg: "size-full",
+      iconContainer: "absolute inset-0 flex items-center justify-center text-center",
+      icon: "size-6 text-white"
+    },
+    variants: {
+      color: Object.fromEntries(colors.map((color) => [
+        color,
+        {
+          root: `rl-color-${color}`,
+          progressBase: "",
+          svg: "",
+          iconContainer: "",
+          icon: ""
+        }
+      ])),
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
       }
     },
-    {
-      color: "secondary",
-      classNames: {
-        icon: "text-secondary-foreground"
+    compoundVariants: [
+      {
+        color: "primary",
+        classNames: {
+          icon: "text-primary-foreground"
+        }
+      },
+      {
+        color: "secondary",
+        classNames: {
+          icon: "text-secondary-foreground"
+        }
       }
+    ],
+    defaultVariants: {
+      color: "primary"
     }
-  ],
-  defaultVariants: {
-    color: "primary"
-  }
-})
+  })
+
+export default createScrollToTopTheme()

package/src/themes/{sheet.theme.ts → slideover.theme.ts}

@@ -1,6 +1,6 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export const sheetTheme = defineTheme({
+export const slideoverTheme = defineTheme({
   slots: ["root", "trigger", "backdrop", "content", "header", "title", "description", "footer", "closeButton"],
   base: {
     root: "relative inline-block",
@@ -40,4 +40,4 @@ export const sheetTheme = defineTheme({
   }
 })
 
-export default sheetTheme
+export default slideoverTheme

package/src/themes/slider.theme.ts

@@ -15,10 +15,16 @@ export const createSliderTheme = (colors: string[] = defaultColors) =>
       color: Object.fromEntries(colors.map((color) => [
         color,
         {
-          range: `bg-${color}-500`,
-          thumb: `focus-visible:ring-${color}-500/50 hover:border-${color}-500`
+          root: `rl-color-${color}`,
+          range: `bg-[var(--rl-bg)]`,
+          thumb: `focus-visible:ring-[var(--rl-ring)]/50 hover:border-[var(--rl-border)]`
         }
-      ]))
+      ])),
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
     },
     defaultVariants: {
       color: "primary"

package/src/themes/speed-dial.theme.ts

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

package/src/themes/spinner.theme.ts

@@ -18,8 +18,13 @@ export const createSpinnerTheme = (colors: string[] = defaultColors) =>
       },
       color: Object.fromEntries([
         ["current", { root: "text-current" }],
-        ...colors.map((color) => [color, { root: `text-${color}-500` }])
-      ])
+        ...colors.map((color) => [color, { root: `rl-color-${color} text-[var(--rl-text)]` }])
+      ]),
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
     },
     defaultVariants: {
       size: "md",

package/src/themes/{resizable.theme.ts → splitter.theme.ts}

@@ -1,6 +1,6 @@
 import { defineTheme } from "../utils/defineTheme"
 
-export const createResizableTheme = () =>
+export const createSplitterTheme = () =>
   defineTheme({
     slots: ["root", "panel", "handle"],
     base: {
@@ -19,4 +19,4 @@ export const createResizableTheme = () =>
     }
   })
 
-export default createResizableTheme()
+export default createSplitterTheme()

package/src/themes/spoiler.theme.ts

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

package/src/themes/stepper.theme.ts

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

package/src/themes/switch.theme.ts

@@ -19,7 +19,8 @@ export const createSwitchTheme = (colors: string[] = defaultColors) =>
       color: Object.fromEntries(colors.map((color) => [
         color,
         {
-          track: `peer-checked:bg-${color}-500 focus-within:ring-${color}-500/50`
+          root: `rl-color-${color}`,
+          track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
         }
       ])),
       size: {
@@ -30,6 +31,11 @@ export const createSwitchTheme = (colors: string[] = defaultColors) =>
       checked: {
         true: { thumb: "translate-x-full" },
         false: { thumb: "translate-x-0" }
+      },
+      theme: {
+        flat: { root: "rl-flat" },
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
       }
     },
     compoundVariants: [

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

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

package/src/themes/timeline.theme.ts

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

package/src/themes/tour.theme.ts

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

package/src/themes/tree.theme.ts

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

package/src/themes/user.theme.ts

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

package/src/themes/watermark.theme.ts

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

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

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

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

@@ -0,0 +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
+}

package/src/types/components/accordion.ts

@@ -8,7 +8,7 @@ export interface AccordionProps {
    */
   ui?: any
   /**
-   * Additional CSS classes to apply to the root component.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/alert.ts

@@ -1,3 +1,5 @@
+import type { Theme } from "../theme"
+
 export interface AlertProps {
   /**
    * The visual variant of the alert.
@@ -19,12 +21,16 @@ export interface AlertProps {
    * An optional leading icon.
    */
   icon?: string
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
   /**
    * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Additional CSS classes to apply to the root component.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/app.ts

@@ -0,0 +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
+}

package/src/types/components/aspect-ratio.ts

@@ -4,11 +4,11 @@ export interface AspectRatioProps {
    */
   ratio?: number
   /**
-   * UI class override map.
+   * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Root CSS class overrides.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/audio.ts

@@ -0,0 +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
+}

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

@@ -0,0 +1,12 @@
+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

@@ -24,24 +24,12 @@ export interface AvatarProps {
    */
   badgeColor?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   /**
-   * UI style slot mapping overrides.
+   * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Custom CSS root class.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown
-}
-
-export interface AvatarGroupProps {
-  /**
-   * UI class overrides.
-   */
-  ui?: any
-  /**
-   * Root CSS class override.
-   */
-  class?: any
-  [key: string]: unknown
-}
+}

package/src/types/components/badge.ts

@@ -1,3 +1,5 @@
+import type { Theme } from "../theme"
+
 export interface BadgeProps {
   /**
    * Visual style variant.
@@ -16,11 +18,15 @@ export interface BadgeProps {
    */
   shape?: "square" | "rounded" | "pill"
   /**
-   * Custom UI overrides.
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
+  /**
+   * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Root CSS class name.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/banner.ts

@@ -0,0 +1,11 @@
+export interface BannerProps {
+  /**
+   * 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/breadcrumb.ts

@@ -13,11 +13,11 @@ export interface BreadcrumbProps {
    */
   separatorIcon?: string
   /**
-   * UI style slot overrides.
+   * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Root CSS class override.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/browser-mockup.ts

@@ -0,0 +1,11 @@
+export interface BrowserMockupProps {
+  /**
+   * 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/button.ts

@@ -1,3 +1,5 @@
+import type { Theme } from "../theme"
+
 export interface ButtonProps {
   /**
    * The visual style variant of the button
@@ -59,12 +61,16 @@ export interface ButtonProps {
    * Variant used when button is in active state
    */
   activeVariant?: "solid" | "outline" | "ghost" | "link" | "soft"
+  /**
+   * Theme mode override — pins colors to flat, light, or dark mode.
+   */
+  theme?: Theme
   /**
    * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Additional CSS classes to apply to the root component.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/calendar.ts

@@ -0,0 +1,11 @@
+export interface CalendarProps {
+  /**
+   * 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/card.ts

@@ -20,11 +20,11 @@ export interface CardProps {
    */
   overlay?: boolean
   /**
-   * UI mapping override.
+   * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Root CSS class override.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown

package/src/types/components/carousel.ts

@@ -14,11 +14,11 @@ export interface CarouselProps {
    */
   autoplay?: boolean
   /**
-   * UI class override map.
+   * Slot-specific CSS class overrides.
    */
   ui?: any
   /**
-   * Root CSS class override.
+   * Additional CSS classes to apply to the root element.
    */
   class?: any
   [key: string]: unknown