@rimelight/ui 0.0.36 → 0.0.37

package/src/components/astro/RLAScrollToTop.astro

@@ -64,9 +64,7 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
 </rla-scroll-to-top>
 
 <script>
-  function onClick() {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  }
+  import { trackScroll, scrollToTop } from "../../utils/scroll"
 
   class RLAScrollToTop extends HTMLElement {
     private cleanupScroll: (() => void) | null = null;
@@ -95,12 +93,12 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
         return this.styleEl;
       };
 
-      const updateStyles = () => {
-        const scrollTop = window.scrollY || document.documentElement.scrollTop;
-        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
-        const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0;
+      innerElement.dataset.rlaInstance = String(id);
+
+      button.addEventListener('click', scrollToTop);
 
-        if (scrollTop > threshold) {
+      const unsubscribe = trackScroll({ threshold }, (state) => {
+        if (state.isVisible) {
           innerElement.classList.add('visible');
         } else {
           innerElement.classList.remove('visible');
@@ -113,23 +111,16 @@ const classes = resolveClasses(scrollToTop, { color, theme }, useUi("scrollToTop
             background-color: #000;
           }
           .rla-scroll-to-top-inner[data-rla-instance="${id}"] .gauge-progress {
-            --gauge-progress: ${scrollPercentage};
+            --gauge-progress: ${state.scrollPercentage};
             --gauge-stroke-width: ${gaugeBorderWidth}px;
             --gauge-color: var(--color-${color}-500);
           }
         `;
-      };
-
-      innerElement.dataset.rlaInstance = String(id);
-
-      button.addEventListener('click', onClick);
-
-      window.addEventListener('scroll', updateStyles, { passive: true });
-      updateStyles();
+      });
 
       this.cleanupScroll = () => {
-        button.removeEventListener('click', onClick);
-        window.removeEventListener('scroll', updateStyles);
+        button.removeEventListener('click', scrollToTop);
+        unsubscribe();
         if (this.styleEl) {
           this.styleEl.remove();
           this.styleEl = null;

package/src/components/astro/RLASelect.astro

@@ -51,7 +51,7 @@ const initialLabel = selectedItem ? selectedItem.label : ""
         data-select-trigger
       >
         <span data-select-value>{initialLabel || placeholder}</span>
-        <span class="i-lucide-chevron-down opacity-50" />
+        <span class="i-lucide-chevron-down ml-2 size-4 opacity-50" />
       </button>
 
       <div class={classes.content + " hidden"} data-select-dropdown data-slot="content">
@@ -78,61 +78,66 @@ const initialLabel = selectedItem ? selectedItem.label : ""
 <script>
   class RLASelect extends HTMLElement {
     private selectCleanup: (() => void) | null = null;
+    private initTimeout: any = null;
 
     connectedCallback() {
       this.style.display = 'contents';
-      const wrapper = this.querySelector("[data-select-wrapper]") as HTMLElement | null;
-      if (!wrapper) return;
-
-      const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
-      const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
-      const items = wrapper.querySelectorAll<HTMLElement>("[data-select-item]");
-      const valueSpan = wrapper.querySelector("[data-select-value]");
-      const hiddenInput = this.querySelector("[data-select-hidden-input]") as HTMLInputElement | null;
-
-      if (!trigger || !dropdown) return;
-
-      const onTriggerClick = (e: MouseEvent) => {
-        e.stopPropagation();
-        dropdown.classList.toggle("hidden");
-      };
-      trigger.addEventListener("click", onTriggerClick);
-
-      const itemCleanups: (() => void)[] = [];
-      items.forEach(item => {
-        const onItemClick = (e: MouseEvent) => {
+      this.initTimeout = setTimeout(() => {
+        const wrapper = this.querySelector("[data-select-wrapper]") as HTMLElement | null;
+        if (!wrapper) return;
+
+        const trigger = wrapper.querySelector("[data-select-trigger]") as HTMLButtonElement;
+        const dropdown = wrapper.querySelector("[data-select-dropdown]") as HTMLDivElement;
+        const items = wrapper.querySelectorAll<HTMLElement>("[data-select-item]");
+        const valueSpan = wrapper.querySelector("[data-select-value]");
+        const hiddenInput = this.querySelector("[data-select-hidden-input]") as HTMLInputElement | null;
+
+        if (!trigger || !dropdown) return;
+
+        const onTriggerClick = (e: MouseEvent) => {
           e.stopPropagation();
-          const val = (item as HTMLElement).dataset.value || "";
-          const label = (item as HTMLElement).dataset.label || "";
-          
-          if (hiddenInput) {
-            hiddenInput.value = val;
-            hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
-          }
-          if (valueSpan) valueSpan.textContent = label;
-          
-          items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
-          item.querySelector("[data-check-icon]")?.classList.remove("hidden");
-          
+          dropdown.classList.toggle("hidden");
+        };
+        trigger.addEventListener("click", onTriggerClick);
+
+        const itemCleanups: (() => void)[] = [];
+        items.forEach(item => {
+          const onItemClick = (e: MouseEvent) => {
+            e.stopPropagation();
+            const val = (item as HTMLElement).dataset.value || "";
+            const label = (item as HTMLElement).dataset.label || "";
+            if (hiddenInput) {
+              hiddenInput.value = val;
+              hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+            }
+            if (valueSpan) valueSpan.textContent = label;
+            
+            items.forEach(i => i.querySelector("[data-check-icon]")?.classList.add("hidden"));
+            item.querySelector("[data-check-icon]")?.classList.remove("hidden");
+            
+            dropdown.classList.add("hidden");
+          };
+          item.addEventListener("click", onItemClick);
+          itemCleanups.push(() => item.removeEventListener("click", onItemClick));
+        });
+
+        const onDocumentClick = () => {
           dropdown.classList.add("hidden");
         };
-        item.addEventListener("click", onItemClick);
-        itemCleanups.push(() => item.removeEventListener("click", onItemClick));
-      });
-
-      const onDocumentClick = () => {
-        dropdown.classList.add("hidden");
-      };
-      document.addEventListener("click", onDocumentClick);
-
-      this.selectCleanup = () => {
-        trigger.removeEventListener("click", onTriggerClick);
-        itemCleanups.forEach(fn => fn());
-        document.removeEventListener("click", onDocumentClick);
-      };
+        document.addEventListener("click", onDocumentClick);
+
+        this.selectCleanup = () => {
+          trigger.removeEventListener("click", onTriggerClick);
+          itemCleanups.forEach(fn => fn());
+          document.removeEventListener("click", onDocumentClick);
+        };
+      }, 0);
     }
 
     disconnectedCallback() {
+      if (this.initTimeout) {
+        clearTimeout(this.initTimeout);
+      }
       if (this.selectCleanup) {
         this.selectCleanup();
         this.selectCleanup = null;

package/src/components/astro/RLASidebar.astro

@@ -41,7 +41,7 @@ function normalizeBadge(badge: any) {
     const v = badge.variant.toLowerCase()
     if (v === "tip" || v === "success") { color = "success"; variant = "soft" }
     else if (v === "caution" || v === "warning") { color = "warning"; variant = "soft" }
-    else if (v === "danger") { color = "danger"; variant = "soft" }
+    else if (v === "error") { color = "error"; variant = "soft" }
     else if (v === "note" || v === "default") { color = "primary"; variant = "soft" }
   }
   return { text: badge.text || "", color, variant: variant as "solid" | "outline" | "soft", class: badge.class || "" }

package/src/components/astro/RLATableOfContents.astro

@@ -15,6 +15,7 @@ const {
   tableOfContents: tableOfContentsConfig,
   ui: uiProp,
   class: className,
+  collapsible = false,
   containerSelector = ".markdown-content",
   ...rest
 } = Astro.props as TableOfContentsProps
@@ -36,32 +37,62 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
 ---
 
 {tableOfContentsConfig !== false && filteredHeadings.length > 0 && (
-  <div class={classes.root} data-slot="root" data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
-    <div class={classes.container} data-slot="container">
-      <h4 class={classes.title} data-slot="title">On this page</h4>
-      <ul class:list={[classes.list, "mt-2xl flex flex-col gap-3xs"]} data-slot="list">
-        {filteredHeadings.map(heading => (
-          <li
-            class:list={[
-              classes.item,
-              heading.depth === 2 && "pl-3xs",
-              heading.depth === 3 && "pl-6",
-              heading.depth >= 4 && "pl-9"
-            ]}
-            data-slot="item"
-          >
-            <a
-              href={`#${heading.slug}`}
-              class:list={["toc-link", classes.link]}
-              data-slot="link"
+  collapsible ? (
+    <details class:list={[className]} data-rla-toc-collapsible data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
+      <summary class="flex items-center justify-between gap-3 px-4 h-10 text-sm font-medium text-foreground cursor-pointer select-none hover:bg-muted/40 transition-colors list-none">
+        <span class="flex items-center gap-2">
+          <span class="i-lucide-list size-4 text-primary shrink-0" />
+          <span>On this page</span>
+        </span>
+        <span class="rla-toc-chevron i-lucide-chevron-down size-4 text-muted-foreground shrink-0 transition-transform duration-200" />
+      </summary>
+      <div class="px-4 pt-3 max-h-[40vh] overflow-y-auto border-t border-border/50 bg-background">
+        <ul class="flex flex-col gap-0.5 pb-8">
+          {filteredHeadings.map(heading => (
+            <li class:list={[heading.depth === 3 && "pl-4"]}>
+              <a
+                href={`#${heading.slug}`}
+                class:list={[
+                  "toc-link block py-1.5 text-sm transition-colors hover:text-primary no-underline",
+                  heading.depth === 2 ? "text-foreground font-medium" : "text-muted-foreground"
+                ]}
+                data-rla-toc-link
+              >
+                {heading.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </details>
+  ) : (
+    <div class={classes.root} data-slot="root" data-container-selector={containerSelector} data-heading-selector={headingSelector} {...rest}>
+      <div class={classes.container} data-slot="container">
+        <h4 class={classes.title} data-slot="title">On this page</h4>
+        <ul class:list={[classes.list, "mt-2xl flex flex-col gap-3xs"]} data-slot="list">
+          {filteredHeadings.map(heading => (
+            <li
+              class:list={[
+                classes.item,
+                heading.depth === 2 && "pl-3xs",
+                heading.depth === 3 && "pl-6",
+                heading.depth >= 4 && "pl-9"
+              ]}
+              data-slot="item"
             >
-              <span class={classes.linkText} data-slot="link-text">{heading.text}</span>
-            </a>
-          </li>
-        ))}
-      </ul>
+              <a
+                href={`#${heading.slug}`}
+                class:list={["toc-link", classes.link]}
+                data-slot="link"
+              >
+                <span class={classes.linkText} data-slot="link-text">{heading.text}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
-  </div>
+  )
 )}
 
 <style is:global>
@@ -73,10 +104,23 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
 
 <script is:inline>
   (function() {
-    var root = document.querySelector('[data-container-selector]');
-    if (!root) return;
+    // ── Collapsible TOC behaviour (chevron + close-on-link-click) ──
+    function initCollapsibleTocs() {
+      document.querySelectorAll('[data-rla-toc-collapsible]').forEach(function(details) {
+        var chevron = details.querySelector('.rla-toc-chevron');
+        details.addEventListener('toggle', function() {
+          if (chevron) chevron.style.transform = details.open ? 'rotate(180deg)' : '';
+        });
+        details.querySelectorAll('[data-rla-toc-link]').forEach(function(link) {
+          link.addEventListener('click', function() { details.open = false; });
+        });
+      });
+    }
 
+    // ── Active-heading tracker (desktop sidebar) ──
     function updateActiveHeading() {
+      var root = document.querySelector('[data-slot="root"][data-container-selector]');
+      if (!root) return;
       var links = root.querySelectorAll(".toc-link");
       if (links.length === 0) return;
 
@@ -102,8 +146,13 @@ const headingSelector = Array.from({ length: maxLevel - minLevel + 1 }, (_, i) =
       }
     }
 
+    initCollapsibleTocs();
     updateActiveHeading();
+
     window.addEventListener("scroll", updateActiveHeading, { passive: true });
-    document.addEventListener("astro:after-swap", updateActiveHeading);
+    document.addEventListener("astro:after-swap", function() {
+      initCollapsibleTocs();
+      updateActiveHeading();
+    });
   })();
 </script>

package/src/components/astro/RLAThemeSelector.astro

@@ -28,6 +28,7 @@ const classes = resolveClasses(themeSelector, {
             size={size}
             class:list={["theme-toggle-button", classes.root]}
             variant="ghost"
+            square
             aria-label="Toggle theme"
     >
         <span class:list={[classes.sun]} />

package/src/components/astro/RLAToast.astro

@@ -24,12 +24,12 @@ const {
 } = Astro.props as ToastProps
 
 const classes = resolveClasses(toast, {
-  variant: (variant === "success" || variant === "destructive") ? variant : "default"
+  variant: ["success", "error", "warning", "info"].includes(variant ?? "") ? variant : "default"
 }, useUi("toast", uiProp), className)
 
 const variantIcons: Record<string, string> = {
   default: "i-lucide-bell",
-  destructive: "i-lucide-alert-circle",
+  error: "i-lucide-alert-circle",
   success: "i-lucide-check-circle-2",
   warning: "i-lucide-alert-triangle",
   info: "i-lucide-info",

package/src/components/vue/RLVScrollToTop.vue

@@ -3,8 +3,8 @@ import { scv } from "css-variants"
 import { useUi, resolveClasses } from "../../utils"
 import type { ScrollToTopProps } from "../../types/components/scroll-to-top"
 import scrollToTopTheme from "../../themes/scroll-to-top.theme"
-import { useScrollToTop } from "../../composables/useScrollToTop"
-import { computed, onMounted, onUnmounted, watch, useAttrs } from "vue"
+import { trackScroll, scrollToTop as scrollToTopFn } from "../../utils"
+import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from "vue"
 
 const attrs = useAttrs()
 const scrollToTop = scv(scrollToTopTheme)
@@ -21,13 +21,8 @@ const {
 
 const classes = resolveClasses(scrollToTop, { color }, useUi("scrollToTop", uiProp), className)
 
-const {
-  isVisible,
-  scrollPercentage,
-  scrollToTop: scrollToTopFn
-} = useScrollToTop({
-  threshold
-})
+const isVisible = ref(false)
+const scrollPercentage = ref(0)
 
 const instanceId = `rla-vue-${Math.random().toString(36).slice(2, 8)}`
 const gaugeBorderWidth = progressWidth * 0.5
@@ -49,16 +44,23 @@ function updateCssVars() {
 
 watch(scrollPercentage, updateCssVars)
 
+let unsubscribe: (() => void) | null = null
+
 onMounted(() => {
   const nonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute("content") ?? ""
   styleEl = document.createElement("style")
   if (nonce) styleEl.setAttribute("nonce", nonce)
   document.head.appendChild(styleEl)
-  updateCssVars()
+
+  unsubscribe = trackScroll({ threshold }, (state) => {
+    isVisible.value = state.isVisible
+    scrollPercentage.value = state.scrollPercentage
+  })
 })
 
 onUnmounted(() => {
   if (styleEl) styleEl.remove()
+  unsubscribe?.()
 })
 </script>
 

package/src/components/vue/RLVToast.vue

@@ -22,7 +22,7 @@ const resolvedClasses = computed(() =>
 
 const variantIcons: Record<string, string> = {
   default: "i-lucide-bell",
-  destructive: "i-lucide-alert-circle",
+  error: "i-lucide-alert-circle",
   success: "i-lucide-check-circle-2",
   warning: "i-lucide-alert-triangle",
   info: "i-lucide-info"

package/src/components/vue/RLVToaster.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
-import { useToast } from "../../composables/useToast"
+import { ref, onMounted, onUnmounted } from "vue"
+import { toastsStore, removeToast } from "../../utils"
 import RLVToast from "./RLVToast.vue"
 
-const { toasts, remove } = useToast()
+const toasts = ref(toastsStore.get())
+let unsubscribe: (() => void) | null = null
+
+onMounted(() => {
+  unsubscribe = toastsStore.subscribe((val) => {
+    toasts.value = val
+  })
+})
+
+onUnmounted(() => {
+  unsubscribe?.()
+})
 </script>
 
 <template>
@@ -22,7 +34,7 @@ const { toasts, remove } = useToast()
         :key="toast.id"
         v-bind="toast"
         class="pointer-events-auto"
-        @close="remove"
+        @close="removeToast"
       />
     </TransitionGroup>
   </div>

package/src/config/index.ts

@@ -1,2 +1 @@
 export * from "./site.config"
-export * from "./security"

package/src/integrations/index.ts

@@ -1,3 +1,2 @@
-export * from "./sri"
 export { ui } from "./ui"
 export type { UIOptions, UIConfigOverrides } from "./ui"

package/src/integrations/ui.ts

@@ -1,7 +1,7 @@
 import type { AstroIntegration } from "astro"
 import UnoCSS from "unocss/astro"
 import vue from "@astrojs/vue"
-import defu from "defu"
+import { merge } from "../utils/merge"
 import { defaultUIConfig } from "../themes"
 import type { ComponentTheme } from "../utils/defineTheme"
 import rimelightUiPreset, {
@@ -11,7 +11,6 @@ import rimelightUiPreset, {
   type RimelightPresetOptions
 } from "../presets"
 import { extractAllMeta } from "../docs/extractAll"
-import virtual from "vite-plugin-virtual"
 
 export interface CategoryConfig {
   label: string
@@ -44,8 +43,8 @@ export interface UIOptions {
       }
   >
   /**
-   * Global UI overrides applied to all components. Merged with defaults via `defu` (first arg
-   * wins).
+   * Global UI overrides applied to all components. Merged with defaults via our custom recursive
+   * merge utility (first arg wins).
    */
   ui?: UIConfigOverrides
   /**
@@ -106,7 +105,7 @@ export interface UIOptions {
  *   })
  */
 export function ui(options: UIOptions = {}): AstroIntegration[] {
-  const resolvedUI = defu(options.ui ?? {}, defaultUIConfig)
+  const resolvedUI = merge(options.ui ?? {}, defaultUIConfig)
   const coreColors = [
     "primary",
     "secondary",
@@ -149,22 +148,24 @@ export function ui(options: UIOptions = {}): AstroIntegration[] {
         },
         plugins: [
           {
-            name: "vite-plugin-rimelight-ui-config",
+            name: "vite-plugin-rimelight-ui-virtual",
             enforce: "pre",
             resolveId(id: string) {
-              if (id === virtualModuleId) return resolvedVirtualModuleId
+              if (id === virtualModuleId || id === "virtual:rimelight-ui-docs-meta") {
+                return "\0" + id
+              }
               return null
             },
             load(id: string) {
               if (id === resolvedVirtualModuleId) {
                 return `export const getUIConfig = () => (${JSON.stringify(resolvedConfig)});`
               }
+              if (id === "\0virtual:rimelight-ui-docs-meta") {
+                return `export default ${JSON.stringify(docsMeta)}`
+              }
               return null
             }
-          },
-          virtual({
-            "virtual:rimelight-ui-docs-meta": `export default ${JSON.stringify(docsMeta)}`
-          })
+          }
         ]
       }
     })

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

@@ -5,7 +5,7 @@ export const createLinkGroupTheme = () =>
     slots: ["root", "title", "list", "item", "link"],
     base: {
       root: "flex flex-col gap-4",
-      title: "font-bold text-sm uppercase tracking-wider text-neutral-500 pl-2.5",
+      title: "font-bold text-sm uppercase tracking-wider text-neutral-500",
       list: "flex flex-col gap-2",
       item: "",
       link: "text-sm text-muted-foreground hover:text-accent-foreground transition-colors"

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

@@ -5,7 +5,7 @@ export const createLocaleSelectorTheme = () =>
     base: {
       root: "inline-flex flex-col gap-1.5",
       label: "text-xs font-semibold text-muted select-none",
-      wrapper: "relative inline-block w-full",
+      wrapper: "relative inline-block",
       select:
         "w-full appearance-none font-medium rounded-lg transition-all focus:outline-none focus:ring-2 focus:ring-emerald-500/40 cursor-pointer pr-10",
       option: "bg-neutral-900 text-white selection:bg-neutral-800",

package/src/themes/popover.theme.ts

@@ -5,13 +5,10 @@ export const createPopoverTheme = (_colors: readonly string[] = defaultColors) =
   defineTheme({
     slots: ["root", "trigger", "content"],
     base: {
-      root: "relative inline-block group/popover",
+      root: "relative inline-block",
       trigger: "",
       content: [
-        "absolute z-50 w-72 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
-        "transition-all duration-200 invisible opacity-0 scale-95 origin-center",
-        "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:scale-100",
-        "focus-within:visible focus-within:opacity-100 focus-within:scale-100"
+        "absolute z-50 w-72 rounded-xl border border-border bg-background p-4 text-foreground shadow-lg outline-none"
       ]
     },
     variants: {

package/src/themes/select.theme.ts

@@ -9,7 +9,7 @@ export const createSelectTheme = () =>
       trigger:
         "flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       content:
-        "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md transition-all w-full mt-1 max-h-60 overflow-y-auto",
+        "absolute z-50 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-background p-1 text-foreground shadow-lg transition-all w-full mt-1 max-h-60 overflow-y-auto",
       item: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       itemText: "truncate",
       itemIcon: "ml-auto size-4"

package/src/themes/toast.theme.ts

@@ -8,18 +8,24 @@ export const createToastTheme = () =>
       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",
+        "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-[.error]:border-muted/40 group-[.error]:hover:border-error-500/30 group-[.error]:hover:bg-error-500 group-[.error]:hover:text-white group-[.error]:focus:ring-error-500",
       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"
+        error: {
+          root: "error 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"
+        },
+        warning: {
+          root: "border-warning-500/20 bg-warning-500/10 text-warning-700 dark:text-warning-400"
+        },
+        info: {
+          root: "border-info-500/20 bg-info-500/10 text-info-700 dark:text-info-400"
         }
       }
     },

package/src/types/components/button.ts

@@ -1,6 +1,7 @@
 import type { Theme, ThemeColor } from "../theme"
+import type { LinkProps } from "./link"
 
-export interface ButtonProps {
+export interface ButtonProps extends LinkProps {
   /**
    * The visual style variant of the button
    */

package/src/types/components/link.ts

@@ -1,5 +1,3 @@
-import type { ThemeColor } from "../theme"
-
 export interface LinkProps {
   to?: string | object
   href?: string
@@ -13,14 +11,6 @@ export interface LinkProps {
   exactHash?: boolean
   inactiveClass?: string
   activeClass?: string
-  variant?: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link"
-  color?: ThemeColor
-  /**
-   * Styles the link visually as a button
-   *
-   * @default false
-   */
-  isButton?: boolean
   /**
    * Screen reader accessibility label. Will automatically append " (opens in a new tab)" for
    * external links if not customized

package/src/types/components/sidebar.ts

@@ -8,7 +8,7 @@ export interface BadgeConfig {
     | "note"
     | "tip"
     | "caution"
-    | "danger"
+    | "error"
     | "success"
     | "default"
   class?: string