@stacksjs/components 0.2.27 → 0.2.53

package/src/ui/sidebar/SidebarHeader.stx

@@ -1,18 +1,4 @@
 <script server>
-/**
- * SidebarHeader Component
- *
- * A header component for the sidebar with logo, title, and optional search.
- *
- * @example
- * <SidebarHeader
- *   title="My App"
- *   subtitle="Professional"
- *   :showSearch="true"
- * />
- */
-
-// Props
 export const title = $props.title || ''
 export const subtitle = $props.subtitle || ''
 export const logo = $props.logo || ''
@@ -21,30 +7,66 @@ export const showSearch = $props.showSearch ?? false
 export const searchPlaceholder = $props.searchPlaceholder || 'Search...'
 export const searchValue = $props.searchValue || ''
 export const collapsed = $props.collapsed ?? false
-export const onSearch = $props.onSearch
+export const variant = $props.variant || 'tahoe'
+
+const headerVariants = {
+  workspace: {
+    titlebar: 'h-18 flex items-center justify-between px-5',
+    logo: 'w-9 h-9 rounded-[12px] bg-black text-white flex items-center justify-center font-semibold text-sm',
+    title: 'text-[18px] font-semibold text-zinc-950 dark:text-white truncate',
+    subtitle: 'text-sm text-zinc-500 dark:text-zinc-400 truncate',
+    searchWrap: 'px-5 pb-4',
+    searchInput: 'w-full rounded-[16px] border border-zinc-200/70 bg-white/70 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-300/80 dark:border-white/10 dark:bg-white/10 dark:text-white',
+  },
+  desktop: {
+    titlebar: 'h-16 flex items-center justify-between px-4',
+    logo: 'w-9 h-9 rounded-[12px] bg-black/80 text-white flex items-center justify-center font-semibold text-sm shadow-sm dark:bg-white/14',
+    title: 'text-[17px] font-semibold text-zinc-950 dark:text-white truncate',
+    subtitle: 'text-sm text-zinc-500 dark:text-zinc-400 truncate',
+    searchWrap: 'px-4 pb-4',
+    searchInput: 'w-full rounded-[16px] border border-white/40 bg-white/45 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-500 shadow-sm focus:outline-none focus:ring-2 focus:ring-white/70 dark:border-white/10 dark:bg-white/10 dark:text-white',
+  },
+  default: {
+    titlebar: 'h-13 flex items-center justify-between px-4 border-b border-black/5 dark:border-white/10',
+    logo: 'w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm',
+    title: 'text-sm font-semibold text-black/90 dark:text-white truncate',
+    subtitle: 'text-xs text-black/50 dark:text-white/50 truncate',
+    searchWrap: 'px-3 py-3',
+    searchInput: 'w-full pl-9 pr-3 py-2 text-sm bg-black/5 dark:bg-white/10 border border-black/10 dark:border-white/10 rounded-lg text-black/90 dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-400/50 transition-colors',
+  },
+}
+
+const headerStyle = headerVariants[variant] || headerVariants.default
+export const titlebarClasses = headerStyle.titlebar
+export const logoClasses = headerStyle.logo
+export const titleClasses = headerStyle.title
+export const subtitleClasses = headerStyle.subtitle
+export const searchWrapClasses = headerStyle.searchWrap
+export const searchInputClasses = headerStyle.searchInput
+</script>
+
+<script client>
+const emit = defineEmits()
 
-// Handle search input
-function handleSearchInput(event) {
-  if (onSearch) {
-    onSearch(event.target.value)
-  }
+function onSearchInput(event) {
+  emit('search', event.target.value)
 }
 </script>
 
 <div class="flex-shrink-0">
   <!-- Title bar area -->
-  <div class="h-13 flex items-center justify-between px-4 border-b border-black/5 dark:border-white/10">
+  <div class="{{ titlebarClasses }}">
     @if(!collapsed)
       <div class="flex items-center gap-3 min-w-0">
         <!-- Logo -->
         @if(logo)
           <img src="{{ logo }}" alt="{{ title }}" class="w-8 h-8 rounded-lg object-cover" />
         @elseif(logoIcon)
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
+          <div class="{{ logoClasses }}">
             <div class="{{ logoIcon }} w-5 h-5 text-white"></div>
           </div>
         @else
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm">
+          <div class="{{ logoClasses }}">
             {{ title.charAt(0) }}
           </div>
         @endif
@@ -52,12 +74,12 @@ function handleSearchInput(event) {
         <!-- Title & Subtitle -->
         <div class="min-w-0">
           @if(title)
-            <div class="text-sm font-semibold text-black/90 dark:text-white truncate">
+            <div class="{{ titleClasses }}">
               {{ title }}
             </div>
           @endif
           @if(subtitle)
-            <div class="text-xs text-black/50 dark:text-white/50 truncate">
+            <div class="{{ subtitleClasses }}">
               {{ subtitle }}
             </div>
           @endif
@@ -68,11 +90,11 @@ function handleSearchInput(event) {
       @if(logo)
         <img src="{{ logo }}" alt="{{ title }}" class="w-8 h-8 rounded-lg object-cover mx-auto" />
       @elseif(logoIcon)
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mx-auto">
+        <div class="{{ logoClasses }} mx-auto">
           <div class="{{ logoIcon }} w-5 h-5 text-white"></div>
         </div>
       @else
-        <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm mx-auto">
+        <div class="{{ logoClasses }} mx-auto">
           {{ title.charAt(0) }}
         </div>
       @endif
@@ -84,15 +106,15 @@ function handleSearchInput(event) {
 
   <!-- Search (only when expanded) -->
   @if(showSearch && !collapsed)
-    <div class="px-3 py-3">
+    <div class="{{ searchWrapClasses }}">
       <div class="relative">
         <div class="i-hugeicons-search-01 absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-black/40 dark:text-white/40"></div>
         <input
           type="text"
           placeholder="{{ searchPlaceholder }}"
           value="{{ searchValue }}"
-          class="w-full pl-9 pr-3 py-2 text-sm bg-black/5 dark:bg-white/10 border border-black/10 dark:border-white/10 rounded-lg text-black/90 dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-400/50 transition-colors"
-          @input="handleSearchInput"
+          class="{{ searchInputClasses }}"
+          @input="onSearchInput($event)"
         />
       </div>
     </div>

package/src/ui/sidebar/SidebarItem.stx

@@ -1,21 +1,4 @@
 <script server>
-/**
- * SidebarItem Component
- *
- * An individual navigation item within a sidebar section.
- * Supports icons, badges, active states, and keyboard navigation.
- *
- * @example
- * <SidebarItem
- *   id="home"
- *   label="Home"
- *   icon="i-hugeicons-home-02"
- *   href="/"
- *   :active="true"
- * />
- */
-
-// Props
 export const id = $props.id || ''
 export const label = $props.label || ''
 export const icon = $props.icon || ''
@@ -24,95 +7,86 @@ export const badge = $props.badge || ''
 export const active = $props.active ?? false
 export const disabled = $props.disabled ?? false
 export const indent = $props.indent ?? false
-export const onClick = $props.onClick
-
-// Handle click
-function handleClick(event) {
-  if (disabled) {
-    event.preventDefault()
-    return
-  }
+export const variant = $props.variant || 'tahoe'
 
-  if (onClick) {
-    onClick(event)
-  }
+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',
+    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',
+  },
+  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',
+    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',
+  },
+  default: {
+    base: 'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px] transition-all duration-150',
+    indent: indent ? 'ml-2' : '',
+    active: 'bg-blue-500/20 text-blue-600 dark:bg-blue-400/25 dark:text-blue-300 font-medium',
+    inactive: 'text-black/80 dark:text-white/80 hover:bg-black/5 dark:hover:bg-white/10',
+    icon: active ? 'text-blue-600 dark:text-blue-300' : 'text-black/50 dark:text-white/50',
+    badge: 'ml-auto px-2 py-0.5 text-xs font-medium rounded-full bg-black/10 text-black/70 dark:bg-white/15 dark:text-white/70',
+  },
 }
 
-// Build item classes - macOS Tahoe style with translucent-friendly colors
-function getItemClasses() {
-  const baseClasses = [
-    'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px]',
-    'transition-all duration-150',
-    indent ? 'ml-2' : ''
-  ]
-
-  if (disabled) {
-    baseClasses.push('opacity-50 cursor-not-allowed')
-  } else if (active) {
-    // Active state - subtle blue highlight like macOS
-    baseClasses.push(
-      'bg-blue-500/20 text-blue-600 dark:bg-blue-400/25 dark:text-blue-300 font-medium'
-    )
-  } else {
-    // Default state - works with translucent backgrounds
-    baseClasses.push(
-      'text-black/80 dark:text-white/80',
-      'hover:bg-black/5 dark:hover:bg-white/10'
-    )
-  }
+const itemStyle = itemVariants[variant] || itemVariants.default
+const baseItemList = [itemStyle.base, itemStyle.indent]
+const stateClasses = disabled ? 'opacity-50 cursor-not-allowed' : active ? itemStyle.active : itemStyle.inactive
 
-  return baseClasses.filter(Boolean).join(' ')
-}
+export const itemClasses = [...baseItemList, stateClasses].filter(Boolean).join(' ')
+export const iconClasses = `${icon} w-5 h-5 flex-shrink-0 ${itemStyle.icon}`
+export const badgeClasses = itemStyle.badge
+</script>
 
-// Icon classes
-function getIconClasses() {
-  const baseClasses = 'w-4 h-4 flex-shrink-0'
+<script client>
+const emit = defineEmits()
+const isDisabled = {{ disabled }}
+const itemPayload = { id: {{ id }}, label: {{ label }}, href: {{ href }} }
 
-  if (active) {
-    return `${icon} ${baseClasses} text-blue-600 dark:text-blue-300`
+function onClick(event) {
+  if (isDisabled) {
+    event.preventDefault()
+    return
   }
-
-  return `${icon} ${baseClasses} text-black/50 dark:text-white/50`
+  emit('click', { item: itemPayload, event })
 }
 </script>
 
 @if(href && !disabled)
   <a
     href="{{ href }}"
-    class="{{ getItemClasses() }}"
-    @click="handleClick"
-    @if(active)
-      aria-current="page"
-    @endif
+    class="{{ itemClasses }}"
+    @click="onClick($event)"
+    @if(active)aria-current="page"@endif
   >
     @if(icon)
-      <div class="{{ getIconClasses() }}"></div>
+      <div class="{{ iconClasses }}"></div>
     @endif
     <span class="flex-1 truncate">{{ label }}</span>
     @if(badge)
-      <span class="ml-auto px-2 py-0.5 text-xs font-medium rounded-full bg-black/10 text-black/70 dark:bg-white/15 dark:text-white/70">
-        {{ badge }}
-      </span>
+      <span class="{{ badgeClasses }}">{{ badge }}</span>
     @endif
   </a>
 @else
   <button
     type="button"
-    class="{{ getItemClasses() }}"
-    @click="handleClick"
-    @if(disabled)
-      disabled
-      aria-disabled="true"
-    @endif
+    class="{{ itemClasses }}"
+    @click="onClick($event)"
+    @if(disabled)disabled aria-disabled="true"@endif
   >
     @if(icon)
-      <div class="{{ getIconClasses() }}"></div>
+      <div class="{{ iconClasses }}"></div>
     @endif
     <span class="flex-1 truncate text-left">{{ label }}</span>
     @if(badge)
-      <span class="ml-auto px-2 py-0.5 text-xs font-medium rounded-full bg-black/10 text-black/70 dark:bg-white/15 dark:text-white/70">
-        {{ badge }}
-      </span>
+      <span class="{{ badgeClasses }}">{{ badge }}</span>
     @endif
   </button>
 @endif

package/src/ui/sidebar/SidebarSection.stx

@@ -1,21 +1,4 @@
 <script server>
-/**
- * SidebarSection Component
- *
- * A collapsible section within the sidebar containing navigation items.
- * Follows macOS Finder sidebar conventions.
- *
- * @example
- * <SidebarSection
- *   id="favorites"
- *   label="Favorites"
- *   icon="i-hugeicons-star"
- *   :items="favoriteItems"
- *   :expanded="true"
- * />
- */
-
-// Props
 export const id = $props.id || ''
 export const label = $props.label || ''
 export const icon = $props.icon || ''
@@ -23,74 +6,95 @@ export const items = $props.items || []
 export const expanded = $props.expanded ?? true
 export const collapsible = $props.collapsible ?? true
 export const showLabel = $props.showLabel ?? true
-export const onToggle = $props.onToggle
-export const onItemClick = $props.onItemClick
+export const variant = $props.variant || 'tahoe'
 
-// Handle section header click
-function handleHeaderClick() {
-  if (collapsible && onToggle) {
-    onToggle(id)
-  }
+const headerVariants = {
+  workspace: {
+    base: 'w-full flex items-center gap-2.5 px-4 pb-2 pt-5 rounded-[14px] text-left transition-colors duration-150 text-[13px] font-semibold uppercase tracking-[0.12em] text-zinc-400 dark:text-zinc-500',
+    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',
+    hover: 'hover:bg-white/25 dark:hover:bg-white/10 cursor-pointer',
+  },
+  default: {
+    base: 'w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-left transition-all duration-150 text-black/60 dark:text-white/60',
+    hover: 'hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer',
+  },
 }
 
-// Handle item click
-function handleItemClick(item, event) {
-  if (onItemClick) {
-    onItemClick(item, event)
-  }
+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 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'
+  : 'flex-1 text-[13px] font-semibold tracking-tight truncate'
+</script>
+
+<script client>
+const emit = defineEmits()
+const sectionId = {{ id }}
+const collapsibleProp = {{ collapsible }}
+const isExpanded = state({{ expanded }})
+
+function onHeaderClick() {
+  if (!collapsibleProp) return
+  isExpanded.set(!isExpanded())
+  emit('toggle', sectionId)
 }
 
-// Section header classes - macOS Finder style
-const headerClasses = [
-  'w-full flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-left',
-  'transition-all duration-150',
-  'text-black/60 dark:text-white/60',
-  collapsible ? 'hover:bg-black/5 dark:hover:bg-white/10 cursor-pointer' : ''
-].filter(Boolean).join(' ')
+function onItemClick(event) {
+  emit('itemClick', event.detail)
+}
+
+const arrowClass = derived(() => `i-hugeicons-arrow-right-01 w-3 h-3 transition-transform duration-200 opacity-50 ${isExpanded() ? 'rotate-90' : ''}`)
+
+defineExpose({ isExpanded })
 </script>
 
-<div class="py-1">
-  <!-- Section header -->
+<div class="{{ sectionClasses }}">
   @if(collapsible)
     <button
       type="button"
-      class="{{ headerClasses }}"
-      @click="handleHeaderClick"
-      aria-expanded="{{ expanded }}"
+      class="{{ headerClassesValue }}"
+      @click="onHeaderClick()"
+      :aria-expanded="isExpanded() ? 'true' : 'false'"
       aria-controls="sidebar-section-{{ id }}"
     >
       @if(icon)
         <div class="{{ icon }} w-4 h-4 flex-shrink-0 opacity-70"></div>
       @endif
       @if(showLabel)
-        <span class="flex-1 text-[13px] font-semibold tracking-tight truncate">
+        <span class="{{ labelClasses }}">
           {{ label }}
         </span>
-        <div class="i-hugeicons-arrow-right-01 w-3 h-3 transition-transform duration-200 opacity-50 {{ expanded ? 'rotate-90' : '' }}"></div>
+        <div :class="arrowClass()"></div>
       @endif
     </button>
   @else
-    <div class="{{ headerClasses }}">
+    <div class="{{ headerClassesValue }}">
       @if(icon)
         <div class="{{ icon }} w-4 h-4 flex-shrink-0 opacity-70"></div>
       @endif
       @if(showLabel)
-        <span class="flex-1 text-[13px] font-semibold tracking-tight truncate">
+        <span class="{{ labelClasses }}">
           {{ label }}
         </span>
       @endif
     </div>
   @endif
 
-  <!-- Section items -->
-  @if(expanded && showLabel && items.length > 0)
+  @if(showLabel && items.length > 0)
     <div
+      :show="isExpanded()"
       id="sidebar-section-{{ id }}"
-      class="mt-1 space-y-0.5 overflow-hidden"
+      class="{{ groupClasses }}"
       role="group"
       aria-label="{{ label }}"
     >
-      @foreach(items as item)
+      @foreach(item in items)
         <SidebarItem
           :id="item.id"
           :label="item.label"
@@ -99,8 +103,9 @@ const headerClasses = [
           :badge="item.badge"
           :active="item.active"
           :disabled="item.disabled"
-          :indent="true"
-          @click="handleItemClick(item, $event)"
+          :indent="variant !== 'workspace' && variant !== 'desktop'"
+          :variant="variant"
+          @click="onItemClick($event)"
         />
       @endforeach
     </div>

package/src/ui/sidebar/index.ts

@@ -36,7 +36,9 @@ export interface SidebarProps {
   /** Minimum width when collapsed in pixels */
   minWidth?: number
   /** Visual style variant */
-  variant?: 'tahoe' | 'vibrancy' | 'solid' | 'transparent'
+  variant?: SidebarVariant
+  /** Layout placement for app shells and native-like sidebars */
+  placement?: 'fixed' | 'sticky' | 'static'
   /** Position of the sidebar */
   position?: 'left' | 'right'
   /** Whether to show border */
@@ -59,6 +61,7 @@ export interface SidebarSectionProps {
   expanded?: boolean
   collapsible?: boolean
   showLabel?: boolean
+  variant?: SidebarVariant
   onToggle?: (id: string) => void
   onItemClick?: (item: SidebarItemData, event: Event) => void
 }
@@ -72,6 +75,7 @@ export interface SidebarItemProps {
   active?: boolean
   disabled?: boolean
   indent?: boolean
+  variant?: SidebarVariant
   onClick?: (event: Event) => void
 }
 
@@ -84,6 +88,7 @@ export interface SidebarHeaderProps {
   searchPlaceholder?: string
   searchValue?: string
   collapsed?: boolean
+  variant?: SidebarVariant
   onSearch?: (value: string) => void
 }
 
@@ -93,6 +98,7 @@ export interface SidebarFooterProps {
   settingsHref?: string
   settingsLabel?: string
   collapsed?: boolean
+  variant?: SidebarVariant
   actions?: Array<{
     label: string
     icon?: string
@@ -102,6 +108,12 @@ export interface SidebarFooterProps {
   onThemeToggle?: () => void
 }
 
+export type SidebarVariant = 'tahoe' | 'vibrancy' | 'solid' | 'transparent' | 'workspace' | 'desktop'
+
+export type SidebarMaterial = 'auto' | 'sidebar' | 'hud' | 'popover' | 'content'
+
+export type SidebarBackgroundEffect = 'none' | 'vibrancy' | 'shimmer'
+
 /**
  * Native Sidebar Configuration
  *
@@ -109,6 +121,14 @@ export interface SidebarFooterProps {
  * The sidebar uses NSOutlineView with vibrancy for a true Tahoe-style appearance.
  */
 export interface NativeSidebarConfig {
+  /** Visual style variant shared with the web fallback */
+  variant?: SidebarVariant
+  /** Native material used by Craft desktop sidebars */
+  material?: SidebarMaterial
+  /** Native background treatment */
+  backgroundEffect?: SidebarBackgroundEffect
+  /** Whether the native sidebar should let the window background show through */
+  allowsVibrancy?: boolean
   /** Header configuration */
   header?: {
     title?: string

package/src/ui/stepper/StepperStep.stx

@@ -5,24 +5,28 @@ export const label = $props.label || ''
 export const description = $props.description || ''
 export const className = $props.className || ''
 export const as = $props.as || 'div'
-export const onClick = $props.onClick
 
 export const isComplete = stepNumber < currentStep
 export const isCurrent = stepNumber === currentStep
 export const isUpcoming = stepNumber > currentStep
 
 const baseClasses = 'flex items-center'
-const stepClasses = `${baseClasses} ${className}`.trim()
+export const stepClasses = `${baseClasses} ${className}`.trim()
+</script>
+
+<script client>
+const emit = defineEmits()
+const stepNumber = {{ stepNumber }}
 
-export function handleClick() {
-  onClick?.(stepNumber)
+function onClick() {
+  emit('click', stepNumber)
 }
 </script>
 
 <component :is="{{ as }}" class="{{ stepClasses }}">
   <button
     type="button"
-    @click="handleClick"
+    @click="onClick()"
     class="flex items-center gap-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-lg p-2"
   >
     <div class="{{ isComplete ? 'bg-blue-600 dark:bg-blue-500' : isCurrent ? 'bg-blue-600 dark:bg-blue-500 ring-4 ring-blue-200 dark:ring-blue-800' : 'bg-neutral-300 dark:bg-neutral-600' }} w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold transition-all">