@rimelight/ui 0.0.28 → 0.0.29

package/src/components/vue/RLVIcon.vue

@@ -2,20 +2,12 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { IconProps } from "../../types/components/icon"
 import iconTheme from "../../themes/icon.theme"
 
 const icon = scv(iconTheme)
-type IconVariants = ComponentVariants<typeof iconTheme>
 
-export interface RLVIconProps {
-  name: string
-  size?: IconVariants["size"]
-  ui?: ComponentSlots<typeof iconTheme>
-  class?: any
-}
-
-const { name, size = "md", ui: uiProp, class: className } = defineProps<RLVIconProps>()
+const { name, size = "md", ui: uiProp, class: className } = defineProps<IconProps>()
 
 const resolvedClasses = computed(() =>
   resolveClasses(icon, { size }, useUi("icon", uiProp), className)

package/src/components/vue/RLVLogo.vue

@@ -2,34 +2,26 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentSlots } from "../../types"
+import type { LogoProps } from "../../types/components/logo"
 import logoTheme from "../../themes/logo.theme"
 import { getUIConfig } from "virtual:rimelight-ui"
 
 const logo = scv(logoTheme)
 
-export interface RLVLogoProps {
-  variant?: string
-  mode?: "color" | "white" | "black"
-  href?: string
-  alt?: string
-  ui?: ComponentSlots<typeof logoTheme>
-  class?: any
-  [key: string]: unknown
-}
-
-const props = withDefaults(defineProps<RLVLogoProps>(), {
-  variant: "logomark",
-  href: "/"
-})
+const {
+  variant = "logomark",
+  mode,
+  href = "/",
+  alt,
+  ui: uiProp,
+  class: className
+} = defineProps<LogoProps>()
 
 defineSlots<{
   default(props: {}): any
 }>()
 
-const resolvedClasses = computed(() =>
-  resolveClasses(logo, {}, useUi("logo", props.ui), props.class)
-)
+const resolvedClasses = computed(() => resolveClasses(logo, {}, useUi("logo", uiProp), className))
 
 const logoSrc = computed<string | null>(() => {
   const globalConfig = getUIConfig()
@@ -37,9 +29,9 @@ const logoSrc = computed<string | null>(() => {
   let src: any = null
 
   if (rcLogos && typeof rcLogos === "object") {
-    src = rcLogos[props.variant]
+    src = rcLogos[variant]
     if (src && typeof src === "object") {
-      src = src[props.mode || "color"] || src.black || src.color
+      src = src[mode || "color"] || src.black || src.color
     }
   }
 
@@ -55,7 +47,7 @@ const isIcon = computed(() => {
   return src.includes(":") || src.startsWith("i-")
 })
 
-const Tag = computed(() => (props.href ? "a" : "div"))
+const Tag = computed(() => (href ? "a" : "div"))
 </script>
 
 <template>

package/src/components/vue/RLVPlaceholder.vue

@@ -2,18 +2,12 @@
 import { computed } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentSlots } from "../../types"
+import type { PlaceholderProps } from "../../types/components/placeholder"
 import placeholderTheme from "../../themes/placeholder.theme"
 
 const placeholder = scv(placeholderTheme)
 
-export interface RLVPlaceholderProps {
-  ui?: ComponentSlots<typeof placeholderTheme>
-  class?: any
-  [key: string]: unknown
-}
-
-const { ui: uiProp, class: className } = defineProps<RLVPlaceholderProps>()
+const { ui: uiProp, class: className } = defineProps<PlaceholderProps>()
 
 defineSlots<{
   /**

package/src/components/vue/RLVScrollToTop.vue

@@ -1,23 +1,12 @@
 <script setup lang="ts">
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { ScrollToTopProps } from "../../types/components/scroll-to-top"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
 import { useScrollToTop } from "../../composables/useScrollToTop"
 import { computed } from "vue"
 
 const scrollToTop = scv(scrollToTopTheme)
-type ScrollToTopVariants = ComponentVariants<typeof scrollToTopTheme>
-
-export interface RLVScrollToTopProps {
-  color?: ScrollToTopVariants["color"]
-  progressWidth?: number
-  duration?: number
-  threshold?: number
-  showProgress?: boolean
-  ui?: ComponentSlots<typeof scrollToTopTheme>
-  class?: any
-}
 
 const {
   color = "primary",
@@ -27,7 +16,7 @@ const {
   showProgress = false,
   ui: uiProp,
   class: className
-} = defineProps<RLVScrollToTopProps>()
+} = defineProps<ScrollToTopProps>()
 
 const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
 

package/src/components/vue/RLVSection.vue

@@ -2,29 +2,12 @@
 import { computed, useSlots } from "vue"
 import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
-import type { ComponentVariants, ComponentSlots } from "../../types"
+import type { SectionProps } from "../../types/components/section"
 import sectionTheme from "../../themes/section.theme"
-import type { RLVButtonProps } from "./RLVButton.vue"
 import RLVIcon from "./RLVIcon.vue"
 import RLVButton from "./RLVButton.vue"
 
 const section = scv(sectionTheme)
-type SectionVariants = ComponentVariants<typeof sectionTheme>
-
-export interface RLVSectionProps {
-  as?: any
-  variant?: SectionVariants["variant"]
-  headline?: string
-  icon?: string
-  title?: string
-  description?: string
-  links?: RLVButtonProps[]
-  orientation?: SectionVariants["orientation"]
-  reverse?: boolean
-  ctaVariant?: SectionVariants["ctaVariant"]
-  ui?: ComponentSlots<typeof sectionTheme>
-  class?: any
-}
 
 const {
   as = "div",
@@ -38,7 +21,7 @@ const {
   title,
   description,
   links
-} = defineProps<RLVSectionProps>()
+} = defineProps<SectionProps>()
 
 const slots = useSlots()
 

package/src/integrations/ui.ts

@@ -63,7 +63,17 @@ export interface UIOptions {
  */
 export function ui(options: UIOptions = {}): AstroIntegration[] {
   const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
-  const coreColors = ["primary", "secondary", "info", "success", "warning", "error", "commentary", "ideation", "source"]
+  const coreColors = [
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "commentary",
+    "ideation",
+    "source"
+  ]
   const mergedColors = [...new Set([...coreColors, ...(options.colors || [])])]
   const resolvedConfig = { ...resolvedUI, logos: options.logos ?? {}, colors: mergedColors }
 

package/src/presets/index.ts

@@ -14,9 +14,9 @@ const uiSrcGlob = join(__dirname, "../**/*.{js,ts,jsx,tsx,vue,svelte,astro}")
 const uiFilesystemGlob = join(__dirname, "../**/*")
 
 const createScale = (colorName: string) => ({
-  DEFAULT: `var(--${colorName})`,
-  foreground: `var(--${colorName}-foreground)`,
-  accent: `var(--${colorName}-accent)`,
+  "DEFAULT": `var(--${colorName})`,
+  "foreground": `var(--${colorName}-foreground)`,
+  "accent": `var(--${colorName}-accent)`,
   "50": `var(--color-${colorName}-50)`,
   "100": `var(--color-${colorName}-100)`,
   "200": `var(--color-${colorName}-200)`,
@@ -36,10 +36,20 @@ export interface RimelightPresetOptions {
 
 export default definePreset((options?: RimelightPresetOptions) => {
   const customColors = options?.colors || []
-  const coreColors = ["primary", "secondary", "info", "success", "warning", "error", "commentary", "ideation", "source"]
+  const coreColors = [
+    "primary",
+    "secondary",
+    "info",
+    "success",
+    "warning",
+    "error",
+    "commentary",
+    "ideation",
+    "source"
+  ]
   const allColors = [...new Set([...coreColors, ...customColors])]
 
-  const safelist = allColors.flatMap(color => [
+  const safelist = allColors.flatMap((color) => [
     `bg-${color}-500`,
     `hover:bg-${color}-600`,
     `focus-visible:ring-${color}-500/50`,
@@ -143,7 +153,7 @@ export default definePreset((options?: RimelightPresetOptions) => {
           DEFAULT: "var(--popover)",
           foreground: "var(--popover-foreground)"
         },
-        ...Object.fromEntries(allColors.map(color => [color, createScale(color)])),
+        ...Object.fromEntries(allColors.map((color) => [color, createScale(color)])),
         "muted": {
           DEFAULT: "var(--muted)",
           foreground: "var(--muted-foreground)"

package/src/themes/button.theme.ts

@@ -1,181 +1,190 @@
 import { defineTheme } from "../utils/defineTheme"
 
-const defaultColors = ["primary", "secondary", "info", "success", "warning", "error", "commentary", "ideation", "source"];
+const defaultColors = [
+  "primary",
+  "secondary",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "commentary",
+  "ideation",
+  "source"
+]
 
-export const createButtonTheme = (colors: string[] = defaultColors) => defineTheme({
-  slots: ["root", "label", "leadingIcon", "trailingIcon"],
-  base: {
-    root: [
-      "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
-      "[&_svg]:pointer-events-none [&_svg]:shrink-0",
-      "transition-all outline-none focus-visible:ring-3",
-      "disabled:pointer-events-none disabled:op-50",
-      "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
-    ],
-    label: "truncate",
-    leadingIcon: "shrink-0",
-    trailingIcon: "shrink-0"
-  },
-  variants: {
-    variant: {
-      solid: { root: "shadow-sm border border-transparent" },
-      outline: { root: "b shadow-sm border" },
-      soft: { root: "" },
-      subtle: { root: "" },
-      ghost: { root: "" },
-      link: { root: "p-0 h-auto no-underline" }
-    },
-    color: {
-      ...Object.fromEntries(colors.map(color => [color, { root: "" }]))
+export const createButtonTheme = (colors: string[] = defaultColors) =>
+  defineTheme({
+    slots: ["root", "label", "leadingIcon", "trailingIcon"],
+    base: {
+      root: [
+        "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "transition-all outline-none focus-visible:ring-3",
+        "disabled:pointer-events-none disabled:op-50",
+        "aria-invalid:border-error-500 aria-invalid:ring-error-500/20"
+      ],
+      label: "truncate",
+      leadingIcon: "shrink-0",
+      trailingIcon: "shrink-0"
     },
-    size: {
-      xs: {
-        root: "h-7 px-2xs text-xs [&_svg]:size-3.5",
-        leadingIcon: "[&_svg]:size-3.5 [&_span]:size-3.5",
-        trailingIcon: "[&_svg]:size-3.5 [&_span]:size-3.5"
+    variants: {
+      variant: {
+        solid: { root: "shadow-sm border border-transparent" },
+        outline: { root: "b shadow-sm border" },
+        soft: { root: "" },
+        subtle: { root: "" },
+        ghost: { root: "" },
+        link: { root: "p-0 h-auto no-underline" }
       },
-      sm: {
-        root: "h-8 px-xs text-sm [&_svg]:size-4",
-        leadingIcon: "[&_svg]:size-4 [&_span]:size-4",
-        trailingIcon: "[&_svg]:size-4 [&_span]:size-4"
+      color: Object.fromEntries(colors.map((color) => [color, { root: "" }])),
+      size: {
+        xs: {
+          root: "h-7 px-2xs text-xs [&_svg]:size-3.5",
+          leadingIcon: "[&_svg]:size-3.5 [&_span]:size-3.5",
+          trailingIcon: "[&_svg]:size-3.5 [&_span]:size-3.5"
+        },
+        sm: {
+          root: "h-8 px-xs text-sm [&_svg]:size-4",
+          leadingIcon: "[&_svg]:size-4 [&_span]:size-4",
+          trailingIcon: "[&_svg]:size-4 [&_span]:size-4"
+        },
+        md: {
+          root: "h-9 px-sm text-sm [&_svg]:size-4",
+          leadingIcon: "[&_svg]:size-4 [&_span]:size-4",
+          trailingIcon: "[&_svg]:size-4 [&_span]:size-4"
+        },
+        lg: {
+          root: "h-10 px-md text-base [&_svg]:size-4.5",
+          leadingIcon: "[&_svg]:size-4.5 [&_span]:size-4.5",
+          trailingIcon: "[&_svg]:size-4.5 [&_span]:size-4.5"
+        },
+        xl: {
+          root: "h-11 px-lg text-base [&_svg]:size-5",
+          leadingIcon: "[&_svg]:size-5 [&_span]:size-5",
+          trailingIcon: "[&_svg]:size-5 [&_span]:size-5"
+        }
       },
-      md: {
-        root: "h-9 px-sm text-sm [&_svg]:size-4",
-        leadingIcon: "[&_svg]:size-4 [&_span]:size-4",
-        trailingIcon: "[&_svg]:size-4 [&_span]:size-4"
+      block: {
+        true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
       },
-      lg: {
-        root: "h-10 px-md text-base [&_svg]:size-4.5",
-        leadingIcon: "[&_svg]:size-4.5 [&_span]:size-4.5",
-        trailingIcon: "[&_svg]:size-4.5 [&_span]:size-4.5"
+      square: {
+        true: { root: "" }
       },
-      xl: {
-        root: "h-11 px-lg text-base [&_svg]:size-5",
-        leadingIcon: "[&_svg]:size-5 [&_span]:size-5",
-        trailingIcon: "[&_svg]:size-5 [&_span]:size-5"
-      }
-    },
-    block: {
-      true: { root: "w-full justify-center", trailingIcon: "ms-auto" }
-    },
-    square: {
-      true: { root: "" }
-    },
-    leading: { true: {} },
-    trailing: { true: {} },
-    loading: { true: {} },
-    active: {
-      true: { root: "" },
-      false: { root: "" }
-    }
-  },
-  compoundVariants: [
-    ...colors.map(color => ({
-      variant: "solid" as const,
-      color,
-      classNames: {
-        root: `bg-${color}-500 text-white hover:bg-${color}-600 focus-visible:ring-${color}-500/50`
-      }
-    })),
-    ...colors.map(color => ({
-      variant: "outline" as const,
-      color,
-      classNames: {
-        root: `border-${color}-500/20 text-${color}-600 bg-${color}-500/5 hover:bg-${color}-500/10 hover:border-${color}-500/30 focus-visible:ring-${color}-500/40`
-      }
-    })),
-    ...colors.map(color => ({
-      variant: "soft" as const,
-      color,
-      classNames: {
-        root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20 focus-visible:ring-${color}-500/40`
-      }
-    })),
-    ...colors.map(color => ({
-      variant: "subtle" as const,
-      color,
-      classNames: {
-        root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20 focus-visible:ring-${color}-500/40`
-      }
-    })),
-    ...colors.map(color => ({
-      variant: "ghost" as const,
-      color,
-      classNames: {
-        root: `text-${color}-600 hover:bg-${color}-500/10 focus-visible:ring-${color}-500/40`
-      }
-    })),
-    ...colors.map(color => ({
-      variant: "link" as const,
-      color,
-      classNames: {
-        root: `text-${color}-600 hover:underline hover:decoration-${color}-300`
-      }
-    })),
-    {
-      square: true,
-      size: "xs",
-      classNames: {
-        root: "p-1 w-7"
-      }
-    },
-    {
-      square: true,
-      size: "sm",
-      classNames: {
-        root: "p-1.5 w-8"
-      }
-    },
-    {
-      square: true,
-      size: "md",
-      classNames: {
-        root: "p-1.5 w-9"
+      leading: { true: {} },
+      trailing: { true: {} },
+      loading: { true: {} },
+      active: {
+        true: { root: "" },
+        false: { root: "" }
       }
     },
-    {
-      square: true,
-      size: "lg",
-      classNames: {
-        root: "p-2 w-10"
-      }
-    },
-    {
-      square: true,
-      size: "xl",
-      classNames: {
-        root: "p-2 w-11"
-      }
-    },
-    {
-      loading: true,
-      leading: true,
-      classNames: {
-        leadingIcon: "animate-spin"
-      }
-    },
-    {
-      loading: true,
-      leading: false,
-      trailing: true,
-      classNames: {
-        trailingIcon: "animate-spin"
-      }
-    },
-    {
-      loading: true,
-      leading: false,
-      trailing: false,
-      classNames: {
-        trailingIcon: "animate-spin"
+    compoundVariants: [
+      ...colors.map((color) => ({
+        variant: "solid" as const,
+        color,
+        classNames: {
+          root: `bg-${color}-500 text-white hover:bg-${color}-600 focus-visible:ring-${color}-500/50`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "outline" as const,
+        color,
+        classNames: {
+          root: `border-${color}-500/20 text-${color}-600 bg-${color}-500/5 hover:bg-${color}-500/10 hover:border-${color}-500/30 focus-visible:ring-${color}-500/40`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "soft" as const,
+        color,
+        classNames: {
+          root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20 focus-visible:ring-${color}-500/40`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "subtle" as const,
+        color,
+        classNames: {
+          root: `text-${color}-600 bg-${color}-500/10 hover:bg-${color}-500/20 focus-visible:ring-${color}-500/40`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "ghost" as const,
+        color,
+        classNames: {
+          root: `text-${color}-600 hover:bg-${color}-500/10 focus-visible:ring-${color}-500/40`
+        }
+      })),
+      ...colors.map((color) => ({
+        variant: "link" as const,
+        color,
+        classNames: {
+          root: `text-${color}-600 hover:underline hover:decoration-${color}-300`
+        }
+      })),
+      {
+        square: true,
+        size: "xs",
+        classNames: {
+          root: "p-1 w-7"
+        }
+      },
+      {
+        square: true,
+        size: "sm",
+        classNames: {
+          root: "p-1.5 w-8"
+        }
+      },
+      {
+        square: true,
+        size: "md",
+        classNames: {
+          root: "p-1.5 w-9"
+        }
+      },
+      {
+        square: true,
+        size: "lg",
+        classNames: {
+          root: "p-2 w-10"
+        }
+      },
+      {
+        square: true,
+        size: "xl",
+        classNames: {
+          root: "p-2 w-11"
+        }
+      },
+      {
+        loading: true,
+        leading: true,
+        classNames: {
+          leadingIcon: "animate-spin"
+        }
+      },
+      {
+        loading: true,
+        leading: false,
+        trailing: true,
+        classNames: {
+          trailingIcon: "animate-spin"
+        }
+      },
+      {
+        loading: true,
+        leading: false,
+        trailing: false,
+        classNames: {
+          trailingIcon: "animate-spin"
+        }
       }
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md"
     }
-  ],
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md"
-  }
-})
+  })
 
 export default createButtonTheme()

package/src/themes/embedYoutube.theme.ts

@@ -1,19 +1,14 @@
-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: {}
-})
+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: {}
+})

package/src/types/components/accordion.ts

@@ -0,0 +1,15 @@
+export interface AccordionProps {
+  /**
+   * The summary text displayed when the accordion is collapsed.
+   */
+  summary: string
+  /**
+   * Slot-specific CSS class overrides.
+   */
+  ui?: any
+  /**
+   * Additional CSS classes to apply to the root component.
+   */
+  class?: any
+  [key: string]: unknown
+}