release: WRNexusJS 0.3.5

packages/ui/components/Drawer.wrn

@@ -1,12 +1,19 @@
 component Drawer {
   props {
-    class = ""
-    title = "Panel"
+    size = "default"
+    color = "primary"
+    title = "Drawer"
+    description = ""
     open = false
-    side = "right"
+    placement = "bottom"
+    closeLabel = "Close"
+    class = ""
   }
-  state visible = open
   view {
-    <div data-show="visible" class="fixed inset-0 z-50 {class}" role="dialog" aria-modal="true"><button class="absolute inset-0 bg-slate-950/50" aria-label="Close" @click="visible = false"></button><aside class="absolute inset-y-0 w-[min(92vw,28rem)] overflow-auto bg-white p-6 shadow-2xl transition dark:bg-slate-900 {side === 'left' ? 'left-0' : 'right-0'}"><header class="flex items-center justify-between"><h2 class="text-xl font-bold">{title}</h2><button @click="visible = false" class="size-10 rounded-xl hover:bg-slate-100">×</button></header><div class="mt-6"><slot /></div></aside></div>
+    <div data-show="{open}" class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--drawer wire-next--placement-{placement} {class}" role="dialog" aria-modal="true" aria-label="{title}">
+      <header><strong>{title}</strong><button type="button" aria-label="{closeLabel}">×</button></header>
+      {#if description}<p>{description}</p>{/if}
+      <slot />
+    </div>
   }
 }