@rimelight/ui 0.0.23 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -48,6 +48,7 @@
     "./middleware": "./src/middleware/index.ts",
     "./middleware/*": "./src/middleware/*",
     "./nuxt": "./src/nuxt.ts",
+    "./nuxt/types": "./src/nuxt-types.ts",
     "./presets": "./src/presets/index.ts",
     "./presets/*": "./src/presets/*",
     "./*": "./src/*"

package/src/components/astro/RLAButton.astro

@@ -15,36 +15,21 @@ const button = scv({
 });
 
 export interface RLAButtonProps {
-  /**
-   * Button variant style.
-   * @default "solid"
-   */
   variant?: keyof typeof buttonTheme.variants.variant;
-  /**
-   * Button color.
-   * @default "primary"
-   */
   color?: keyof typeof buttonTheme.variants.color;
-  /**
-   * Button size.
-   * @default "md"
-   */
   size?: keyof typeof buttonTheme.variants.size;
-  /**
-   * When provided, renders as <a> instead of <button>.
-   */
   href?: string;
-  /**
-   * UI overrides for individual slots, derived from the button theme.
-   */
-  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>;
-  /**
-   * External class — applied to the root element.
-   */
+  label?: string;
+  leadingIcon?: string;
+  trailingIcon?: string;
+  loading?: boolean;
+  square?: boolean;
+  block?: boolean;
+  active?: boolean;
+  activeColor?: keyof typeof buttonTheme.variants.color;
+  activeVariant?: keyof typeof buttonTheme.variants.variant;
+  ui?: Partial<Record<string, string>>;
   class?: string;
-  /**
-   * Standard HTML attributes for <button>
-   */
   [key: string]: unknown;
 }
 
@@ -55,6 +40,15 @@ const {
   class: className,
   ui: uiProp,
   href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant,
   ...rest
 } = Astro.props as RLAButtonProps
 
@@ -63,23 +57,62 @@ const globalConfig = getUIConfig();
 const mergedUI = defu(
   uiProp ?? {},
   (globalConfig.button as Record<string, unknown>) ?? {},
-) as Record<keyof typeof buttonTheme.base, string | undefined>;
+) as Record<string, string | undefined>;
 
-const { root } = button({
-  variant,
-  color,
+const isLeading = (leadingIcon || Astro.slots.has("leading")) || loading
+const isTrailing = (trailingIcon || Astro.slots.has("trailing")) || (loading && !isLeading)
+
+const showLeadingIcon = loading
+  ? "i-lucide-loader-circle"
+  : leadingIcon
+
+const showTrailingIcon = loading
+  ? "i-lucide-loader-circle"
+  : trailingIcon
+
+const leadingClasses = loading ? "animate-spin" : ""
+const trailingClasses = loading ? "animate-spin" : ""
+
+const resolved = button({
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
   size,
+  block,
+  square: square || (!label && !Astro.slots.has("default")),
+  leading: isLeading,
+  trailing: isTrailing,
+  loading,
+  active
 });
 
-// Determine whether to render <a> or <button>
 const Tag = href ? "a" : "button";
 ---
-
 <Tag
-  class={twMerge(root, mergedUI.root, className)}
+  class={twMerge(resolved.root, mergedUI.root, className)}
   data-slot="rla-button"
   {...(Tag === "a" ? { href } : {})}
   {...rest}
 >
-  <slot />
+  <slot name="leading" {...{ ui: resolved }}>
+    {isLeading && (
+      <span class={twMerge(resolved.leadingIcon, mergedUI.leadingIcon)} data-slot="leading-icon">
+        <span class={twMerge(showLeadingIcon, leadingClasses)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
+
+  {label !== undefined && label !== null && (
+    <span class={twMerge(resolved.label, mergedUI.label)} data-slot="label">
+      {label}
+    </span>
+  )}
+  {!label && <slot />}
+
+  <slot name="trailing" {...{ ui: resolved }}>
+    {isTrailing && (
+      <span class={twMerge(resolved.trailingIcon, mergedUI.trailingIcon)} data-slot="trailing-icon">
+        <span class={twMerge(showTrailingIcon, trailingClasses)} aria-hidden="true" />
+      </span>
+    )}
+  </slot>
 </Tag>

package/src/components/vue/RLVButton.vue

@@ -1,97 +1,139 @@
-<script setup lang="ts">
-import { scv, cx } from "css-variants"
-import { twMerge } from "tailwind-merge"
-import defu from "defu"
-import { buttonTheme } from "../../themes/button.theme.ts"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const button = scv({
-  slots: [...buttonTheme.slots],
-  base: buttonTheme.base,
-  variants: buttonTheme.variants,
-  compoundVariants: [...buttonTheme.compoundVariants],
-  defaultVariants: buttonTheme.defaultVariants,
-  classNameResolver: (...args) => twMerge(cx(...args))
-})
-
-export interface RLVButtonProps {
-  /**
-   * Button variant.
-   *
-   * @default "solid"
-   */
-  variant?: keyof typeof buttonTheme.variants.variant
-  /**
-   * Button color.
-   *
-   * @default "primary"
-   */
-  color?: keyof typeof buttonTheme.variants.color
-  /**
-   * Button size.
-   *
-   * @default "md"
-   */
-  size?: keyof typeof buttonTheme.variants.size
-  /**
-   * When provided, renders as <a> instead of <button>.
-   */
-  href?: string
-  /**
-   * UI overrides for individual slots, derived from the button theme.
-   */
-  ui?: Partial<Record<keyof typeof buttonTheme.base, string>>
-  /**
-   * External class — applied to the root element.
-   */
-  class?: string
-  /**
-   * Standard HTML attributes for <button>
-   */
-  [key: string]: unknown
-}
-
-const {
-  variant = "solid",
-  color = "primary",
-  size = "md",
-  class: className,
-  ui: uiProp,
-  href
-} = defineProps<RLVButtonProps>()
-
-defineSlots<{
-  /**
-   * The default slot for the button content (e.g., text, icons).
-   */
-  default(props: {}): any
-}>()
-
-const globalConfig = getUIConfig()
-
-const mergedUI = defu(
-  uiProp ?? {},
-  (globalConfig.button as Record<string, unknown>) ?? {}
-) as Record<keyof typeof buttonTheme.base, string | undefined>
-
-const { root } = button({
-  variant,
-  color,
-  size
-})
-
-// Determine whether to render <a> or <button>
-const Tag = href ? "a" : "button"
-</script>
-
-<template>
-  <component
-    v-bind="$attrs"
-    :is="Tag"
-    :href="href"
-    :class="twMerge(root, mergedUI.root, className)"
-    data-slot="rlv-button"
-  >
-    <slot />
-  </component>
-</template>
+<script setup lang="ts">
+import { computed, useSlots } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { buttonTheme } from "../../themes/button.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+const button = scv({
+  slots: [...buttonTheme.slots],
+  base: buttonTheme.base,
+  variants: buttonTheme.variants,
+  compoundVariants: [...buttonTheme.compoundVariants],
+  defaultVariants: buttonTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+export interface RLVButtonProps {
+  variant?: keyof typeof buttonTheme.variants.variant
+  color?: keyof typeof buttonTheme.variants.color
+  size?: keyof typeof buttonTheme.variants.size
+  href?: string
+  label?: string
+  leadingIcon?: string
+  trailingIcon?: string
+  loading?: boolean
+  square?: boolean
+  block?: boolean
+  active?: boolean
+  activeColor?: keyof typeof buttonTheme.variants.color
+  activeVariant?: keyof typeof buttonTheme.variants.variant
+  ui?: Partial<Record<string, string>>
+  class?: string
+  [key: string]: unknown
+}
+
+const {
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  class: className,
+  ui: uiProp,
+  href,
+  label,
+  leadingIcon,
+  trailingIcon,
+  loading = false,
+  square = false,
+  block = false,
+  active = false,
+  activeColor,
+  activeVariant
+} = defineProps<RLVButtonProps>()
+
+const slots = useSlots()
+
+const isLeading = computed(() => !!(leadingIcon || slots.leading) || loading)
+const isTrailing = computed(() => !!(trailingIcon || slots.trailing) || (loading && !isLeading.value))
+
+const showLeadingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return leadingIcon
+})
+
+const showTrailingIcon = computed(() => {
+  if (loading) return "i-lucide-loader-circle"
+  return trailingIcon
+})
+
+const leadingIconClass = computed(() => {
+  return loading && isLeading.value ? "animate-spin" : ""
+})
+
+const trailingIconClass = computed(() => {
+  return loading && isTrailing.value ? "animate-spin" : ""
+})
+
+defineSlots<{
+  default(props: {}): any
+  leading(props: { ui: Record<string, string> }): any
+  trailing(props: { ui: Record<string, string> }): any
+}>()
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig.button as Record<string, unknown>) ?? {}
+) as Record<string, string | undefined>
+
+const resolved = computed(() => button({
+  variant: active && activeVariant ? activeVariant : variant,
+  color: active && activeColor ? activeColor : color,
+  size,
+  block,
+  square: square || (!label && !slots.default),
+  leading: isLeading.value,
+  trailing: isTrailing.value,
+  loading,
+  active
+}))
+
+const Tag = href ? "a" : "button"
+</script>
+
+<template>
+  <component
+    v-bind="$attrs"
+    :is="Tag"
+    :href="href"
+    :class="twMerge(resolved.root, mergedUI.root, className)"
+    data-slot="rlv-button"
+  >
+    <slot name="leading" :ui="resolved">
+      <span
+        v-if="isLeading"
+        :class="twMerge(resolved.leadingIcon, mergedUI.leadingIcon)"
+        data-slot="leading-icon"
+      >
+        <span :class="[showLeadingIcon, leadingIconClass]" aria-hidden="true" />
+      </span>
+    </slot>
+
+    <span v-if="label !== undefined && label !== null" :class="twMerge(resolved.label, mergedUI.label)" data-slot="label">
+      {{ label }}
+    </span>
+    <slot v-else />
+
+    <slot name="trailing" :ui="resolved">
+      <span
+        v-if="isTrailing"
+        :class="twMerge(resolved.trailingIcon, mergedUI.trailingIcon)"
+        data-slot="trailing-icon"
+      >
+        <span :class="[showTrailingIcon, trailingIconClass]" aria-hidden="true" />
+      </span>
+    </slot>
+  </component>
+</template>

package/src/nuxt-types.ts

@@ -0,0 +1,3 @@
+export type * from "@nuxt/ui/runtime/types"
+export type * from "@nuxt/ui/runtime/composables"
+export type * from "@nuxt/ui/runtime/utils"

package/src/themes/button.theme.ts

@@ -3,7 +3,7 @@
  * set of variants including color logic.
  */
 export const buttonTheme = {
-  slots: ["root"],
+  slots: ["root", "label", "leadingIcon", "trailingIcon"],
   base: {
     root: [
       "inline-flex items-center justify-center gap-4xs rounded-md font-medium ws-nowrap",
@@ -11,12 +11,16 @@ export const buttonTheme = {
       "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: "b shadow-xs" },
-      outlined: { root: "b shadow-xs border" },
+      outline: { root: "b shadow-xs border" },
+      soft: { root: "" },
       subtle: { root: "" },
       ghost: { root: "" },
       link: { root: "p-0 h-auto" }
@@ -33,11 +37,24 @@ export const buttonTheme = {
       source: { root: "" }
     },
     size: {
-      xs: { root: "h-7 px-2xs text-xs [&_svg]:size-3.5" },
-      sm: { root: "h-8 px-xs text-sm [&_svg]:size-4" },
-      md: { root: "h-9 px-sm text-sm [&_svg]:size-4" },
-      lg: { root: "h-10 px-md text-base [&_svg]:size-4.5" },
-      xl: { root: "h-11 px-lg text-base [&_svg]:size-5" }
+      xs: { root: "h-7 px-2xs text-xs [&_svg]:size-3.5", leadingIcon: "[&_svg]:size-3.5", trailingIcon: "[&_svg]:size-3.5" },
+      sm: { root: "h-8 px-xs text-sm [&_svg]:size-4", leadingIcon: "[&_svg]:size-4", trailingIcon: "[&_svg]:size-4" },
+      md: { root: "h-9 px-sm text-sm [&_svg]:size-4", leadingIcon: "[&_svg]:size-4", trailingIcon: "[&_svg]:size-4" },
+      lg: { root: "h-10 px-md text-base [&_svg]:size-4.5", leadingIcon: "[&_svg]:size-4.5", trailingIcon: "[&_svg]:size-4.5" },
+      xl: { root: "h-11 px-lg text-base [&_svg]:size-5", leadingIcon: "[&_svg]:size-5", trailingIcon: "[&_svg]: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: [
@@ -105,63 +122,63 @@ export const buttonTheme = {
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "primary",
       classNames: {
         root: "border-primary/20 text-primary-600 bg-primary/5 hover:bg-primary/10 hover:border-primary/30 focus-visible:ring-primary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "secondary",
       classNames: {
         root: "border-secondary/20 text-secondary-600 bg-secondary/5 hover:bg-secondary/10 hover:border-secondary/30 focus-visible:ring-secondary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "info",
       classNames: {
         root: "border-info/20 text-info-600 bg-info/5 hover:bg-info/10 hover:border-info/30 focus-visible:ring-info/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "success",
       classNames: {
         root: "border-success/20 text-success-600 bg-success/5 hover:bg-success/10 hover:border-success/30 focus-visible:ring-success/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "warning",
       classNames: {
         root: "border-warning/20 text-warning-600 bg-warning/5 hover:bg-warning/10 hover:border-warning/30 focus-visible:ring-warning/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "error",
       classNames: {
         root: "border-error/20 text-error-600 bg-error/5 hover:bg-error/10 hover:border-error/30 focus-visible:ring-error/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "commentary",
       classNames: {
         root: "border-commentary/20 text-commentary-600 bg-commentary/5 hover:bg-commentary/10 hover:border-commentary/30 focus-visible:ring-commentary/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "ideation",
       classNames: {
         root: "border-ideation/20 text-ideation-600 bg-ideation/5 hover:bg-ideation/10 hover:border-ideation/30 focus-visible:ring-ideation/40"
       }
     },
     {
-      variant: "outlined",
+      variant: "outline",
       color: "source",
       classNames: {
         root: "border-source/20 text-source-600 bg-source/5 hover:bg-source/10 hover:border-source/30 focus-visible:ring-source/40"
@@ -355,6 +372,130 @@ export const buttonTheme = {
       classNames: {
         root: "text-source-600 hover:underline hover:decoration-source/30"
       }
+    },
+    // soft variant compound variants
+    {
+      variant: "soft",
+      color: "primary",
+      classNames: {
+        root: "text-primary-600 bg-primary/10 hover:bg-primary/20 focus-visible:ring-primary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "secondary",
+      classNames: {
+        root: "text-secondary-600 bg-secondary/10 hover:bg-secondary/20 focus-visible:ring-secondary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "info",
+      classNames: {
+        root: "text-info-600 bg-info/10 hover:bg-info/20 focus-visible:ring-info/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "success",
+      classNames: {
+        root: "text-success-600 bg-success/10 hover:bg-success/20 focus-visible:ring-success/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "warning",
+      classNames: {
+        root: "text-warning-600 bg-warning/10 hover:bg-warning/20 focus-visible:ring-warning/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "error",
+      classNames: {
+        root: "text-error-600 bg-error/10 hover:bg-error/20 focus-visible:ring-error/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "commentary",
+      classNames: {
+        root: "text-commentary-600 bg-commentary/10 hover:bg-commentary/20 focus-visible:ring-commentary/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "ideation",
+      classNames: {
+        root: "text-ideation-600 bg-ideation/10 hover:bg-ideation/20 focus-visible:ring-ideation/40"
+      }
+    },
+    {
+      variant: "soft",
+      color: "source",
+      classNames: {
+        root: "text-source-600 bg-source/10 hover:bg-source/20 focus-visible:ring-source/40"
+      }
+    },
+    // square + size compound variants (explicit width to match height)
+    {
+      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 compound variants
+    {
+      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: {