Production Patterns

// Basic Modal Pattern

const { div, h3, p } = van.tags;

// Modal state
const isOpen = van.state(false);

// Open/close handlers
const openModal = () => isOpen.val = true;
const closeModal = () => isOpen.val = false;

return div(
  { class: 'space-y-4' },

  h3({ class: 'text-lg font-semibold mb-2' }, 'Basic Modal'),

  Button({
    class: 'solid vwfcolor-sky vwfsize-md',
    onclick: openModal
  }, 'Open Modal'),

  // Modal
  () => isOpen.val ? div(
    { class: 'fixed inset-0 bg-midnight/50 flex items-center justify-center z-50' },
    Card({ class: 'bg-white p-6 rounded-2xl shadow-xl max-w-md mx-4' },
      h3({ class: 'text-xl font-semibold mb-4' }, 'Modal Title'),

      p({ class: 'text-secondary mb-6' },
        'This is a basic modal dialog. It overlays the main content and requires user interaction to close.'
      ),

      div({ class: 'flex gap-2 justify-end' },
        Button({
          class: 'subtle vwfcolor-fog vwfsize-sm',
          onclick: closeModal
        }, 'Cancel'),

        Button({
          class: 'solid vwfcolor-sky vwfsize-sm',
          onclick: () => {
            alert('Action confirmed!');
            closeModal();
          }
        }, 'Confirm')
      )
    )
  ) : ''
);