@levino/shipyard-base 0.5.10 → 0.5.11

package/astro/components/SidebarElement.astro

@@ -33,8 +33,12 @@ const isActiveOrHasActiveChild = (entryValue: Entry[string]): boolean => {
   return (
     <li class={entryValue.className}>
       {entryValue.href
-        ? <a href={entryValue.href} class={cn({ 'bg-base-200/50 font-medium text-primary': isActive })}>{label}</a>
-        : <span class='menu-title'>{label}</span>}
+        ? entryValue.labelHtml
+          ? <Fragment set:html={entryValue.labelHtml} />
+          : <a href={entryValue.href} class={cn({ 'bg-base-200/50 font-medium text-primary': isActive })}>{label}</a>
+        : entryValue.labelHtml
+          ? <Fragment set:html={entryValue.labelHtml} />
+          : <span class='menu-title'>{label}</span>}
       {entryValue.subEntry ? (
         <ul>
           <Astro.self entry={entryValue.subEntry} currentPath={currentPath} />

package/astro/components/types.ts

@@ -2,6 +2,12 @@ export type Entry = Record<
   string,
   {
     label?: string
+    /**
+     * Pre-rendered HTML content to use instead of the label string.
+     * When provided, this will be rendered using set:html instead of the plain label.
+     * Useful for custom label components like buttons, icons, or interactive elements.
+     */
+    labelHtml?: string
     href?: string
     subEntry?: Entry
     active?: boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levino/shipyard-base",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "type": "module",
   "main": "src/index.ts",
   "scripts": {

package/src/globals.css

@@ -3,3 +3,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .prose :where(table) {
+    @apply block overflow-x-auto;
+  }
+}