@stacksjs/components 0.2.92 → 0.2.94

package/src/ui/navigator/README.md

@@ -1,352 +0,0 @@
-# Navigator Component
-
-A versatile navigation component that supports multiple orientations, variants, and styles. Perfect for main navigation, sidebars, tabs, and more.
-
-## Features
-
-- ✅ Multiple variants (default, pills, underline, sidebar)
-- ✅ Horizontal and vertical orientations
-- ✅ Active state handling
-- ✅ Icon support
-- ✅ Badge support
-- ✅ Disabled states
-- ✅ Multiple sizes (sm, md, lg)
-- ✅ Custom navigation handlers
-- ✅ Dark mode support
-- ✅ Accessible with ARIA labels
-- ✅ Keyboard navigation support
-
-## Usage
-
-### Basic Horizontal Navigation
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const items = [
-  { id: 'home', label: 'Home', href: '/' },
-  { id: 'about', label: 'About', href: '/about' },
-  { id: 'contact', label: 'Contact', href: '/contact' },
-]
-
-let activeItem = 'home'
-</script>
-
-<Navigator items={items} active={activeItem} />
-```
-
-### Vertical Sidebar Navigation
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const items = [
-  { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
-  { id: 'projects', label: 'Projects', href: '/projects' },
-  { id: 'team', label: 'Team', href: '/team' },
-  { id: 'settings', label: 'Settings', href: '/settings' },
-]
-</script>
-
-<Navigator
-  items={items}
-  active="dashboard"
-  orientation="vertical"
-  variant="sidebar"
-/>
-```
-
-### Pills Navigation
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const items = [
-  { id: 'overview', label: 'Overview', href: '/overview' },
-  { id: 'analytics', label: 'Analytics', href: '/analytics' },
-  { id: 'reports', label: 'Reports', href: '/reports' },
-]
-</script>
-
-<Navigator
-  items={items}
-  active="overview"
-  variant="pills"
-/>
-```
-
-### Underline Tabs
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const tabs = [
-  { id: 'profile', label: 'Profile', href: '#profile' },
-  { id: 'security', label: 'Security', href: '#security' },
-  { id: 'notifications', label: 'Notifications', href: '#notifications' },
-]
-</script>
-
-<Navigator
-  items={tabs}
-  active="profile"
-  variant="underline"
-/>
-```
-
-### With Icons
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const items = [
-  {
-    id: 'home',
-    label: 'Home',
-    href: '/',
-    icon: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>',
-  },
-  {
-    id: 'search',
-    label: 'Search',
-    href: '/search',
-    icon: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>',
-  },
-]
-</script>
-
-<Navigator items={items} active="home" />
-```
-
-### With Badges
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const items = [
-  { id: 'inbox', label: 'Inbox', href: '/inbox', badge: '12' },
-  { id: 'drafts', label: 'Drafts', href: '/drafts', badge: '3' },
-  { id: 'sent', label: 'Sent', href: '/sent' },
-]
-</script>
-
-<Navigator items={items} active="inbox" variant="sidebar" orientation="vertical" />
-```
-
-### With Disabled Items
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const items = [
-  { id: 'enabled', label: 'Enabled', href: '/enabled' },
-  { id: 'disabled', label: 'Disabled (Coming Soon)', href: '/disabled', disabled: true },
-  { id: 'another', label: 'Another Link', href: '/another' },
-]
-</script>
-
-<Navigator items={items} active="enabled" />
-```
-
-### With Custom Navigation Handler
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const items = [
-  { id: 'tab1', label: 'Tab 1' },
-  { id: 'tab2', label: 'Tab 2' },
-  { id: 'tab3', label: 'Tab 3' },
-]
-
-let activeTab = 'tab1'
-
-function handleNavigate(item) {
-  activeTab = item.id
-  console.log('Navigated to:', item.label)
-  // Custom logic here (e.g., switch content, fetch data, etc.)
-}
-</script>
-
-<Navigator
-  items={items}
-  active={activeTab}
-  onNavigate={handleNavigate}
-  variant="underline"
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `items` | `NavigatorItem[]` | `[]` | Array of navigation items |
-| `active` | `string` | `''` | ID or href of the currently active item |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout orientation |
-| `variant` | `'default' \| 'pills' \| 'underline' \| 'sidebar'` | `'default'` | Visual style variant |
-| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of navigation items |
-| `onNavigate` | `(item: NavigatorItem) => void` | - | Custom navigation handler (prevents default link behavior) |
-| `className` | `string` | `''` | Additional CSS classes |
-
-### NavigatorItem Interface
-
-```typescript
-interface NavigatorItem {
-  id?: string           // Unique identifier
-  label: string         // Display text
-  href?: string         // Link URL (renders as <a> if provided, <button> otherwise)
-  icon?: string         // SVG icon HTML
-  badge?: string | number // Badge text/number
-  disabled?: boolean    // Whether the item is disabled
-}
-```
-
-## Variants
-
-### Default
-Clean, simple navigation with subtle hover effects.
-
-### Pills
-Rounded pill-style navigation with filled active state.
-
-### Underline
-Tab-style navigation with bottom border indicator.
-
-### Sidebar
-Left-bordered navigation optimized for vertical sidebars.
-
-## Sizes
-
-- **sm**: Compact padding and text
-- **md**: Default comfortable size
-- **lg**: Large padding and text
-
-## Examples
-
-### App Header Navigation
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const mainNav = [
-  { id: 'products', label: 'Products', href: '/products' },
-  { id: 'pricing', label: 'Pricing', href: '/pricing' },
-  { id: 'docs', label: 'Docs', href: '/docs' },
-  { id: 'blog', label: 'Blog', href: '/blog' },
-]
-</script>
-
-<header class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-  <div class="max-w-7xl mx-auto px-4 py-4">
-    <Navigator items={mainNav} active="/products" />
-  </div>
-</header>
-```
-
-### Dashboard Sidebar
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const sidebarNav = [
-  {
-    id: 'dashboard',
-    label: 'Dashboard',
-    href: '/dashboard',
-    icon: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /></svg>',
-  },
-  {
-    id: 'projects',
-    label: 'Projects',
-    href: '/projects',
-    badge: '5',
-    icon: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" /></svg>',
-  },
-  {
-    id: 'team',
-    label: 'Team',
-    href: '/team',
-    icon: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>',
-  },
-]
-</script>
-
-<aside class="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 h-full">
-  <Navigator
-    items={sidebarNav}
-    active="/dashboard"
-    orientation="vertical"
-    variant="sidebar"
-  />
-</aside>
-```
-
-### Settings Tabs
-
-```stx
-<script>
-import { Navigator } from '@stacksjs/components'
-
-const settingsTabs = [
-  { id: 'general', label: 'General', href: '#general' },
-  { id: 'security', label: 'Security', href: '#security' },
-  { id: 'notifications', label: 'Notifications', href: '#notifications' },
-  { id: 'billing', label: 'Billing', href: '#billing' },
-]
-
-let activeTab = 'general'
-</script>
-
-<div class="border-b border-gray-200 dark:border-gray-700 mb-6">
-  <Navigator
-    items={settingsTabs}
-    active={activeTab}
-    variant="underline"
-  />
-</div>
-```
-
-## Styling
-
-The navigator uses utility-first CSS classes and supports dark mode. Customize appearance by passing additional classes:
-
-```stx
-<Navigator
-  className="bg-gray-50 dark:bg-gray-900 rounded-lg p-2"
-  items={items}
-  active="home"
-/>
-```
-
-## Accessibility
-
-- Semantic HTML (`<nav>`, `<a>`, `<button>`)
-- ARIA labels for navigation role
-- `aria-current="page"` for active items
-- `aria-disabled` for disabled items
-- Keyboard navigation support
-- Focus indicators
-
-## Browser Support
-
-Works in all modern browsers that support:
-- CSS Flexbox
-- CSS custom properties
-- ES6+ JavaScript
-
-## Related Components
-
-- **Breadcrumb**: Hierarchical navigation trail
-- **Tabs**: Content switching interface
-- **Sidebar**: Full sidebar layout with navigation
-- **Menu**: Dropdown menu navigation

package/src/ui/navigator/index.ts

@@ -1,20 +0,0 @@
-export { default as Navigator } from './Navigator.stx'
-
-export interface NavigatorItem {
-  id?: string
-  label: string
-  href?: string
-  icon?: string
-  badge?: string | number
-  disabled?: boolean
-}
-
-export interface NavigatorProps {
-  items: NavigatorItem[]
-  active?: string // ID or href of active item
-  orientation?: 'horizontal' | 'vertical'
-  variant?: 'default' | 'pills' | 'underline' | 'sidebar'
-  size?: 'sm' | 'md' | 'lg'
-  onNavigate?: (item: NavigatorItem) => void
-  className?: string
-}

package/src/ui/notification/Notification.stx

@@ -1,117 +0,0 @@
-<script server>
-// Initial defaults captured at render time. The client script wraps these
-// in signals so consumers can mutate them after mount (fetch-then-toast,
-// auto-dismiss, etc.). See stacksjs/stx#1692.
-export const initialShow = $props.show !== false
-export const initialTitle = $props.title || ''
-export const initialMessage = $props.message || ''
-export const initialType = $props.type || 'info'
-export const initialPosition = $props.position || 'top-right'
-export const initialDuration = Number($props.duration ?? 5000)
-export const className = $props.className || ''
-</script>
-
-<script client>
-const emit = defineEmits()
-
-const isVisible = state({{ initialShow }})
-const title = state({{ initialTitle }})
-const message = state({{ initialMessage }})
-const type = state({{ initialType }})
-const position = state({{ initialPosition }})
-const duration = state({{ initialDuration }})
-
-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'
-const extraClassName = {{ JSON.stringify(className) }}
-
-const notificationClasses = derived(() => {
-  const color = typeColors[type()] || typeColors.info
-  const pos = positions[position()] || positions['top-right']
-  return `${baseClasses} ${color} ${pos} ${extraClassName}`.trim()
-})
-
-let autoHideTimer = null
-function clearAutoHide() {
-  if (autoHideTimer) {
-    clearTimeout(autoHideTimer)
-    autoHideTimer = null
-  }
-}
-function scheduleAutoHide() {
-  clearAutoHide()
-  const d = duration()
-  if (d > 0 && isVisible()) {
-    autoHideTimer = setTimeout(() => close(), d)
-  }
-}
-
-function close() {
-  isVisible.set(false)
-  clearAutoHide()
-  emit('close')
-}
-
-function open(opts) {
-  if (opts && typeof opts === 'object') {
-    if (opts.title !== undefined) title.set(opts.title)
-    if (opts.message !== undefined) message.set(opts.message)
-    if (opts.type !== undefined) type.set(opts.type)
-    if (opts.position !== undefined) position.set(opts.position)
-    if (opts.duration !== undefined) duration.set(Number(opts.duration))
-  }
-  isVisible.set(true)
-  scheduleAutoHide()
-}
-
-onMount(() => {
-  if (isVisible()) scheduleAutoHide()
-})
-
-defineExpose({
-  open,
-  close,
-  isVisible,
-  title,
-  message,
-  type,
-  position,
-  duration,
-})
-</script>
-
-<div :if="isVisible()" :class="notificationClasses()" role="alert">
-  <div class="flex items-start">
-    <div class="flex-1">
-      <p :if="title()" class="text-sm font-medium" :text="title()"></p>
-      <p :if="message()" class="mt-1 text-sm" :class="title() ? 'opacity-90' : ''" :text="message()"></p>
-      <slot :if="!title() && !message()" />
-    </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>

package/src/ui/notification/README.md

@@ -1,114 +0,0 @@
-# Notification Component
-
-Toast notifications for user feedback and alerts.
-
-## Installation
-
-```bash
-bun add @stacksjs/components
-```
-
-## Usage
-
-```stx
-<script server>
-let showNotification = true
-
-function closeNotification() {
-  showNotification = false
-}
-</script>
-
-<Notification
-  :show="showNotification"
-  title="Success!"
-  message="Your changes have been saved."
-  type="success"
-  :onClose="closeNotification"
-/>
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `show` | `boolean` | `true` | Whether notification is visible |
-| `title` | `string` | `''` | Notification title |
-| `message` | `string` | `''` | Notification message |
-| `type` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Notification type |
-| `position` | `'top-left' \| 'top-right' \| 'top-center' \| 'bottom-left' \| 'bottom-right' \| 'bottom-center'` | `'top-right'` | Position on screen |
-| `duration` | `number` | `5000` | Auto-hide duration (0 = no auto-hide) |
-| `onClose` | `() => void` | - | Close handler |
-| `className` | `string` | `''` | Additional CSS classes |
-
-## Examples
-
-### Types
-
-```stx
-<Notification type="info" title="Information" message="This is an info message" />
-
-<Notification type="success" title="Success" message="Operation completed" />
-
-<Notification type="warning" title="Warning" message="Please be careful" />
-
-<Notification type="error" title="Error" message="Something went wrong" />
-```
-
-### Positions
-
-```stx
-<Notification position="top-left" title="Top Left" />
-<Notification position="top-center" title="Top Center" />
-<Notification position="bottom-right" title="Bottom Right" />
-```
-
-### No Auto-Hide
-
-```stx
-<Notification
-  :duration="0"
-  title="Important"
-  message="This will not auto-hide"
-/>
-```
-
-### Custom Content
-
-```stx
-<Notification type="info">
-  <div class="flex items-start gap-3">
-    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-    <div>
-      <p class="font-medium">Custom notification</p>
-      <p class="mt-1 text-sm">With custom content and layout</p>
-    </div>
-  </div>
-</Notification>
-```
-
-### With Actions
-
-```stx
-<Notification type="info" title="New message">
-  <p>You have a new message from John</p>
-  <div class="mt-3 flex gap-2">
-    <Button size="sm" variant="primary">View</Button>
-    <Button size="sm" variant="ghost">Dismiss</Button>
-  </div>
-</Notification>
-```
-
-## Features
-
-- 4 types (info, success, warning, error)
-- 6 position options
-- Auto-hide with configurable duration
-- Dark mode support
-- Accessible (WAI-ARIA)
-- Close button
-- Custom content support
-- Smooth transitions
-- Customizable styling

package/src/ui/notification/index.ts

@@ -1,12 +0,0 @@
-export { default as Notification } from './Notification.stx'
-
-export interface NotificationProps {
-  show?: boolean
-  title?: string
-  message?: string
-  type?: 'info' | 'success' | 'warning' | 'error'
-  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'
-  duration?: number
-  onClose?: () => void
-  className?: string
-}