@stacksjs/components 0.2.54 → 0.2.66

package/src/ui/sidebar/SidebarItem.stx

@@ -11,20 +11,20 @@ export const variant = $props.variant || 'tahoe'
 
 const itemVariants = {
   workspace: {
-    base: 'flex w-full items-center gap-3 rounded-[18px] px-4 py-3 text-[17px] leading-tight transition-colors duration-150',
+    base: 'flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2 text-[14px] leading-tight transition-colors duration-150',
     indent: '',
     active: 'bg-[#e7e7e5] text-zinc-950',
     inactive: 'text-zinc-700 hover:bg-[#ececea] hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
     icon: active ? 'text-zinc-900 dark:text-zinc-100' : 'text-zinc-500 dark:text-zinc-500',
-    badge: 'ml-auto rounded-full bg-white/70 px-2.5 py-0.5 text-[13px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
+    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/70 px-1.5 text-[11px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
   },
   desktop: {
-    base: 'flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2.5 text-[15px] leading-tight transition-colors duration-150',
+    base: 'flex w-full items-center gap-3 rounded-[14px] px-3 py-1.5 text-[13.5px] leading-tight transition-colors duration-150',
     indent: '',
-    active: 'bg-white/55 text-zinc-950 shadow-sm ring-1 ring-white/50 dark:bg-white/12 dark:text-white dark:ring-white/10',
-    inactive: 'text-zinc-700 hover:bg-white/34 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
-    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-500 dark:text-zinc-400',
-    badge: 'ml-auto rounded-full bg-white/55 px-2.5 py-0.5 text-xs font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
+    active: 'bg-[#e8e8e6]/90 text-zinc-950 dark:bg-white/12 dark:text-white',
+    inactive: 'text-zinc-700 hover:bg-white/38 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
+    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400',
+    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/72 px-1.5 text-[11px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
   },
   default: {
     base: 'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px] transition-all duration-150',
@@ -41,7 +41,7 @@ const baseItemList = [itemStyle.base, itemStyle.indent]
 const stateClasses = disabled ? 'opacity-50 cursor-not-allowed' : active ? itemStyle.active : itemStyle.inactive
 
 export const itemClasses = [...baseItemList, stateClasses].filter(Boolean).join(' ')
-export const iconClasses = `${icon} w-5 h-5 flex-shrink-0 ${itemStyle.icon}`
+export const iconClasses = `${icon} h-[18px] w-[18px] flex-shrink-0 ${itemStyle.icon}`
 export const badgeClasses = itemStyle.badge
 </script>
 

package/src/ui/sidebar/SidebarSection.stx

@@ -14,7 +14,7 @@ const headerVariants = {
     hover: 'hover:text-zinc-600 dark:hover:text-zinc-300 cursor-pointer',
   },
   desktop: {
-    base: 'w-full flex items-center gap-2.5 px-3.5 pb-2 pt-4 rounded-[14px] text-left transition-colors duration-150 text-[12px] font-semibold uppercase tracking-[0.10em] text-zinc-500/80 dark:text-zinc-400/80',
+    base: 'w-full flex items-center gap-2.5 px-3 pb-1.5 pt-3 rounded-[14px] text-left transition-colors duration-150 text-[12px] font-semibold uppercase tracking-[0.10em] text-zinc-500/80 dark:text-zinc-400/80',
     hover: 'hover:bg-white/25 dark:hover:bg-white/10 cursor-pointer',
   },
   default: {
@@ -26,7 +26,7 @@ const headerVariants = {
 const headerStyle = headerVariants[variant] || headerVariants.default
 const headerClasses = [headerStyle.base, collapsible ? headerStyle.hover : ''].filter(Boolean).join(' ')
 export const headerClassesValue = headerClasses
-export const sectionClasses = variant === 'workspace' || variant === 'desktop' ? 'py-1.5' : 'py-1'
+export const sectionClasses = variant === 'workspace' ? 'py-1.5' : variant === 'desktop' ? 'py-1' : 'py-1'
 export const groupClasses = variant === 'workspace' || variant === 'desktop' ? 'space-y-1 overflow-hidden' : 'mt-1 space-y-0.5 overflow-hidden'
 export const labelClasses = variant === 'workspace' || variant === 'desktop'
   ? 'flex-1 truncate'
@@ -37,7 +37,8 @@ export const labelClasses = variant === 'workspace' || variant === 'desktop'
 const emit = defineEmits()
 const sectionId = {{ id }}
 const collapsibleProp = {{ collapsible }}
-const isExpanded = state({{ expanded }})
+// Reactive prop binding — parent can drive `expanded` via signals. See #1704.
+const isExpanded = useReactiveProp('expanded', {{ expanded }})
 
 function onHeaderClick() {
   if (!collapsibleProp) return

package/src/ui/sidebar/index.ts

@@ -35,6 +35,8 @@ export interface SidebarProps {
   width?: number
   /** Minimum width when collapsed in pixels */
   minWidth?: number
+  /** Collapse behavior: keep a compact rail or hide the sidebar entirely */
+  collapseMode?: 'rail' | 'hidden'
   /** Visual style variant */
   variant?: SidebarVariant
   /** Layout placement for app shells and native-like sidebars */
@@ -43,6 +45,22 @@ export interface SidebarProps {
   position?: 'left' | 'right'
   /** Whether to show border */
   bordered?: boolean
+  /** Light-mode tint opacity over sidebar material. Higher values reduce vibrancy. */
+  materialOpacity?: number
+  /** Dark-mode tint opacity over sidebar material. Higher values reduce vibrancy. */
+  materialDarkOpacity?: number
+  /** Force native/sidebar material appearance instead of following system mode */
+  materialScheme?: 'system' | 'light' | 'dark'
+  /** localStorage key used to persist collapse state */
+  persistKey?: string
+  /** Optional app shell selector whose sidebar width CSS variable should be synced */
+  shellSelector?: string
+  /** CSS variable written on shellSelector when the sidebar collapses or expands */
+  widthVar?: string
+  /** Optional class toggled on the document element while collapsed */
+  collapsedClass?: string
+  /** Whether hidden desktop collapse should notify Craft's web sidebar material */
+  nativeMaterialCollapse?: boolean
   /** Additional CSS classes */
   className?: string
   /** Callback when collapse state changes */
@@ -84,6 +102,12 @@ export interface SidebarHeaderProps {
   subtitle?: string
   logo?: string
   logoIcon?: string
+  /**
+   * Show macOS-style window controls. `auto` only renders them when Craft
+   * exposes a custom-window-controls marker, avoiding duplicate native chrome.
+   */
+  showWindowControls?: boolean | 'auto'
+  showNavigationControls?: boolean
   showSearch?: boolean
   searchPlaceholder?: string
   searchValue?: string
@@ -129,6 +153,12 @@ export interface NativeSidebarConfig {
   backgroundEffect?: SidebarBackgroundEffect
   /** Whether the native sidebar should let the window background show through */
   allowsVibrancy?: boolean
+  /** Light-mode tint opacity over sidebar material */
+  materialOpacity?: number
+  /** Dark-mode tint opacity over sidebar material */
+  materialDarkOpacity?: number
+  /** Force native/sidebar material appearance instead of following system mode */
+  materialScheme?: 'system' | 'light' | 'dark'
   /** Header configuration */
   header?: {
     title?: string

package/src/ui/switch/Switch.stx

@@ -26,7 +26,9 @@ const trackBase = {{ trackBaseClasses }}
 const trackDisabled = {{ trackDisabledClasses }}
 const thumbBase = {{ thumbBaseClasses }}
 const extraClass = {{ className }}
-const isChecked = state({{ checked }})
+// Reactive prop binding so the parent can drive `checked` via signals.
+// See stacksjs/stx#1704.
+const isChecked = useReactiveProp('checked', {{ checked }})
 
 function toggle() {
   if (isDisabled) return

package/src/ui/tabs/TabPanel.stx

@@ -0,0 +1,25 @@
+<script server>
+// Slot wrapper that the parent <Tabs> discovers via DOM walk. The parent
+// reads `data-label` (and optional `data-icon`) to build the tab list and
+// toggles the `hidden` attribute as the active tab changes. Hidden by
+// default — the parent flips the active one visible after mount. See
+// stacksjs/stx#1703.
+export const label = $props.label || ''
+export const icon = $props.icon || ''
+export const className = $props.className || ''
+
+const baseClasses = 'p-4 focus:outline-none'
+export const panelClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<div
+  data-stx-tab-panel
+  data-label="{{ label }}"
+  data-icon="{{ icon }}"
+  class="{{ panelClasses }}"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <slot />
+</div>

package/src/ui/tabs/Tabs.stx

@@ -1,4 +1,12 @@
 <script server>
+// Two modes (see stacksjs/stx#1703):
+//   1. Legacy prop API — pass `tabs={[{label, content, icon}, …]}` for
+//      simple string-content tabs (kept for backward compatibility with
+//      existing visual snapshots and consumers).
+//   2. Slot API — drop `<TabPanel label="…">` children for arbitrary
+//      content (components, forms, tables, etc.). The parent enumerates
+//      [data-stx-tab-panel] descendants on mount and builds the tab list
+//      dynamically.
 export const tabs = $props.tabs || []
 export const defaultTab = $props.defaultTab || 0
 export const orientation = $props.orientation || 'horizontal'
@@ -24,6 +32,9 @@ const variantClasses = {
 export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
 export const tabListClasses = `flex ${tabListOrientationClasses[orientation]} ${variantClasses[variant]}`.trim()
 export const tabPanelClasses = `p-4 focus:outline-none`.trim()
+// True when the parent passes a non-empty `tabs` array — switches to the
+// legacy render path so existing snapshots stay byte-identical.
+export const hasPropTabs = Array.isArray(tabs) && tabs.length > 0
 </script>
 
 <script client>
@@ -31,11 +42,50 @@ const emit = defineEmits()
 const tabs = {{ tabs }}
 const variant = {{ variant }}
 const orientation = {{ orientation }}
+const hasPropTabs = {{ hasPropTabs }}
+const containerRef = useRef()
+// In slot mode, `discoveredTabs` is populated from child <TabPanel> data
+// attributes on mount. In prop mode, it mirrors the `tabs` prop so the
+// rendering loop works the same in both modes.
+const discoveredTabs = state(hasPropTabs ? tabs : [])
 const activeTab = state({{ defaultTab }})
 
+// Walk only direct descendants of THIS container (not nested Tabs').
+function findOwnPanels() {
+  const root = containerRef.value
+  if (!root) return []
+  // Closest ancestor with data-stx-tabs must be this container's root —
+  // protects against nested <Tabs> contamination.
+  return Array.from(root.querySelectorAll('[data-stx-tab-panel]'))
+    .filter(p => p.closest('[data-stx-tabs]') === root)
+}
+
+onMount(() => {
+  if (hasPropTabs) return  // legacy mode: prop array already in discoveredTabs
+  const panels = findOwnPanels()
+  const list = panels.map(p => ({
+    label: p.dataset.label || '',
+    icon: p.dataset.icon || '',
+  }))
+  discoveredTabs.set(list)
+})
+
+// In slot mode, toggle each panel's `hidden` attribute as activeTab changes.
+// Prop mode is handled inline by the @foreach loop's :show binding below.
+effect(() => {
+  if (hasPropTabs) return
+  const panels = findOwnPanels()
+  const idx = activeTab()
+  panels.forEach((p, i) => {
+    if (i === idx) p.removeAttribute('hidden')
+    else p.setAttribute('hidden', '')
+  })
+})
+
 function selectTab(index) {
   activeTab.set(index)
-  emit('change', { index, tab: tabs[index] })
+  const list = discoveredTabs()
+  emit('change', { index, tab: list[index] })
 }
 
 function isActive(index) {
@@ -60,7 +110,7 @@ function getTabClasses(index) {
 }
 
 function onTabKey(event, index) {
-  const tabCount = tabs.length
+  const tabCount = discoveredTabs().length
   let next = index
   if (orientation === 'horizontal') {
     if (event.key === 'ArrowRight') { event.preventDefault(); next = (index + 1) % tabCount }
@@ -81,46 +131,72 @@ function onTabKey(event, index) {
 defineExpose({ activeTab, selectTab })
 </script>
 
-<div class="{{ containerClasses }}">
+<div x-ref="containerRef" data-stx-tabs class="{{ containerClasses }}">
   <div
     class="{{ tabListClasses }}"
     role="tablist"
     aria-orientation="{{ orientation }}"
   >
-    @foreach(tab in tabs)
+    @if(hasPropTabs)
+      {{-- Legacy mode: server-side iterate the prop tabs array. Buttons --}}
+      {{-- get static class names so existing visual snapshots stay      --}}
+      {{-- byte-identical.                                                 --}}
+      @foreach(tab in tabs)
+        <button
+          type="button"
+          :class="getTabClasses({{ $loop.index }})"
+          role="tab"
+          :aria-selected="isActive({{ $loop.index }}) ? 'true' : 'false'"
+          aria-controls="tab-panel-{{ $loop.index }}"
+          id="tab-{{ $loop.index }}"
+          :tabindex="isActive({{ $loop.index }}) ? '0' : '-1'"
+          @click="selectTab({{ $loop.index }})"
+          @keydown="onTabKey($event, {{ $loop.index }})"
+        >
+          @if(tab.icon)
+            <span class="inline-flex items-center gap-2">
+              <span x-html="{!! JSON.stringify(tab.icon) !!}"></span>
+              <span>{{ tab.label }}</span>
+            </span>
+          @else
+            {{ tab.label }}
+          @endif
+        </button>
+      @endforeach
+    @else
+      {{-- Slot mode: render the tab list dynamically from --}}
+      {{-- discoveredTabs() which is populated in onMount. --}}
       <button
+        :for="(tab, idx) in discoveredTabs()"
+        :key="idx"
         type="button"
-        :class="getTabClasses({{ $loop.index }})"
+        x-class="getTabClasses(idx)"
         role="tab"
-        :aria-selected="isActive({{ $loop.index }}) ? 'true' : 'false'"
-        aria-controls="tab-panel-{{ $loop.index }}"
-        id="tab-{{ $loop.index }}"
-        :tabindex="isActive({{ $loop.index }}) ? '0' : '-1'"
-        @click="selectTab({{ $loop.index }})"
-        @keydown="onTabKey($event, {{ $loop.index }})"
+        :aria-selected="isActive(idx) ? 'true' : 'false'"
+        :tabindex="isActive(idx) ? 0 : -1"
+        @click="selectTab(idx)"
+        @keydown="onTabKey($event, idx)"
       >
-        @if(tab.icon)
-          <span class="inline-flex items-center gap-2">
-            <span x-html="{!! JSON.stringify(tab.icon) !!}"></span>
-            <span>{{ tab.label }}</span>
-          </span>
-        @else
-          {{ tab.label }}
-        @endif
+        <span :if="tab.icon" class="inline-flex items-center gap-2" x-html="tab.icon"></span>
+        <span :text="tab.label"></span>
       </button>
-    @endforeach
+    @endif
   </div>
 
-  @foreach(tab in tabs)
-    <div
-      :show="isActive({{ $loop.index }})"
-      id="tab-panel-{{ $loop.index }}"
-      class="{{ tabPanelClasses }}"
-      role="tabpanel"
-      aria-labelledby="tab-{{ $loop.index }}"
-      tabindex="0"
-    >
-      {!! tab.content !!}
-    </div>
-  @endforeach
+  @if(hasPropTabs)
+    @foreach(tab in tabs)
+      <div
+        :show="isActive({{ $loop.index }})"
+        id="tab-panel-{{ $loop.index }}"
+        class="{{ tabPanelClasses }}"
+        role="tabpanel"
+        aria-labelledby="tab-{{ $loop.index }}"
+        tabindex="0"
+      >
+        {!! tab.content !!}
+      </div>
+    @endforeach
+  @else
+    <slot />
+  @endif
 </div>

package/src/ui/tabs/index.ts

@@ -1,5 +1,13 @@
+export { default as TabPanel } from './TabPanel.stx'
 export { default as Tabs } from './Tabs.stx'
 
+/**
+ * Legacy prop API — pass `tabs` as an array of `{ label, content, icon? }`
+ * where `content` is a HTML string. Kept for backward compatibility; prefer
+ * the slot API below for any tab whose content needs to be a component tree.
+ *
+ * See stacksjs/stx#1703.
+ */
 export interface Tab {
   label: string
   content: string
@@ -7,10 +15,36 @@ export interface Tab {
 }
 
 export interface TabsProps {
-  tabs: Tab[]
+  /** Legacy: array of tab definitions with string content. */
+  tabs?: Tab[]
   defaultTab?: number
   orientation?: 'horizontal' | 'vertical'
   variant?: 'line' | 'pills' | 'enclosed'
   onChange?: (index: number, tab: Tab) => void
   className?: string
 }
+
+/**
+ * Slot API — wrap each tab's content in a `<TabPanel label="…">`. The parent
+ * `<Tabs>` discovers panels on mount via `[data-stx-tab-panel]` data
+ * attributes, builds the tab list dynamically, and toggles each panel's
+ * `hidden` attribute as the active tab changes.
+ *
+ * @example
+ * ```html
+ * <Tabs defaultTab="0" variant="pills">
+ *   <TabPanel label="Drivers">
+ *     <DriversTable :drivers="drivers()" />
+ *   </TabPanel>
+ *   <TabPanel label="Notifications" icon="bell">
+ *     <NotificationsTable />
+ *   </TabPanel>
+ * </Tabs>
+ * ```
+ */
+export interface TabPanelProps {
+  label: string
+  /** Optional icon HTML (rendered via `x-html`) for the tab button. */
+  icon?: string
+  className?: string
+}

package/src/ui/textarea/Textarea.stx

@@ -35,7 +35,8 @@ export const helperClasses = `mt-2 text-sm ${error ? 'text-red-600 dark:text-red
 const emit = defineEmits()
 const autoResize = {{ autoResize }}
 const maxRows = {{ maxRows }}
-const inputValue = state({{ value }})
+// Reactive prop binding — parent can drive `value` via signals. See #1704.
+const inputValue = useReactiveProp('value', {{ value }}, { parse: (v) => v == null ? '' : String(v) })
 
 function resizeTextarea(el) {
   if (!autoResize) return

package/src/ui/tooltip/Tooltip.stx

@@ -27,7 +27,8 @@ export const arrowClass = `absolute w-0 h-0 border-4 border-transparent ${arrowC
 <script client>
 const delay = {{ delay }}
 const isDisabled = {{ disabled }}
-const isVisible = state({{ show }})
+// Reactive prop binding — parent can drive `show` via signals. See #1704.
+const isVisible = useReactiveProp('show', {{ show }})
 let timeoutId = null
 
 function showTooltip() {

package/src/utils/accessibility.ts

@@ -265,7 +265,7 @@ export function announceToScreenReader(message: string, priority: AriaLive = 'po
 
   // Clean up after announcement
   setTimeout(() => {
-    document.body.removeChild(announcement)
+    announcement.parentNode?.removeChild(announcement)
   }, 1000)
 }
 

package/dist/Accordion-19x8q4rj.stx

@@ -1,88 +0,0 @@
-<script server>
-export const items = $props.items || []
-export const allowMultiple = $props.allowMultiple || false
-export const defaultOpen = $props.defaultOpen || []
-export const className = $props.className || ''
-
-export const accordionClasses = `divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-lg ${className}`.trim()
-export const headerClasses = `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900`.trim()
-export const iconClasses = `w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200`.trim()
-export const contentClasses = `px-4 py-3 text-gray-700 dark:text-gray-300`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const allowMultiple = {{ allowMultiple }}
-const openItems = state({{ defaultOpen }})
-
-function toggleItem(index) {
-  const cur = openItems()
-  if (allowMultiple) {
-    openItems.set(cur.includes(index) ? cur.filter(i => i !== index) : [...cur, index])
-  }
-  else {
-    openItems.set(cur.includes(index) ? [] : [index])
-  }
-  emit('change', openItems())
-}
-
-function isOpen(index) {
-  return openItems().includes(index)
-}
-
-function onHeaderKey(event, index) {
-  const buttons = event.currentTarget.closest('[role="region"]').querySelectorAll('button[data-accordion-header]')
-  if (event.key === 'ArrowDown') {
-    event.preventDefault()
-    buttons[index + 1]?.focus()
-  }
-  else if (event.key === 'ArrowUp') {
-    event.preventDefault()
-    buttons[index - 1]?.focus()
-  }
-  else if (event.key === 'Home') {
-    event.preventDefault()
-    buttons[0]?.focus()
-  }
-  else if (event.key === 'End') {
-    event.preventDefault()
-    buttons[buttons.length - 1]?.focus()
-  }
-}
-</script>
-
-<div class="{{ accordionClasses }}" role="region">
-  @foreach(item in items)
-    <div>
-      <button
-        type="button"
-        data-accordion-header
-        class="{{ headerClasses }}"
-        @click="toggleItem({{ $loop.index }})"
-        @keydown="onHeaderKey($event, {{ $loop.index }})"
-        :aria-expanded="isOpen({{ $loop.index }}) ? 'true' : 'false'"
-        aria-controls="accordion-content-{{ $loop.index }}"
-      >
-        <span>{{ item.title }}</span>
-        <svg
-          class="{{ iconClasses }}"
-          :style="`transform: rotate(${isOpen({{ $loop.index }}) ? 180 : 0}deg)`"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-        </svg>
-      </button>
-
-      <div
-        :show="isOpen({{ $loop.index }})"
-        id="accordion-content-{{ $loop.index }}"
-        class="{{ contentClasses }}"
-        role="region"
-      >
-        {!! item.content !!}
-      </div>
-    </div>
-  @endforeach
-</div>

package/dist/Notification-tb9b525s.stx

@@ -1,78 +0,0 @@
-<script server>
-export const show = $props.show !== false
-export const title = $props.title || ''
-export const message = $props.message || ''
-export const type = $props.type || 'info'
-export const position = $props.position || 'top-right'
-export const duration = $props.duration || 5000
-export const className = $props.className || ''
-
-const typeColors = {
-  info: 'bg-blue-50 text-blue-900 dark:bg-blue-900 dark:text-blue-100',
-  success: 'bg-green-50 text-green-900 dark:bg-green-900 dark:text-green-100',
-  warning: 'bg-yellow-50 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100',
-  error: 'bg-red-50 text-red-900 dark:bg-red-900 dark:text-red-100',
-}
-
-const positions = {
-  'top-left': 'top-0 left-0',
-  'top-right': 'top-0 right-0',
-  'top-center': 'top-0 left-1/2 -translate-x-1/2',
-  'bottom-left': 'bottom-0 left-0',
-  'bottom-right': 'bottom-0 right-0',
-  'bottom-center': 'bottom-0 left-1/2 -translate-x-1/2',
-}
-
-const baseClasses = 'fixed z-50 m-4 max-w-md w-full pointer-events-auto rounded-lg p-4 shadow-lg ring-1 ring-black ring-opacity-5 transition-all'
-export const notificationClasses = `${baseClasses} ${typeColors[type]} ${positions[position]} ${className}`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const duration = {{ duration }}
-const isVisible = state({{ show }})
-
-function close() {
-  isVisible.set(false)
-  emit('close')
-}
-
-onMount(() => {
-  if (duration > 0 && isVisible()) {
-    setTimeout(close, duration)
-  }
-})
-
-defineExpose({
-  show: () => isVisible.set(true),
-  close,
-  isVisible,
-})
-</script>
-
-<div :show="isVisible()" class="{{ notificationClasses }}" role="alert">
-  <div class="flex items-start">
-    <div class="flex-1">
-      @if(title)
-        <p class="text-sm font-medium">{{ title }}</p>
-      @endif
-      @if(message)
-        <p class="mt-1 text-sm {{ title ? 'opacity-90' : '' }}">{{ message }}</p>
-      @endif
-      @if(!title && !message)
-        <slot />
-      @endif
-    </div>
-
-    <button
-      type="button"
-      @click="close()"
-      class="ml-4 inline-flex rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2"
-    >
-      <span class="sr-only">Close</span>
-      <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
-      </svg>
-    </button>
-  </div>
-</div>